General Tips for Creating Digital Images
Authored by Doug Marschalek, UW-Madison

The collection and documentation of your work is a continuous process; as events occur, record them digitally through still or video clips. You are trying to educate the viewer on what you do, how you do it, and how well you do it.

When you are preparing digital documentation for your E- Portfolio consider the following:

1. Think in terms of pixels rather than inches. A one inch square on the monitor is 72 pixels vertically by 72 pixels horizontally; or 5184 pixels construct a 1" x 1" image on the screen.

2. All material should be scanned or photographed at 72 dpi (dots per inch). This is the resolution of your monitor. Producing digital images at a higher dpi will not appear any different on the screen from 72 dpi resolution. Using higher resolution will take longer for images to download from the Internet.

3. Size images to fit the need. Use images no larger than they need to be for the viewer to understand what is the message.

4. Save images in one of two formats: JPEG or GIF

a. JPEG file format is used for images with many levels of value; the file extension is jpg (e.g., monet.jpg)

b. GIF file format is used for images constructed of flat colors; the file extension is gif (e.g., warhol.gif)

Tips for Creating Digital Images for
Web-Based Portfolios

1. Create navigation buttons that are the size of a thumb nail to a postage stamp, about 50 pixels x 50 pixels to 50 x 72.

2. A readable digital image is about 1/4th screen, or 320 x 240 pixels; a full-screen image is 640 x 480 (fits within a 15" monitor).

3. Resize images in software, e.g., Photoshop or other imaging software. Do not resize the image in the web software.

4. Smaller images download faster than larger ones. Thus, use a small image to introduce the viewer to an idea; if the viewer desires to view a larger version, build a link from the small image to a larger version of it on another page.

5. Instead of using large images to convey information, sometimes using details of the original image is helpful. Link an area of an image to a detail of the image. This is called object mapping - -on the original image, one or multiple hot spots or areas of interactivity are placed within the image. When the cursor runs over the hot spot, the cursor turns from an arrow to a hand indicating interactivity. A click on the hot spot navigates to another page containing the detail or other relevant image.

6. Do not use white fonts on dark backgrounds. If the viewer wants to print the page, white text will not print. A solid background color will not print if it is a web-background.

7. Choose font sizes that function for graphic communication and readability. Size 3 font is a common size for text information. Use larger fonts for headers.

a. think of three kinds of text information: headers, text information, and picture captions - each is subsequently smaller in scale.

b. Use fonts that are accessible to every user: Courier and Times

8. Save all web pages with a file extension: HTML (e.g., monet page 1.html)

9. Do not use any punctuation marks in the name of a file (e.g., . , / ); this will cause problems in how the internet browser reads your file.

10. Produce short video clips that highlight an episode or event, 5-20 seconds in length. Long video clips have long download times.

Tips for Saving & Organizing Images and Text

It is essential to become organized in your web project; you may have 300 images, 50-100 pages!

1. Before constructing your E-Portfolio with your choice of software, develop a hardcopy (on paper) map or concept web of your site. Use the suggested content categories of E-Portfolio. This will help in the organization and construction of your site and will allow you to work efficiently on the computer later.

2. Save all written documents that you produce in courses on a zip disc until you exit your academic program. For example, in your senior year, you may decide that you want to include an art history paper from your sophomore year.

3. Purchase a zip disk and use it only for your portfolio. Place only pages and images that you use for the portfolio on it. Place similar images and related text in the same folder. For example, if you have a folder for your students' ceramic works, label the folder, ceramics, and place ceramic images and any text within the folder.

4. Always backup your work! Save your portfolio documents in more than one place. Do not leave copies of your portfolio on university computer desktops or hard drives. Your portfolio is personal and it may not be there when you return.

Using Technology

It is very important that you select software to create your E-Portfolio that is compatible with your technical skills and comfort level with technology. Complex programs, such as, Adobe Go Live and Dreamweaver have a high learning curve and require a greater time commitment. Take the time, however, to learn the technical skills necessary for your E-Portfolio development. These skills include learning how to scan, save and manipulate images, use digital and video cameras and download and edit video. These skills should be addressed in the context of university courses and professional development. Take advantage of university and/or conference workshops on technology.