Overview Photoshop Basics What is Photoshop Uses Tour Web Graphics Graphic Limitations Display Considerations CrossPlatformBrowserSafe Palette File Formats Transparent Text Saving for the Web ID: 718771
Download Presentation The PPT/PDF document "Photoshop Designing Graphics for the We..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Photoshop
Designing
Graphics for the WebSlide2
Overview
Photoshop Basics
What is Photoshop?UsesTourWeb GraphicsGraphic LimitationsDisplay ConsiderationsCross-Platform/Browser-Safe PaletteFile FormatsTransparent TextSaving for the WebSlide3
What is Photoshop?
Photo retouching, image editing, and color
painting program; graphic design toolCreate high-quality digital imagesTools & special effects capabilitiesManipulate scanned images, slides, & original artworkIsolate parts of an image for experimentation & individual editingAnd lots more…..Slide4
Uses of Photoshop
Art (line drawings, charcoal, color original)
PhotographicRestorationWWW (GIFS, JPEGS, etc.)Color SeparationsPosterizationsSpecial EffectsSlide5
Touring Photoshop
Using Help
Navigating: Windows, Palettes, Features & ToolsPreferencesSlide6
Graphic Limitations
Connection Speeds
User ConfigurationsSlide7
Display Considerations
Screen Sizes
ColorsSlide8
Cross Platform/Browser-Safe Colors
256 vs. 216 Colors
Dithering
Using the Color PickerSlide9
File Formats
JPEG – Joint Photographic Experts Group
GIF – Graphics Interchange FormatPNG – Portable Network GraphicsSlide10
JPEG
Best for photos or continuous tone, full-color images
Uses 16 million colorsBrowsers use reasonable approximationsWork in RGB modeUses lossy compressionSaving (Standard, Optimized, Progressive)Slide11
GIF
Best for solid color images (buttons, logos)
Uses 256 colorsBrowsers uses 216 colorsWork in Indexed modeGood compressionInterlacedSlide12
PNG (8-bit)
Best for line art (logos)
Compresses solid areas of color well and maintains sharp detailGenerally, has better compression than GIF (10-30% smaller)If considering saving as GIF, also consider saving as PNG (8-bit)Not supported by older browsersSlide13
PNG (24-bit)
Best for continuous-tone images
Compresses well, but can be larger than JPEGsIf considering saving as JPEG, could also consider PNG (24-bit)Not supported by older browsersSlide14
JPEG vs PNG
Comparison of JPEG and PNG
68K PNG
31K JPGSlide15
GIF vs PNG
Comparison of JPEG and PNG
10.8K PNG-8 with 64 colors
9.5K GIF with 64 colorsSlide16
Transparent Text
Web GraphicsSlide17
Saving for the Web
4-Up View
File Sizes and Download Speeds
Changing Options
Halo Effect and Matte OptionsSlide18
Scanning Concepts
Getting Images Into Photoshop
Bitmap vs. Vector GraphicsPixel DimensionsImage ResolutionMonitor ResolutionPrinter ResolutionScreen FrequencyFile SizeSlide19
Evaluating Originals
Color Range
ContrastSizeGood OriginalShadow & Highlight DetailTonal CorrectionsSlide20
Basic Image Correction
Examine the Original
Scan the OriginalIdentify the Image Colors & TonesMeasure & Adjust HighlightsMeasure & Adjust ShadowsMeasure & Adjust MidtonesApply Unsharp MaskSave FileReview Image for Rescanning or Additional CorrectionsSlide21
Color & Tonal Adjustments
Histograms
Navigator PaletteGamma SettingsCurve ControlsUnsharp Mask FilterSlide22
Summary
Photoshop Basics
What is Photoshop?UsesTourWeb GraphicsGraphic LimitationsDisplay ConsiderationsCross-Platform/Browser-Safe PaletteFile FormatsTransparent TextSaving for the Web