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

© 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


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)


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


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


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


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


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


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


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


GIF AnimationGIF AnimationGIF AnimationGIF Animation• Photoshop alone is

not capable• ImageReady from

Adobe• GIF Movie Gear (PC)

• GifBuilder (MAC)


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”


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…


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


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


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


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


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


Graphic File FormatsGraphic File FormatsGraphic File FormatsGraphic File Formats

Documents

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