Graphic File Formats

1. Graphic File Formats

2. Common Formats • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG) • Scalable Vector Graphics (SVG) • Print Formats • EPSEncapsulated PostScript (for vector images) • TIFFTagged Interface File Format (for raster images)

3. de 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

4. GIF - Graphics 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

5. Dithering • 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

6. Dithering Procedure • Open a Photoshop image • Select Image>Mode>Indexed Color • Choose Web Palette • Choose Diffusion • Check Preserve Exact Colors • Click OK • Demo ducky.psd

7. Interlacing • 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

8. Interlacing 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 • AlternateFile>Export>GIF89a Export

9. Transparency • 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

10. GIF Animation • Photoshop alone is not capable • ImageReady from Adobe • GIF Movie Gear (PC) • GifBuilder (MAC)

11. Exercise – Making 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”

12. Using Windows Explorer, create a new folder on the A:\ drive called ART4193 Open Adobe Photoshop 5.5 File>Open…C:\Program Files\Adobe\Photoshop 5.5\Goodies\Samples\Waterskier.psd File>Save A Copy… Save In: A:\ART4193 Filename: Waterskier copy.psd Note 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 Preview File>Save As… Save In: A:\ART4193 Filename: Waterskier Not Dithered Save As: CompuServe GIF (*.GIF) Row Order: Normal File>Open…C:\Program Files\Adobe\Photoshop 5.5\Goodies\Samples\Waterskier.psd Prepare the image for the web by pulling down Image>Mode>Indexed Color… Exercise – Page 1

13. Exercise – Page 2 Answer OK to Flatten Layers? Choose Palette:Web Dither:Diffusion Amount:100% Check Preserve Exact Colors Check Preview File>Save As… Save In: A:\ART4193 Filename: Waterskier Dithered Save As: CompuServe GIF (*.GIF) Row Order: Interlaced Use 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>Image Choose File… A:\ART4193\Waterskier Not Dithered.gif Click Open, then OK Repeat previous to load A:\ART4193\Waterskier Dithered.gif File>SaveAs… A:\ART4193\Dithering Comparison.html Click Preview to compare image quality in Netscape Navigator

14. JPEG - 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

15. The 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

16. New 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

17. Carl’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

18. Graphic File Formats