You are on page 1of 27

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, 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 9.5K GIF with 64 colors
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 X Sizing


Factor
Resolution
Scanning Photographic Images

Scan Screen Quality Sizing


= X X
Resolution Ruling Factor Factor

Sizing
= Desired Size/Original Size
Factor
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!!!

You might also like