Chapter 3 "Creating Cool Graphics for the Web," discusses sources where you can acquire graphics for your Web pages. You may want to go back and review the section "Copyrights and Fair Use" in Chapter 3before continuing with this chapter.
Copyrights and their issues are important because unless you're an illustrator, an animator, a photographer, a videographer, and a sound technician, you will be using other people's work. You want to make sure you don't misuse the creative property of others.
You'll need to know how to convert graphic files for use on the Web because no one in his right mind creates graphics in Graphical Interchange Format (GIF) on purpose. You'll be concentrating on GIF format graphics for the near future whether you like it or not. Some of the inherent graphic limitations of the Web and its browsers have been addressed by the availability of plug-ins and helper applications. Unfortunately, the vast majority of Web users will not have access to these utilities or because of hardware, software, or network limitations, they couldn't make use of them anyway.
The most important thing to remember about raster graphic files is that they are resolution dependent. Additionally, raster files are bit-depth dependent. These two factors determine most of what you do when you convert a file in one format into another. Here's how these two factors work.
Assume that you scan a photograph at 72 dpi. It is commonly said that this photograph was sampled at 72 dpi. By scanning, its continuous information was broken into 72 samples per inch, and in doing so, some of the richness of the original photograph was lost. If the scan is resampled down to 50 dpi, even more visual information is removed. The second sample was based on the first sample-sort of like a photocopy of a photocopy, and you know what happens when you do that! The result is that only 50 samples per inch can describe the same information that was originally described in 72 samples per inch. Information was lost twice.
You might think that by sampling up, you would correct this problem. Well, get ready for the facts of life (or the facts of raster, if you prefer). You can't increase the amount of information in the sample just by increasing the dots per inch. You just end up with more pixels describing the same data.
Figure 20.1 shows a section of a scan made at 72 samples per inch (72 dpi), and the same section resampled at 50 dpi. The decrease in detail is due to having fewer pixels to describe the data. The third panel shows the 50 dpi data resampled up at 300 dpi. By increasing the resolution to 300 dpi, you have essentially increased the size of the bitmap by a factor of six. If you were to scale the 300 dpi manually back to 2.94¥4.1 inches, you'd have the same image as you had at 50 dpi, just with more pixels. Why? Because the third panel describes the same data as did the second, essentially dividing each 50 dpi pixel into quarters. The bitmap was physically larger because 300 dpi was mapped to fit 72 dpi monitor resolution.
Figure 20.1 : The effect of sampling a graphic down and
then back up.
Note |
When a raster is sampled down, data (detail and tonality) is lost. When a raster is sampled up, the same visual information is described with more pixels. You don't get more visual data. |
The second component of raster graphics is bit depth, the amount of information stored at each pixel. Not surprisingly, bit depth behaves much like resolution because of the raster file's resolution dependence.
Figure 20.2 shows three panels of another scan. In this case, all three are at 72 dpi-Web resolution. The first panel is 24-bit RGB color. This panel is capable of displaying 16.7 million colors. (There's not that many in this panel, just the number the scanner detected.) The second panel shows the same image reduced to 8-bit indexed color. In this form, the panel can only display a maximum of 256 colors. If the scan had more colors, some are lost. There has been an obvious reduction in visual data between our two panels. The third panel has been returned to 24-bit, RGB color.
Figure 20.2 : The effect of reducing and then increasing bit depth.
Why has there been no change?
The third panel now has the capability of displaying 16.7 million
colors; however, in its change to 8 bits, it now just has 256
colors rattling around in the bottom of a big 16.7 million color
bucket. When color depth is gone, it's gone!
Note |
When a raster file has its bit depth reduced, data (colors and tonality) is lost. Increasing bit depth does nothing for the existing sample but gives the file the potential for holding a greater number of colors. |
The reason this is important for Web graphics is that almost all
graphics you repurpose for the Web will arrive at a higher sample
(typically 150-300 dpi) and higher bit depth (typically 32,000,
64,000, or 16.7 million colors) than you'll need for your pages.
The graphics you actually display on the page will be a 72 dpi,
8-bit 256 color dithered raster (bitmap). You'll normally sample
down and reduce bit depth.
Tip |
Always keep a copy of your graphic in as rich a condition as possible, using Targa (TGA) or TIFF formats. For scans, this usually means 300 dpi in RGB color. For original raster illustrations, 150 dpi and RGB color produce manageable files. |
If the world used one computer, there wouldn't be any reason to write this section. But the reality is that if you're making Web pages, you're going to have to deal with multiple computer platforms.
The three major players are Macintosh, Windows, and UNIX. Each
handles graphic data in slightly different ways. Macintosh files
have two components, or forks-the data
fork, where the bitmap data usually resides, and the
resource fork,
where program and Macintosh-specific information resides. Web
graphics generally use only the data fork portion of Macintosh
files.
Tip |
The three platforms handle filenames differently also. Windows 3.x limits filenames to eight characters in a limited character set. Windows 95 and NT allow greater flexibility. UNIX filenames are case sensitive. Macintosh filenames don't require file type extensions (the .XXX at the end of the filename) and can include more characters and characters that would be invalid with other operating systems. You get around this by using simple, lowercase filenames with consistent extensions. |
To the rescue come intermediate file formats. These are formats that no self-respecting application program would naturally save its data in-TIFF, JPEG, and GIF. But first, let's back up a bit. When you create a graphic in an application program, you create data. When you save, you save in native format, a combination of the data and program-specific information needed to operate on the data in that program (information like paths, layers, menu positions, and palettes). Examples of native formats include Photoshop's PSD, CorelDRAW!'s CDR, FreeHand's FH5, and Illustrator's AI. To get a bitmap from program A on platform X into program B on platform Y, you need the data, not the program information.
On the UNIX side, you have little control over the format some obscure raster file arrived in. Your best bet is to try to push the file into a TIFF or JPEG format before it leaves the UNIX environment.
Rather than attack cross-platform difficulties from a hardware perspective, take a software approach. Choose software available on all three platforms, or at least on both Macintosh and Windows. If this isn't possible, choose a software tool with the most extensive list of input and output filters. Canvas for the Mac and CorelDRAW! for Windows can read and write almost all raster and vector files. Say you're stuck with a raster product because your boss thought it was great, but it only reads and writes two types of raster files? Arm yourself with the most powerful conversion utilities available-DeBabilizer and Hijaak Pro. Finally, you'll need the capability to read and write disks from the various platforms. Virtually all modern Macs read and write DOS disks. Products such as MacinDOS provide this functionality in Windows. If you have a UNIX machine, you may not have a disk drive at all.
The GIF developed by CompuServe has become the mainstay of Web graphics. Although it's limited to 8 bits of pixel information and 256 colors, it's ideally suited for video display of digital graphics. As part of the format's design, the data receives automatic Lempel-ZivWelch (LZW) lossless compression that substitutes tokens for redundant data. This produces an efficient graphic file.
GIF is considered platform independent. In the case of Mac files, only the data fork is used because GIF carries only raster graphic data. It carries no program-specific information, making it ideal for cross-platform and cross-browser applications.
The best route to GIF is from other richer raster formats such as TIFF, PCX, or BMP. It's impossible to determine the depth of graphic data actually used to describe an image by only looking at the file's extension. For example, a TIFF file may contain only black-and-white bitmap data while maintaining the potential for adding 24-bit color. The Mode option (in Photoshop) controls the bit depth of pixels currently in the file. The file format controls the potential bit depth if you change the mode.
Assume that you have a graphic file and you want to include it on your Web page (see Figure 20.3). You would
Figure 20.3 : Converting a graphic to GIF format.
The JPEG file format represents an industry wide attempt to make large 24-bit raster graphics files more manageable. Think of JPEG as TIFF with a twist. The twist is that JPEG includes internal lossy compression and is optimized for the raster output of the data. TIFF is optimized for printing raster data with PostScript devices.
With JPEG, you select the level of compression whose loss of image quality you can stand. The trade-off is that the smaller file must decompress, and in doing so, load more slowly than a similar uncompressed file.
A JPEG raster file contains more data than can be displayed on a typical computer monitor. Is there an advantage to using a JPEG graphic over its lightweight GIF sibling? Not for the vast majority of applications.
To save a file in JPEG format, follow these instructions:
Figure 20.4 : Converting a graphic to JPEG format.
Vector graphics are supported neither by the latest release of Hypertext Markup Language (HTML) nor by current browsers. A number of resources are available for viewing vector graphics by means of plug-ins and helper applications. Check out the following sites for vector graphic resources:
The reason vector graphics is generally unsupported is because of the very nature of raster display technology. It's relatively easy to map one set of pixels (like a GIF raster file) to another bitmap (like your 640¥480 display). It's entirely something else to rasterize lines, arcs, curves, and polygons on-the-fly-especially given the diversity of vector file formats. But good news is on the way! There's lots of action on this front, especially with Adobe's PDF (Portable Document Format).
The most consistent vector file you'll run into is Encapsulated PostScript (EPS) format. Its implementation on the Macintosh platform is somewhat cleaner than on Windows. Still, you'll achieve credible results going from EPS to raster.
There are several questions that need to be answered concerning this rasterization process:
The comments here are based on using Photoshop. The best results are achieved by rasterizing Adobe Illustrator (AI) files. This method allows you to specify color mode (bit depth) and resolution. Directly rasterizing EPS files automatically puts you in indexed color mode at 72 dpi. Rasterizing EPS line drawings puts you in bitmap mode at 72 dpi. If you're using FreeHand, Canvas, or CorelDRAW!, export your graphic in Adobe Illustrator 5 format. To turn an EPS graphic into a GIF graphic for use on your Web page, you would do the following:
Figure 20.5 : Export the EPS file in illustrator 5.x format from a PostScript drawing program.
Figure 20.6 : Open the illustrator file in Photoshop and specify color mode and resolution.
Figure 20.7 : Edit the raster file in 24-bit color.
Figure 20.8 : Change to indexed color and save in GIF format.
A font isn't really a graphic (in the sense that a picture is a graphic that you can put on a Web page) unless it's an outline font. Then, it can be converted from the outline to a raster graphic you can edit in a program such as Photoshop. TrueType and PostScript are two examples of outline font technology. Because current implementations of HTML preclude embedding font outline information directly in the file, the best way to get good-looking fonts onto your Web pages is to bring the text in as a graphic using the <IMG SRC> structure.
To bring in a text design onto your Web page, follow these steps:
Figure 20.9 : A TrueType font and its converted outline.
Now that you have been shown strategies for converting graphics for use on Web pages, look at these entries:
When I go to save my graphic in GIF format, the GIF option is grayed out and not available. Am I doing something wrong? | |
Not at all. Your file contains data that GIF can't handle. Check to see that the color palette has been reduced to 8-bit, 256 color. | |
I saved all my page graphics in GIF format, but now when I want to edit them, all my layers are gone. How can I get them back? | |
(Sound of "Taps" being played in the background.) You've been introduced to the hard facts of life. Layer information is program specific, not something GIF is remotely interested in. My suggestion is to change to RGB mode and carefully select and move your graphics to appropriate layers. This isn't much fun, but you will end up (after much editing) with a file that's functionally separated onto layers. Quick! Save this file in native format. | |
A GIF graphic I'm working on only let's me work in a few shades of blue. When I look at the palette, it has only about 10 colors and they're all blue. | |
This file was saved with less than 8 bits of color, using what is called an adaptive color palette. First, change the mode to RGB color. Then, in your color window, choose "reset default color swatches" or something similar. | |
I inherited a bunch of graphics once used for presentations, but they're in a format Photoshop won't recognize. What can I do to make them useful on Web pages? | |
Do you have access to the program (PowerPoint, Persuasion, Astound?) that used these graphics? If so, see if you can save the slides as PICT on the Mac or WMF or BMP on a Windows computer. If you can't, but can display the slides, try screen capturing the graphics. You'll be stuck with 8 bit, 72 dpi images, but we've done this several times with good luck. | |
When I go to convert a font to an outline in FreeHand, I get a message saying that it can't find the font's outline. What gives? | |
To be converted to outlines, you must have the font outline description in the correct Windows or Macintosh directory. You must also have chosen a font for which an outline exists. This is easier with Windows because of its reliance on TrueType fonts for system operation. Just make sure that TrueType fonts are enabled in your Windows Control Panel/Fonts dialog window. On the Mac, stay away from fonts with city names (Chicago, New York) unless you know they have TrueType or PostScript Type I counterparts. |