Photoshop: Designing Graphics for the Web
Christine Vucinich & Vicki Weidler
ITS Training Services
224 B Computer Building...
Overview
• Photoshop Basics
– What is Photoshop?
– Uses
– Tour
• Web Graphics
– Graphic Limitations
– Display Consideratio...
Overview Continued
• Scanning
– Scanning Concepts
– Evaluating Originals
– Scanning Line Art vs. Photographic Images
– Sca...
What is Photoshop?
Photo retouching, image editing, and color
painting program; graphic design tool
• Create high-quality ...
Uses of Photoshop
• Art (line drawings, charcoal, color original)
• Photographic
• Restoration
• WWW (GIFS, JPEGS, etc.)
•...
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 Graphi...
JPEG
• Best for photos or continuous tone, full-
color images
• Uses 16 million colors
• Browsers use reasonable approxima...
GIF
• Best for solid color images (buttons, logos)
• Uses 256 colors
• Browsers uses 216 colors
• Work in Indexed mode
• G...
PNG (8-bit)
• Best for line art (logos)
• Compresses solid areas of color well and
maintains sharp detail
• Generally, has...
PNG (24-bit)
• Best for continuous-tone images
• Compresses well, but can be larger than
JPEGs
• If considering saving as ...
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
• Mon...
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...
Basic Image Correction
• Examine the Original
• Scan the Original
• Identify the Image Colors & Tones
• Measure & Adjust H...
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 Consideration...
Summary Continued
• Scanning
– Scanning Concepts
– Evaluating Originals
– Scanning Line Art vs. Photographic Images
– Scan...
Conclusion
• Questions & Answers
• Additional Resources
• Thank You!!!
Upcoming SlideShare
Loading in …5
×

Web design tod

