Presentation is loading. Please wait.

Presentation is loading. Please wait.

Digital Photo editing with Photoshop

Similar presentations


Presentation on theme: "Digital Photo editing with Photoshop"— Presentation transcript:

1 Digital Photo editing with Photoshop

2 Overview Photoshop Basics Web Graphics What is Photoshop? Uses Tour
Graphic Limitations Display Considerations Cross-Platform/Browser-Safe Palette File Formats Transparent Text Saving for the Web

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

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 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 Touring Photoshop Using Help
Navigating: Windows, Palettes, Features & Tools Preferences

7 Graphic Limitations Connection Speeds User Configurations
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

8 Display Considerations
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 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors Display Considerations Screen Sizes Colors

9 Cross Platform/Browser-Safe 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 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors Cross Platform/Browser-Safe Colors 256 vs. 216 Colors Dithering Using the Color Picker

10 File Formats JPEG – Joint Photographic Experts Group
GIF – Graphics Interchange Format PNG – Portable Network Graphics 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

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) 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

12 GIF Best for solid color images (buttons, logos) Uses 256 colors
Browsers uses 216 colors Work in Indexed mode Good compression Interlaced Uses Lossless Compression Never discards any info about original file Interlacing Display low resolution image Followed by higher resolution Ending with highest quality

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 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 Comparison of JPEG and PNG
JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG

16 Comparison of JPEG and PNG
GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors

17 Web Graphics Transparent Text 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 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors Transparent Text Web Graphics

18 Saving for the Web 4-Up View File Sizes and Download Speeds
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 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors Saving for the Web 4-Up View File Sizes and Download Speeds Changing Options Halo Effect and Matte Options

19 Scanning Concepts Getting Images Into Photoshop
Bitmap vs. Vector Graphics Pixel Dimensions Image Resolution Monitor Resolution Printer Resolution Screen Frequency File Size

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

21 Output Device Resolution
Scanning Line Art Output Device Resolution Sizing Factor Scan Resolution = X

22 Scanning Photographic Images
SizingFactor Scan Resolution Screen Ruling Quality Factor = X X SizingFactor Desired Size/Original Size =

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 Color & Tonal Adjustments
Histograms Navigator Palette Gamma Settings Curve Controls Unsharp Mask Filter


Download ppt "Digital Photo editing with Photoshop"

Similar presentations


Ads by Google