Graphic Design for the Web - Web Colors, GIFs and More (Page 2 of 4 )
This is Raul's logo.
Now let's explain how we got it this way. Raul brought this logo in on a disk. It is an illustration that was created in a vector-based graphics program (Adobe Illustrator, Macromedia Freehand, etc.). We opened the file directly into Adobe Photoshop 4.0 and began our color adjustments. Adobe Photoshop is the standard for creating web graphics and because of this it will be the main program that we use and discuss.
Adobe Photoshop as well as other graphic editing programs allow the importation and use of custom color swatches. This is very important when creating web graphics because on the web there is a special swatch consisting of 216 colors (see graphic to the right). These 216 colors are made up from the common colors between the Windows and Macintosh system palettes/swatches. Using these 216 colors is essential to good web design.
To load this web swatch into Photoshop, click
here and save the file to your computer desktop. Launch Photoshop and go to the Photoshop palette called "Swatches". In the palette menu there is an option called "Load Swatches". Select that option and then look for the swatch file that you just downloaded off this site.
You might be asking, "How does this swatch help me?". Well, if a graphic is created using the colors from the web swatch, then you will know how it will look for just about everybody on the web, regardless of browser or platform. One more point: when mentioning browsers, we are talking mainly about Netscape and Internet Explorer. Since these two are used by the majority of people on the web, they are the only ones that we need to worry about.
We then took Raul's logo and adjusted the colors in Photoshop to match the colors in the swatch we loaded. Then, to save it out, we went to the Image: Mode menu and converted the image to indexed color. In the Indexed Color dialog box, there is a place to select a palette and we chose Web as our palette and Dither: none. This makes our image a graphic consisting of only web friendly colors. We then exported the file out using Photoshop's GIF89 export feature.
Regarding GIFs and the Internet, there are two main graphics formats that are supported: GIF and JPEG. We decided to use GIF format for the logo for a few reasons. First of all, GIFs are usually smaller in size and allow for more features (such as transparency). We try to use them as much as possible to make our pages load faster. Also, Raul's logo is an image with a lot of solid, flat color and no gradients. GIFs work better for solid colors and simple graphics. JPEG's are better for photos and graphics with a lot of gradients, etc.
Next: What about JPEG's? >>
More Graphic Design Articles
More By Rob Foster
