View
217
Download
2
Category
Preview:
Citation preview
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 11© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 11
Graphic File FormatsGraphic File FormatsGraphic File FormatsGraphic File Formats
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 22© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 22
Common FormatsCommon FormatsCommon FormatsCommon Formats• Graphics Interchange Format (GIF)• Joint Photographic Experts Group (JPEG)• Portable Network Graphics (PNG)• Scalable Vector Graphics (SVG)
• Print Formats– EPS
Encapsulated PostScript (for vector images)– TIFF
Tagged Interface File Format (for raster images)
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 33© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 33
de facto Standardsde facto Standardsde facto Standardsde facto Standards• GIF• JPEG
• Plug-In dependent graphic effects– interactive games– real-time audio
broadcasts– movies– only useful when user is
willing to download the plug-in
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 44© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 44
GIF GIF - - Graphics Interchange FormatGraphics Interchange FormatGIF GIF - - Graphics Interchange FormatGraphics Interchange Format
• Invented for use on CompuServe• Designed for low-bandwidth users• Uses Lempel-Ziv Welch (LZW) compression
– a “lossless” data format– decompressed graphic looks like original
• Color limitations– Web is standardized on 216 specific colors– Use Photoshop's Indexed Color Mode to convert an
existing graphic to GIF’s 256 colors– Use Photoshop's Web Palette to create new GIFs
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 55© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 55
DitheringDitheringDitheringDithering• Use if your graphic contains
subtle shading or a wide variety of color variations
• Useful for simulating a wider range of hues than GIF’s 256 colors
• Blends transitions• Lessens or eliminates
banding
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 66© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 66
Dithering ProcedureDithering ProcedureDithering ProcedureDithering Procedure• Open a Photoshop image• Select Image>Mode>Indexed Color• Choose Web Palette• Choose Diffusion• Check Preserve Exact Colors• Click OK
• Demoducky.psd
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 77© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 77
InterlacingInterlacingInterlacingInterlacing• Non-interlaced graphics
– load top-to-bottom– “peek-a-boo” graphics– use for graphics under 10K in
size
• Interlaced GIFs are– saved line-by-line in several
passes– graphics are “unveiled” in like
manner– user can recognize graphic
earlier– use for graphics over 10K in size
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 88© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 88
Interlacing ProcedureInterlacing ProcedureInterlacing ProcedureInterlacing Procedure• Create or open a *.psd graphic• Repeat Image>Mode>Indexed Color• Select File>Save As• Select CompuServe GIF• View GIF Options Dialog Box• Select Row Order: Interlaced• Click OK and save with .gif extension
• Alternate File>Export>GIF89a Export
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 99© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 99
TransparencyTransparencyTransparencyTransparency• Making a color translucent or transparent so
that an underlying graphic is visible• All web graphics are rectilinear in shape• Photoshop graphic backgrounds are white,
background colored, or transparent• Use File>Export>GIF89a Export• Anti-aliasing & Halos
• Demo: ducky.psd
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1010© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1010
GIF AnimationGIF AnimationGIF AnimationGIF Animation• Photoshop alone is
not capable• ImageReady from
Adobe• GIF Movie Gear (PC)
• GifBuilder (MAC)
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1111© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1111
Exercise – Exercise – Making GIF FilesMaking GIF FilesExercise – Exercise – Making GIF FilesMaking GIF Files• First you’ll copy an existing Photoshop file• Then you’ll make a GIF file without dithering• Next you’ll make a GIF file with dithering• You’ll use Windows Explorer to compare the
file sizes• Finally, you’ll test the two GIFs using
Netscape Composer as a “Beginner’s WYSIWYG Editor”
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1212© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1212
Exercise – Page 1Exercise – Page 1Exercise – Page 1Exercise – Page 1Using Windows Explorer, create a new folder on the A:\ drive called ART4193Open Adobe Photoshop 5.5File>Open…
C:\Program Files\Adobe\Photoshop 5.5\Goodies\Samples\Waterskier.psdFile>Save A Copy…Save In: A:\ART4193Filename: Waterskier copy.psdNote here the number of layers in this Photoshop file: _______Prepare the image for the web by pulling down Image>Mode>Indexed Color…Answer OK to Flatten Layers?Choose Palette:Web Dither:None Check Preserve Exact Colors Check
PreviewFile>Save As…Save In: A:\ART4193Filename: Waterskier Not DitheredSave As: CompuServe GIF (*.GIF)Row Order: NormalFile>Open…
C:\Program Files\Adobe\Photoshop 5.5\Goodies\Samples\Waterskier.psdPrepare the image for the web by pulling down Image>Mode>Indexed Color…
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1313© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1313
Exercise – Page 2Exercise – Page 2Exercise – Page 2Exercise – Page 2Answer OK to Flatten Layers?Choose Palette:Web Dither:Diffusion Amount:100%
Check Preserve Exact Colors Check PreviewFile>Save As…Save In: A:\ART4193Filename: Waterskier DitheredSave As: CompuServe GIF (*.GIF)Row Order: InterlacedUse Windows Explorer to compare file sizes in A:\ART4193 and note here:Waterskier copy.psd ___________Waterskier Not Dithered.gif ___________Waterskier Dithered.gif ___________Start Netscape Composer Insert>ImageChoose File… A:\ART4193\Waterskier Not Dithered.gifClick Open, then OKRepeat previous to load A:\ART4193\Waterskier Dithered.gifFile>SaveAs… A:\ART4193\Dithering Comparison.htmlClick Preview to compare image quality in Netscape Navigator
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1414© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1414
JPEG JPEG - Joint Photographic Experts Group- Joint Photographic Experts GroupJPEG JPEG - Joint Photographic Experts Group- Joint Photographic Experts Group
• Good for continuous-tone images (photos)
• Compression– saves a complete black &
white version– saves most of its color
information– a “lossy” format– a fuzzy or noisy patchwork
of pixels
• Breaks the image into zones of similar color
• GIF is better for line art or large blocks of color
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1515© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1515
The Photoshop JPEG EncoderThe Photoshop JPEG EncoderThe Photoshop JPEG EncoderThe Photoshop JPEG Encoder• Open a document in RGB mode• Select File>Save A Copy• Select JPEG format• Type filename.jpg• Click Save• Select Format Options
– Baseline (“Standard”) recognized by most browsers– Baseline Optimized for better color, smaller file size but not
supported by all browsers– Progressive (similar to Interlaced GIF) not always supported
• Click OK
Demo: flowers.psd
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1616© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1616
New PlayersNew PlayersNew PlayersNew Players• PNG – Portable Network Graphics
– A “lossless” format like GIF– Claims to compress better than GIF– Supports 24-bit color– Supports variable transparency
• SVG – Scalable Vector Graphics– Compact and scalable vector format– New standard from W3C– Supported in Adobe Illustrator 9.0
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1717© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1717
Carl’s Rules of Web File NamesCarl’s Rules of Web File NamesCarl’s Rules of Web File NamesCarl’s Rules of Web File Names• Always, always protect the “canon”
– banner01.psd
• Use all lowercase letters• Use mnemonic names• Use the old DOS rules
– 12345678.123– banner01.gif
• Use no spaces…use underscores instead– my_dog.jpg
© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1818© 2000 – All Rights Reserved – Page © 2000 – All Rights Reserved – Page 1818
Graphic File FormatsGraphic File FormatsGraphic File FormatsGraphic File Formats
Recommended