222 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
222
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Web both opportunities and limitations Can avoid limitations by taking into consideration: Connection Speeds Main problem currently Important: Create graphics with smallest file size possible Yet maintaining desired quality User Configurations Not exclusive to the web Multitude of different user configurations Must decide what the minimum system is you are going to support
  • Web browser takes up screen real estate This limits available space somewhat Screen Size-Guidelines Most 14-inch monitors 570 x 400 browser window 640 x 480 display Most 15-inch monitors 730 x 520 browser window 800 x 600 display Colors Many computers still operate with only 256 colors Image/Graphic may have more colors Problem: Computer won’t support image/graphic Browser dithers colors to find closest match This could change what original image looked like/ugly To avoid dithering, use 256 color mode Dithering – mixes pixels of available colors in color table to simulate missing colors Even 256 colors not considered “web-safe” Web-safe/Color-safe palette Mac vs. PC use slightly different color systems Reality: cross-platform, browser-safe palette only has 216 colors Show this Flowers > Image > Duplicate > Repeat making 2 nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
  • Web browser takes up screen real estate This limits available space somewhat Screen Size-Guidelines Most 14-inch monitors 570 x 400 browser window 640 x 480 display Most 15-inch monitors 730 x 520 browser window 800 x 600 display Colors Many computers still operate with only 256 colors Image/Graphic may have more colors Problem: Computer won’t support image/graphic Browser dithers colors to find closest match This could change what original image looked like/ugly To avoid dithering, use 256 color mode Dithering – mixes pixels of available colors in color table to simulate missing colors Even 256 colors not considered “web-safe” Web-safe/Color-safe palette Mac vs. PC use slightly different color systems Reality: cross-platform, browser-safe palette only has 216 colors Show this Flowers > Image > Duplicate > Repeat making 2 nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
  • JPEG Pronounced Jay-Peg JPEG actually compression algorithm, not a file format JPEG associated with JFIF (JPEG File Interchange Format) GIF Pronounced Jiff, although most call it Giff PNG Pronounced Ping Newer file format Will see more in future
  • Lossy Compression Smaller Files Discards Info Removes Details & Color Eye can’t see Will lose quality when adjusting/reducing file size Interlacing Effect with Progressive Display low resolution image first Followed by higher resolution Fills in details Ends with highest quality
  • Uses Lossless Compression Never discards any info about original file Interlacing Display low resolution image Followed by higher resolution Ending with highest quality
  • Web browser takes up screen real estate This limits available space somewhat Screen Size-Guidelines Most 14-inch monitors 570 x 400 browser window 640 x 480 display Most 15-inch monitors 730 x 520 browser window 800 x 600 display Colors Many computers still operate with only 256 colors Image/Graphic may have more colors Problem: Computer won’t support image/graphic Browser dithers colors to find closest match This could change what original image looked like/ugly To avoid dithering, use 256 color mode Dithering – mixes pixels of available colors in color table to simulate missing colors Even 256 colors not considered “web-safe” Web-safe/Color-safe palette Mac vs. PC use slightly different color systems Reality: cross-platform, browser-safe palette only has 216 colors Show this Flowers > Image > Duplicate > Repeat making 2 nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
  • Web browser takes up screen real estate This limits available space somewhat Screen Size-Guidelines Most 14-inch monitors 570 x 400 browser window 640 x 480 display Most 15-inch monitors 730 x 520 browser window 800 x 600 display Colors Many computers still operate with only 256 colors Image/Graphic may have more colors Problem: Computer won’t support image/graphic Browser dithers colors to find closest match This could change what original image looked like/ugly To avoid dithering, use 256 color mode Dithering – mixes pixels of available colors in color table to simulate missing colors Even 256 colors not considered “web-safe” Web-safe/Color-safe palette Mac vs. PC use slightly different color systems Reality: cross-platform, browser-safe palette only has 216 colors Show this Flowers > Image > Duplicate > Repeat making 2 nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
  • Web design tod

    1. 1. 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/
    2. 2. 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
    3. 3. Overview Continued • Scanning – Scanning Concepts – Evaluating Originals – Scanning Line Art vs. Photographic Images – Scanning Strategies – Photoshop Measurement/Correction Tools – Additional Resources
    4. 4. 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…..
    5. 5. 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
    6. 6. Touring Photoshop • Using Help • Navigating: Windows, Palettes, Features & Tools • Preferences
    7. 7. Graphic Limitations • Connection Speeds • User Configurations
    8. 8. Display Considerations • Screen Sizes • Colors
    9. 9. Cross Platform/Browser-Safe Colors • 256 vs. 216 Colors • Dithering • Using the Color Picker
    10. 10. File Formats • JPEG – Joint Photographic Experts Group • GIF – Graphics Interchange Format • PNG – Portable Network Graphics
    11. 11. 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)
    12. 12. GIF • Best for solid color images (buttons, logos) • Uses 256 colors • Browsers uses 216 colors • Work in Indexed mode • Good compression • Interlaced
    13. 13. 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
    14. 14. 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
    15. 15. JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG
    16. 16. GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors
    17. 17. Transparent Text Web Graphics
    18. 18. Saving for the Web • 4-Up View • File Sizes and Download Speeds • Changing Options • Halo Effect and Matte Options
    19. 19. Scanning Concepts • Getting Images Into Photoshop • Bitmap vs. Vector Graphics • Pixel Dimensions • Image Resolution • Monitor Resolution • Printer Resolution • Screen Frequency • File Size
    20. 20. Evaluating Originals • Color Range • Contrast • Size • Good Original • Shadow & Highlight Detail • Tonal Corrections
    21. 21. Scanning Line Art Scan Resolution = Output Device Resolution X Sizing Factor
    22. 22. Scanning Photographic Images Scan Resolution = Screen Ruling X X Quality Factor Sizing Factor Sizing Factor = Desired Size/Original Size
    23. 23. 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
    24. 24. Color & Tonal Adjustments • Histograms • Navigator Palette • Gamma Settings • Curve Controls • Unsharp Mask Filter
    25. 25. 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
    26. 26. Summary Continued • Scanning – Scanning Concepts – Evaluating Originals – Scanning Line Art vs. Photographic Images – Scanning Strategies – Photoshop Measurement/Correction Tools – Additional Resources
    27. 27. Conclusion • Questions & Answers • Additional Resources • Thank You!!!

    ×