1. © 2000 – All Rights Reserved – Page 1 Graphic File Formats Graphic File Formats

2. © 2000 – All Rights Reserved – Page 2 Common 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)

3. © 2000 – All Rights Reserved – Page 3 de facto Standards 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. © 2000 – All Rights Reserved – Page 4 GIF - Graphics Interchange Format 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. © 2000 – All Rights Reserved – Page 5 Dithering 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. © 2000 – All Rights Reserved – Page 6 Dithering Procedure Dithering Procedure Open a Photoshop image Select Image>Mode>Indexed Color Choose Web Palette ChooseDiffusion CheckPreserve Exact Colors Click OK Demoducky.psd

7. © 2000 – All Rights Reserved – Page 7 Interlacing 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. © 2000 – All Rights Reserved – Page 8 Interlacing Procedure Interlacing Procedure Create or open a *.psd graphic RepeatImage>Mode>Indexed Color SelectFile>Save As SelectCompuServe GIF ViewGIF Options Dialog Box SelectRow Order: Interlaced ClickOK and save with.gif extension Alternate File>Export>GIF89a Export

9. © 2000 – All Rights Reserved – Page 9 Transparency 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. © 2000 – All Rights Reserved – Page 10 GIF Animation GIF Animation Photoshop alone is not capable ImageReady from Adobe GIF Movie Gear (PC) GifBuilder (MAC)

11. © 2000 – All Rights Reserved – Page 11 Exercise – Making GIF Files 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. © 2000 – All Rights Reserved – Page 12 Exercise – Page 1 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…

13. © 2000 – All Rights Reserved – Page 13 Exercise – Page 2 Answer OK to Flatten Layers? Choose Palette:Web Dither:Diffusion Amount:100% Check Preserve Exact ColorsCheck 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 loadA:\ART4193\Waterskier Dithered.gif File>SaveAs…A:\ART4193\Dithering Comparison.html Click Preview to compare image quality in Netscape Navigator

14. © 2000 – All Rights Reserved – Page 14 JPEG - Joint Photographic Experts Group 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. © 2000 – All Rights Reserved – Page 15 The Photoshop JPEG Encoder The Photoshop JPEG Encoder Open a document in RGB mode SelectFile>Save A Copy SelectJPEG format Typefilename.jpg Click Save SelectFormat 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 ClickOK Demo: flowers.psd

16. © 2000 – All Rights Reserved – Page 16 New Players 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. © 2000 – All Rights Reserved – Page 17 Carl’s Rules of Web File Names 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. © 2000 – All Rights Reserved – Page 18 Graphic File Formats Graphic File Formats