Graphic Design for the Web
By Rob Foster
All materials Copyright © 1997-2002 Developer Shed, Inc. except where otherwise noted.
Graphic Design for the Web
Table of Contents
Introduction.........................................................................................................................................................1
Web Colors, GIFs and More..............................................................................................................................2
What about JPEG's?..........................................................................................................................................4
RGB and HEX.....................................................................................................................................................6
i
Introduction
All right, let's just say for a minute that we're all HTML experts and we're sitting in our office waiting for a
client. Ten minutes pass and Raul walks in.
Raul is the owner, proprietor and CEO of Raul's Creative Candids, in Southern California. Raul's Creative
Candids is a photo studio specializing in the manipulation and augmentation of professional portraits.
Raul has a vision. His vision consists of showing the whole population of Southern California (and beyond)
the remarkable advantage that his technology offers to those desiring specialized portraits. Of course, being
the smart businessman and overall animal that Raul is he has come to the right place.
Humor aside, we're going to use Raul as an example for creating basic web graphic for a business web site.
Keep in mind, we're not teaching visual layout and design, just how to create graphics for the web.
In this first section we'll be covering the differences between different graphic formats, color palettes, web
page implementation, and more.
So, let's get started...
Introduction 1
Web Colors, GIFs and More
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.
Web Colors, GIFs and More 2
Graphic Design for the Web
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. As a side note, there is a nifty plug-in for Photoshop called
PhotoGIF by Box Top Software. It really is a lifesaver and worth the money to buy. It makes higher quality
and smaller sized GIFs from images in Photoshop. Currently, PhotoGIF is available for Macintosh and
Windows.
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.
Web Colors, GIFs and More 3
What about JPEG's?
The photo above is one that Raul wanted placed on his web site as an example of his work.
Here's what we did with it... It was originally a print that we scanned in to Photoshop and adjusted a little.
After getting the tones to match the photo correctly, we saved it out using the JPEG format. As we mentioned
above, JPEG's are good for photos. One thing to know about both GIF and JPEG formats is that they both use
compression algorithms to reduce file size. In the case of JPEG's, this compression, if not watched closely,
can really make a nice graphic look bad. To illustrate, we've included various versions of the same photo with
various degrees of compression and file sizes...
In the first photo to the right, no compression was used and the quality is the highest. It looks great, but the
size is high: almost 50k! This is unacceptable for the web since a whole page should usually never go over
about 32k with all the text and graphics. The next example uses a 9:1 compression (about 20%) and although
it still looks great, it has dropped to around 15k! This is the ideal size and quality and is used in the image
above. The next two images use a 13:1 compression and a 17:1 compression respectively. Their sizes are also
10k and 5k respectively. Unfortunately, though they have small file sizes, the last two won't work for this
image. Their compression has made them unusable visually.
No Compression
9:1 Compression
What about JPEG's? 4
Graphic Design for the Web
13:1 Compression
17:1 Compression
While on the subject of file sizes, I might add that the GIF logo above is only 8k and looks just like the
original. The reason for this is because the GIF format is able to compress well. GIFs are best used with solid
color images like text and logos Now you can see why GIF is preferred. So, you might be asking, "Why can't I
use the GIF format for photos?" Well, you can, you just have to be selective. GIF format only allows for 256
colors to be left in an image after indexing. This means that you can get away with it for photos that are black
and white or have a few colors in them. Also, in this case, when indexing the colors, you don't want to index
the colors to the web palette, rather to an adaptive palette, meaning that Photoshop will make a 256 color
palette out of the colors in the photo.
Overall, when it comes to finding which format will work best for a given file, it's best to get your hands dirty
and do some experimentation.
A tip for Macintosh users: if you use Macintosh to create your graphics, you should keep something in mind...
Graphics will always look a little darker in Windows than on the Mac. Make sure and preview all your work
in both Mac and Windows and both Netscape and Internet Explorer before finishing something.
What about JPEG's? 5
RGB and HEX
Hex is derived from the Greek word "hexa," meaning six (6). Decimal means 10. So, hexadecimal is a word
meaning "sixteen" (16).
In the hexadecimal system, 6 letters are added to the standard 0-9 Arabic Numerals, to give you a numbering
system with base 16, instead of base ten.
Decimal: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal: 0 1 2 3 4 5 6 7 8 9 A B C D E F
How does Hex pertain to HTML and color?
A hexadecimal color code is a series of six characters, for instance 0FCB3E or 954AD2, which identify a
specific color. These codes are used throughout HTML pages to identify what color each element should be.
For instance, they can be used to make certain words red, green, blue, or any other color that is desired.
However, to use these codes within HTML, you must know two things:
" Hexadecimal numbers
" The RGB color model
Using Hex to display color
All colors are mixtures of the three primary colors: red, green, and blue. A hexadecimal color code uses a six
digit number. The first two digits are the value for red, the next two for green, and the last two for blue. This
is called the RGB (Red, Green, Blue) color model.
Example:
Hex Code "808080" = Red 80, Green 80, Blue 80
80 80 80 = 808080
Red Green Blue = Gray
This is a mixture of equal amounts of the three colors. The result is a medium gray.
Each value uses two hexadecimal digits, giving you 256 possibilities for each color. Since there are three
colors, the total number of possible colors is 256 X 256 X 256 = over 16 million.
Creating Colors
Black -If all values are set to 0, the screen will be black.
White -If they are set to the maximum (hex FF, decimal 255), the screen will be white.
Primary Colors -To produce pure colors, leave two colors at 0, and set a value for the third color
(the desired color).
Mixing Colors -Set values for two or three of the colors to obtain colors that are a mixture of the
primary colors.
RGB and HEX 6
Graphic Design for the Web
Warning: Mixing colors in HTML is directly opposite from mixing colors with paint. Low amounts of
color make dark shade; high amounts of color make bright shades. With HTML, you are mixing light,
not paint.
From: Hexadecimal Color Tutorial, by Los Trancos Systems, LLC - Used by Permission
Browser-Safe Colors?
Macintosh and the PC platforms have system palettes with 256 different colors. However, there are 40 colors
that differ on both platforms. This means that 216 colors are the same in both platforms. It is a helpful hint to
use these 216 colors in your web design, so that your pages and graphics will look the same on both
platforms. Graphics that are viewed with 256 color depth shall appear the same as anybody with a higher
color depth.
The following is a complete list of the 216 different "Browser-Safe" colors organized by Value. Included is
the Hex code, and RGB values.
FFFFFF FFFFCC FFFF99 CCFFFF FFFF66 CCFFCC FFFF33 CCFF99
R=255 R=255 R=255 R=204 R=255 R=204 R=255 R=204
G=255 G=255 G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=255 B=102 B=204 B=051 B=153
FFFF00 FFCCFF 99FFFF CCFF00 FFCCCC 99FFCC FFFF33 FFCC99
R=255 R=255 R=153 R=204 R=255 R=153 R=204 R=255
G=255 G=205 G=255 G=255 G=204 G=255 G=255 G=204
B=000 B=255 B=255 B=102 B=204 B=204 B=051 B=153
99FF99 CCFF00 CCFFFF 66FFFF FFCC66 99FF66 CCCCCC 66FFCC
R=153 R=204 R=204 R=102 R=255 R=153 R=204 R=102
G=255 G=255 G=204 G=255 G=204 G=255 G=204 G=255
B=153 B=000 B=255 B=255 B=102 B=102 B=204 B=204
FFCC33 99FF33 CCCC99 66FF99 FFCC00 99FF00 FFCC33 99CCFF
R=255 R=153 R=204 R=102 R=255 R=153 R=255 R=153
G=204 G=255 G=204 G=255 G=204 G=255 G=204 G=204
B=051 B=051 B=153 B=153 B=000 B=000 B=051 B=255
33FFFF CCCC66 66FF66 FF99CC 99CCCC 33FFCC CCCC33 66FF33
R=051 R=204 R=102 R=255 R=153 R=051 R=204 R=102
G=255 G=204 G=255 G=153 G=204 G=255 G=204 G=255
B=255 B=102 B=102 B=204 B=204 B=204 B=051 B=051
FF9999 99CC99 33FF99 CCCC00 66FF00 CC99FF 66CCFF 00FFFF
R=255 R=153 R=051 R=204 R=102 R=204 R=102 R=000
G=153 G=204 G=255 G=204 G=255 G=153 G=204 G=255
B=153 B=153 B=153 B=000 B=000 B=255 B=255 B=255
FF9966 99CC66 33FF66 CC99CC 66CCCC 00FFCC FF9933 99CC33
R=255 R=153 R=051 R=204 R=102 R=000 R=255 R=153
G=153 G=204 G=255 G=153 G=204 G=255 G=153 G=204
B=102 B=102 B=102 B=204 B=204 B=204 B=051 B=051
33FF33 CC9999 66CC99 00FF99 FF9900 99CC00 33FF00 FF66FF
R=051 R=204 R=102 R=000 R=255 R=153 R=051 R=255
G=255 G=153 G=204 G=255 G=153 G=204 G=255 G=102
B=051 B=153 B=153 B=153 B=000 B=000 B=000 B=255
9999FF 33CCFF CC9966 66CC66 00FF66 FF66CC 9999CC 33CCCC
R=153 R=051 R=204 R=102 R=000 R=255 R=153 R=051
G=153 G=204 G=153 G=204 G=255 G=102 G=153 G=204
B=255 B=255 B=102 B=102 B=102 B=204 B=204 B=204
CC9933 66CC33 00FF33 FF6699 999999 33CC99 CC9900 66CC00
R=204 R=102 R=000 R=255 R=153 R=051 R=204 R=102
G=153 G=204 G=255 G=102 G=153 G=204 G=153 G=204
B=051 B=051 B=051 B=153 B=153 B=153 B=000 B=000
RGB and HEX 7
Graphic Design for the Web
00FF00 CC66FF 6699FF 00CCFF FF6666 999966 33CC66 CC66CC
R=000 R=204 R=102 R=000 R=255 R=153 R=051 R=204
G=255 G=102 G=153 G=204 G=102 G=153 G=204 G=102
B=000 B=255 B=255 B=255 B=102 B=102 B=102 B=204
6699CC 00CCCC FF6633 999933 33CC33 CC6699 669999 00CC99
R=102 R=000 R=255 R=153 R=051 R=204 R=102 R=000
G=153 G=204 G=102 G=153 G=204 G=102 G=153 G=204
B=204 B=204 B=051 B=051 B=051 B=153 B=153 B=153
FF6600 999900 33CC00 FF33FF 9966FF 339966 CC6666 669966
R=255 R=153 R=051 R=255 R=153 R=051 R=204 R=102
G=102 G=153 G=204 G=051 G=102 G=153 G=102 G=153
B=000 B=000 B=000 B=255 B=255 B=255 B=102 B=102
00CC66 FF33CC 9966CC 3399CC CC6633 669933 00CC33 FF3399
R=000 R=255 R=153 R=051 R=204 R=102 R=000 R=255
G=204 G=051 G=102 G=153 G=102 G=153 G=204 G=051
B=102 B=204 B=204 B=204 B=051 B=051 B=051 B=153
996699 339999 CC6600 669900 00CC00 CC33FF 66FFFF 0099FF
R=153 R=051 R=204 R=102 R=000 R=204 R=102 R=000
G=102 G=153 G=102 G=153 G=204 G=051 G=255 G=153
B=153 B=153 B=000 B=000 B=000 B=255 B=255 B=255
FF3366 996666 339966 CC33CC 6666CC 0099CC FF3333 996633
R=255 R=153 R=051 R=204 R=102 R=000 R=255 R=153
G=051 G=102 G=153 G=051 G=102 G=153 G=051 G=102
B=102 B=102 B=102 B=204 B=204 B=204 B=051 B=051
339933 CC3399 666699 009999 FF3300 996600 339900 FF00FF
R=051 R=204 R=102 R=000 R=255 R=153 R=051 R=255
G=153 G=051 G=102 G=153 G=051 G=102 G=153 G=000
B=051 B=153 B=153 B=153 B=000 B=000 B=000 B=255
9933FF 3366FF CC3366 666666 009966 FF00CC 9933CC 3366CC
R=153 R=051 R=204 R=102 R=000 R=255 R=153 R=051
G=051 G=102 G=051 G=102 G=153 G=000 G=051 G=102
B=255 B=255 B=102 B=102 B=102 B=204 B=204 B=204
CC3333 663333 009933 FF0099 993399 336699 CC3300 666600
R=204 R=102 R=000 R=255 R=153 R=051 R=204 R=102
G=051 G=051 G=153 G=153 G=051 G=102 G=051 G=102
B=051 B=051 B=051 B=051 B=153 B=153 B=000 B=000
009900 CC00FF 6633FF 0066FF FF0066 993366 336666 CC00CC
R=000 R=204 R=102 R=000 R=255 R=153 R=051 R=204
G=153 G=000 G=051 G=102 G=000 G=051 G=102 G=000
B=000 B=255 B=255 B=255 B=102 B=102 B=102 B=204
663366 0066CC FF0033 993333 336633 CC0099 663399 006699
R=102 R=000 R=255 R=153 R=051 R=204 R=102 R=000
G=051 G=102 G=000 G=051 G=102 G=000 G=051 G=102
B=102 B=204 B=051 B=051 B=051 B=153 B=153 B=153
FF0000 993300 336600 9900FF 3333FF CC0066 663366 006666
R=255 R=153 R=051 R=153 R=051 R=204 R=102 R=000
G=000 G=051 G=102 G=000 G=051 G=000 G=051 G=102
B=000 B=000 B=000 B=255 B=255 B=102 B=102 B=102
9900CC 3333CC CC0033 663333 006633 990099 333399 CC0000
R=153 R=051 R=204 R=102 R=000 R=153 R=051 R=204
G=000 G=051 G=000 G=051 G=102 G=000 G=051 G=000
B=204 B=204 B=051 B=051 B=051 B=153 B=153 B=000
663300 006600 6600FF 0033FF 990066 333366 6600CC 0033CC
R=102 R=000 R=102 R=000 R=153 R=051 R=102 R=000
G=051 G=102 G=000 G=051 G=000 G=051 G=000 G=051
B=000 B=000 B=255 B=255 B=102 B=102 B=204 B=204
990033 333333 660099 003399 990000 333300 3300FF 660066
R=153 R=051 R=102 R=000 R=153 R=051 R=051 R=102
G=000 G=051 G=000 G=051 G=000 G=051 G=000 G=000
B=051 B=051 B=153 B=153 B=000 B=000 B=255 B=102
003366 3300CC 660033 003333 330099 660000 003300 0000FF
R=000 R=051 R=102 R=000 R=051 R=102 R=000 R=000
G=051 G=000 G=000 G=051 G=000 G=000 G=051 G=000
RGB and HEX 8
Graphic Design for the Web
B=102 B=204 B=051 B=051 B=153 B=000 B=000 B=255
330066 0000CC 330033 000099 330000 000066 000033 000000
R=051 R=000 R=051 R=000 R=051 R=000 R=000 R=000
G=000 G=000 G=000 G=000 G=000 G=000 G=000 G=000
B=102 B=204 B=051 B=102 B=000 B=102 B=051 B=000
RGB and HEX 9