Photoshop: Designing Graphics for the Web

Christine Vucinich & Vicki Weidler

ITS Training Services

224 B Computer Building
University Park, PA 16802
seminars@psu.edu
http://cac.psu.edu/training/

Overview
Photoshop Basics
What is Photoshop?
Uses
Tour

Web Graphics

Graphic Limitations
Display Considerations
Cross-Platform/Browser-Safe Palette
File Formats
Transparent Text
Saving for the Web

Overview Continued
Scanning

Scanning Concepts
Evaluating Originals
Scanning Line Art vs. Photographic Images
Scanning Strategies
Photoshop Measurement/Correction Tools
Additional Resources

What is Photoshop?
Photo retouching, image editing, and color
painting program; graphic design tool

Create high-quality digital images

Tools & special effects capabilities
Manipulate scanned images, slides, & original artwork
Isolate parts of an image for experimentation &
individual editing
And lots more..

Uses of Photoshop

Art (line drawings, charcoal, color original)

Photographic
Restoration
WWW (GIFS, JPEGS, etc.)
Montage
Halftones, Duotones, Tritones, Quadtones
Color Separations
Posterizations
Special Effects

Touring Photoshop
Using Help
Navigating: Windows, Palettes,
Features & Tools
Preferences

Graphic Limitations
Connection Speeds
User Configurations

Display Considerations
Screen Sizes
Colors

Cross Platform/Browser-Safe Colors

256 vs. 216 Colors
Dithering

Using the Color Picker

File Formats
JPEG Joint Photographic Experts Group
GIF Graphics Interchange Format
PNG Portable Network Graphics

JPEG
Best for photos or continuous tone, fullcolor images
Uses 16 million colors
Browsers use reasonable approximations
Work in RGB mode
Uses lossy compression
Saving (Standard, Optimized, Progressive)

GIF

Best for solid color images (buttons, logos)

Uses 256 colors
Browsers uses 216 colors
Work in Indexed mode
Good compression
Interlaced

PNG (8-bit)
Best for line art (logos)
Compresses solid areas of color well and
maintains sharp detail
Generally, has better compression than GIF
(10-30% smaller)
If considering saving as GIF, also consider
saving as PNG (8-bit)
Not supported by older browsers

PNG (24-bit)
Best for continuous-tone images
Compresses well, but can be larger than
JPEGs
If considering saving as JPEG, could also
consider PNG (24-bit)
Not supported by older browsers

JPEG vs PNG

Comparison
of JPEG and
PNG

68K PNG

31K JPG

GIF vs PNG

Comparison
of JPEG and
PNG
10.8K PNG-8 with 64 colors

9.5K GIF with 64 colors

Transparent Text

Web Graphics

Saving for the Web

4-Up View
File Sizes and Download Speeds

Changing Options
Halo Effect and Matte Options

Scanning Concepts

Getting Images Into Photoshop

Bitmap vs. Vector Graphics
Pixel Dimensions
Image Resolution
Monitor Resolution
Printer Resolution
Screen Frequency
File Size

Evaluating Originals

Color Range
Contrast
Size
Good Original
Shadow & Highlight Detail
Tonal Corrections

Scanning Line Art

Scan Resolution = Output Device
Resolution

Sizing
Factor

Scanning Photographic Images

Scan
Screen
Resolution = Ruling

Sizing
Factor

Quality
Factor

Sizing
Factor

Desired Size/Original Size

Basic Image Correction

Examine the Original

Scan the Original
Identify the Image Colors & Tones
Measure & Adjust Highlights
Measure & Adjust Shadows
Measure & Adjust Midtones
Apply Unsharp Mask
Save File
Review Image for Rescanning or Additional
Corrections

Color & Tonal Adjustments

Histograms
Navigator Palette
Gamma Settings
Curve Controls
Unsharp Mask Filter

Summary
Photoshop Basics
What is Photoshop?
Uses
Tour

Web Graphics

Graphic Limitations
Display Considerations
Cross-Platform/Browser-Safe Palette
File Formats
Transparent Text
Saving for the Web

Summary Continued
Scanning

Scanning Concepts
Evaluating Originals
Scanning Line Art vs. Photographic Images
Scanning Strategies
Photoshop Measurement/Correction Tools
Additional Resources

Conclusion
Questions & Answers

Additional Resources
Thank You!!!