Photoshop designing graphics for the web

Photoshop: Designing Graphics for the Web
Christine Vucinich & Vicki Weidler
ITS Training Services
224 B Computer Building
University Park, PA 16802

/>
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, full-
color 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
X
Sizing
Factor

Scanning Photographic Images
Scan
Resolution
=
Screen
Ruling
X X
Quality
Factor
Sizing
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