SYBEX Sample Chapter Effective Web Design: Second Edition Ann Navaro Chapter 17: Creating Professional Graphics Copyright © 2001 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501. World rights reserved. No part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic or other record, without the prior agreement and written permission of the publisher. ISBN: 0-7821-2849-1 SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the USA and other countries. TRADEMARKS: Sybex has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. Copyrights and trademarks of all products and services listed or described herein are property of their respective owners and companies. All rules and laws pertaining to said copyrights and trademarks are inferred. This document may contain images, text, trademarks, logos, and/or other material owned by third parties. All rights reserved. Such material may not be copied, distributed, transmitted, or stored without the express, prior, written consent of the owner. The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible. Portions of the manuscript may be based upon pre-release versions supplied by software manufacturers. The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book. 2849c17.qxd 3/19/01 3:46 PM Page 361 Creating Professional Graphics Chapter 17 2849c17.qxd 3/19/01 3:46 PM Page 362 igital images, whether graphics or photographs, provide much of the appeal for the Web. They add color, excite- D ment, information, illustration, and fun to Web pages when they are done well. However it’s not enough to design attrac- tive images; you also need to produce technically good images that will load quickly and be consistent across computer platforms. Have you seen graphics that just don’t work for one reason or another? Huge images as the first element on a page, photos with “off” colors, strangely dithered or spotted graphics, or palette shift- ing? A number of common problems can occur with Web images. In this chapter, I will provide you with the information you need to create professional graphics for your Web site—graphics that will load quickly, look good consistently across platforms, and enhance your site’s image. This chapter covers the following topics: • Digital-image basics • Creating professional GIFs and JPEGs • Tools of the trade • How those who can’t draw survive 2849c17.qxd 3/19/01 3:46 PM Page 363 DIGITAL-IMAGE BASICS 363 Digital-Image Basics Before diving into the details of producing Web images, I’ll take some time to explain some basics about digital images. Digital graphics come in two primary types: vector and raster. Raster Images Raster images are the type of images that Web designers are most familiar with. They include GIFs, JPEGs, and TIFs. Raster formats are always used for photographic or con- tinuous-tone images. By looking at a magnified raster image such as the one in Figure 17.1, you can see that a raster image is made up of individual colored pixels. Each of the individual little rectangles you can see in this image is a pixel. Enlarged A 300dpi TIF image Figure 17.1 A raster image Raster images are resolution dependent, meaning that they are not easily stretched or scaled to a larger size without losing image quality. As you can see in Figure 17.2, the rocket on the left is sharp and clean. This image was created for the Web as a top-of- page button. It was saved at 72ppi (pixels per inch). The image on the right is a scaled- up version of the original; it was resized by 200 percent in an image-editing program. 2849c17.qxd 3/19/01 3:46 PM Page 364 364 CHAPTER SEVENTEEN • CREATING PROFESSIONAL GRAPHICS The larger version is fuzzy and blurry looking, with some jaggy edges on the diagonal lines forming the top of the rocket. The loss of sharpness is what happens when you attempt to scale or enlarge raster images. The image is dependent on the resolution at which it was created. Original image Enlarged 200 percent Figure 17.2 A raster image scaled up 200 percent Raster images are often referred to as bitmap images, which isn’t always completely accurate. Technically, the term bitmap describes a black-and-white raster graphic. They do not contain any color data. Vector images Vector graphics files contain a series of mathematical instructions for drawing a picture in a particular language. Postscript is the most commonly used language for generating vector graphics. The most common vector-graphics file formats are EPS, AI, and CDR. Vector graphics are most commonly used for print-media images. Vector graphics are easily scaleable or stretchable and as a result are resolution independent. The scalability provides you with plenty of advantages—you can easily resize a vector image without loss of quality, whether you want to fit it on a business card or on a billboard. As you can see in Figure 17.3, the images on the left and the right are the same. The only difference between them is that the right-hand image is 200 percent larger than the left-hand image. The problems encountered in the resizing of the raster image are not obvious here; the jaggy edges are absent. Vector images work especially well for logos, branding graphics, symbols, and other images that you may need to resize for various uses. 2849c17.qxd 3/19/01 3:46 PM Page 365 DIGITAL-IMAGE BASICS 365 Figure 17.3 A vector image scaled up 200 percent Vector graphics seem like the ideal type of image to use; however, you cannot directly use one on a Web page. Vector graphics can, though, be converted to raster images using graphics-conversion software. Graphic File Formats Although two primary types of digital images exist, you will see seemingly endless fla- vors of digital images, technically known as file formats. The format of a graphic file refers to the specific method of storing the image data within the file on your disk. The format tells your software how to open the image and display it on your monitor. Web File Formats Two primary file formats are commonly in use for Web graphics: GIF (Graphical Inter- change Format) and JPEG (Joint Picture Experts Group). These two formats are sup- ported by most graphical Web browsers and are therefore the file formats of choice for most Web development. A recent introduction, PNG (Portable Network Graphic), may eventually replace GIF; however, it is just now slowly gaining support of most Web browsers. GIF GIF is the most common graphic file format used on the Web. GIF files are usually small in file size and are therefore quick to download and display in a Web browser. They may contain a maximum of 256 colors, or eight-bit color. GIF is the file format of 2849c17.qxd 3/19/01 3:46 PM Page 366 366 CHAPTER SEVENTEEN • CREATING PROFESSIONAL GRAPHICS choice for Web graphics containing line art, large areas of flat color such as logos or banners, small icons, and other nonphotographic images. In most cases, a GIF image is created from another raster file format such as TIF. The artist begins with an image created in a raster-image-editing program such as Photoshop and uses tools within the program to convert the image to a GIF file. When a file is converted to GIF, it is much smaller than the original and the file would then be displayable by Web browsers. (Later in this chapter, I will look at how to create quality GIF images using the Netscape palette.) If you expect that your audience will be primarily using computer equipment that can only display 256 colors, you may want to experiment with converting your continuous-tone images to GIF format using an adaptive palette as described later in this chapter. JPEG JPEG is the file format of choice for displaying photographs or continuous-tone images on the Web. JPEG files use a lossy method of compression for full-color RGB files, which are 24 bit or 16.7 million colors. If the viewer has a monitor capable of display- ing 24-bit color, JPEG images can capture the full color range of a continuous-tone image and display it in a graphical Web browser. Lossy compression means that in reducing file size, some image data is removed from the original file. The impact of the removal of data is governed by the choices made by the user of the graphic-conversion software. Most raster-image-editing pro- grams can convert an image to a JPEG file format. The artist begins with a 24-bit image and saves it to JPEG format after choosing image-quality levels. (Later in this chapter, I will address choosing image-quality levels appropriate to your image.) Once the file is converted to JPEG, the file size will be much smaller than the original image. Although JPEG files are usually smaller than GIF files, JPEG does not work very well for line art, logos, or other images that contain large areas of flat color.