Writing 166J
Th 6-9:45 p.m. Oakes 222 and 205
Spring 2001
5 credits

Instructor: Kevin Woodward
Email: kwoodward@yahoo.com or woodward@cats.ucsc.edu
Phone: 831.595.4518 (cell) or 831.459.4574 (UCSC office)
Office hours: Th 4:45-5:30 p.m. Kresge College, Room 216
Class website: www.cruzio.com/~kevinw/writing166j

Graphics overview

On the Web graphics may include charts, clip art, images and photographs. Selecting when and if a specific graphic should be used is an important consideration and should always be evaluated in terms of overall user value.

A graphic should never be used unless it relates specifically to the purpose and message of the site or Web page.

• Add visual interest to the page
• Affect the tone and/or mood
• Attract attention
• Break up the page
• Complement text
• Create a hotspot link
• Entertain
• Provide an example
• Display product or object

The two most widely used formats on the Web for graphics are:

• .GIF (Graphics Interchange Format) – best used for line drawings, logos and solid graphics such as butons
• .JPG (Joint Photographic Experts Grouo) – best used for photographs and continuous-tone images

Graphics that are included as part of a Web page are called inline images. Images that do not display their background color are called transparent and are always in the .gif format. For this reason they are most often referred to as "transparent gifs."

Graphics checklist

• Check copyright laws
• Use only if necessary
• Use no more than 2-3 per page
• Reuse if possible to take advantage of cacheing
• Optimize for the Web by reducing unnecessary colors and detail, keeping size as small as possible
• Use height and width attributes in image tag to speed page download speed
• Use alt attributes as a service to users with images turned off

Graphic programs

• High-end: Adobe Photoshop (Mac and PC, $600)
• Low-end: PaintShop Pro (PC only, $100)

Photoshop basic tasks

Resizing/optimzing a photo or image

1. Launch Photoshop
2. File > Open > navigate to file location, select and open
3. Image > Mode > choose indexed color (.gif) or RGB color (.jpg)
4. Image > Image size ... adjust height or width in pixels
5. Image > Adjust > Auto levels
6. Filter > Sharpen > Sharpen edges
7. File > Save for Web > OK ... rename in new location (if applicable)

Scanning an image

1. Launch Photoshop
2. File > Import > TWAIN Acquire
3. Configure settings (72dpi, RGB color, size, etc.)
4. Select "Preview" to check image display
5. Use selection tool to set image field that want scanned
6. Select "Scan" ... when complete image will appear in Photoshop ready to resize/optimize

Creating a simple button image

1. Launch Photoshop
2. File > New > name file and set height and width in pixels > select OK
3. Select type tool > choose font, size, color, etc. > click once in file ... type text > select "X" to commit edits
4. File > Save for Web > OK ... choose file location > Save