Graphic Basics

Read Chapter Nine (The Non-Designer's Web Book)
Read Chapter Ten (The Non-Designer's Web Book)

Do all the projects.

Complete all the Quizzes.

Instructional Video: Full Screen  Ipod Version

There is color theory, color psychology, color models, color wheels, and color who-knows-what, but for this class, we will keep it simple: Follow your best judgement. It is looks good together and it contrasts well, go with it.

We will be using the term color palette in the discussions in this chapter. For the most part, a color palette is the set of colors that you will be using to do you pages. It is generally limited to two or three colors and, with the exception of photographs, these are the only colors you will use for backgrounds, type, and everything else on your page.

We will begin our discussion of color by talking about the major types of color.

CMYK color

You may not be aware of it, but almost all materials that are printed in color use only four colors of ink: cyan (C), magenta (M), yellow (Y), and black (K). It sounds funny, but by applying these colors on top of each other in varying degrees, you can get all of the colors in the spectrum. In printing, this is referred to as the four-color process because the printing process is done with four colors. (Duh.) This type of color is called reflective because the color that your eye sees is created by the reflection of ambient light around you. For example, if you see something in print that is red, it is because the ink combination on the page is absorbing all of the colors in the white light around you except red, which is reflected back to your eye.

This example shows a typical four-color printed piece and what it looks like when it is blow up. Notice that, when magnified, the picture is not solid colors, but dots of cyan, yellow, magenta, and black.

One other term you might see in relation to CMYK color is spot color. It is different from CMYK in that it is not color created by a combination of CMYK, but is instead is created by an ink that is that specific color. Spot color is used in two-color prints (usually black plus one color) or in print jobs that use CMYK but have a lot of one specific color. This is referred to as a five-color print, and the fifth color is the custom color, the one NOT created using CMYK.

RGB Color

RGB stands for Red Green Blue color. Everything based off of television technology, including computer monitors, create colors by blending red light, green light, and blue light. RGB color is called refractive color because it comes straight from a light source and does not reflect off any surface. It is very different from the reflective color we are used to. For example, to get yellow in RGB, you mix red and green.

All web images are displayed in RGB color, so all web images should be saved in your graphic software in RGB mode. You will be able to use color names for much of the definition of colors within the page itself (like white, blue, yellow, or peachpuff), but at times you will want a color that has not been named. You can do this by specifying the color intensities for each color. RGB intensities range from 0 (off) to 255 (on), or any number in between.

Bit Depth

Bit depth refers to the number of bits used to define the color in each pixels of the screen. Based on the number that defines the bit depth (or pixel depth or bit resolution), you can determine how many colors are available for the graphic. Maybe this is best shown with an example...

If I have a graphic with a bit depth of one, there are 2¹, or 2 colors available. If my graphic has a bit depth of 2, there are 2², or 4 colors available. A bit depth of 4 generates 2⁴, or 16 colors. A bit depth of 24 generates 2²⁴, or 16.7 million colors.

So, what are the trade-offs? Simple, the larger your bit depth, the more colors you have at your disposal and the prettier graphics you have on your page. The downside, of course, is that the files grow quickly and this causes download speeds to increase.

In the example graphics, notice the difference between the quality of the black and white on the left compared to the same graphic on the right. The only difference is the bit depth, allowing the image on the right to contain many more shades of grey, making the picture cleaner and more attractive. Same for the images of the dog at the bottom. It is hard to see in this scan, the shading on the dog on the right is much richer and more attractive than the dog on the left. (These are from your book. Take a look at the originals on page 163.)

Monitor and image resolution

Funny thing about monitors, they can never display anything at more than 72 or 96 pixels per inch. If you print something at that resolution, it looks pretty bad, but on the monitor, it is stupendous. In all honesty, it is the depth of color (bit depth) that makes the graphic look good on the monitor. The greater the bit depth, the better the appearance.

Don't waste your time creating web graphics at more than 72 pixels per inch, because that is the least common denominator across monitors. Graphics at higher resolutions just take up additional file space and download time. Go for 72 pixels per inch and enjoy the moment.

Want the best looking graphics from the web? Make sure that your monitor is set to the highest number of colors it can support.

Browser-safe colors

There is a grand total of 216 colors that are available to web designers. This is the intersection of the colors available on a monitor with a bit depth of 8 (2⁸ or 256) and the colors supported by the various browsers on the market. If you happen to select a color that is not part of the web-safe set, the browser will either change the color to something else that is close or it will try to simulate the color be combining pixels of two or more different colors. This is called dithering and the browser is relying on your eye and brain to do the color mixing.

Getting web-safe colors in your page is not as hard as you might think. You can specify any web-safe color you would like if you remember the simple rule for definition. Always specify your color intensities in increments of 20%. That is it.

Okay, so maybe it is a little more complicated than that.

Here is the secret: Within your HTML, whether you create it or Composer does, there is the option to set colors for text, backgrounds, borders, etc. To get colors that will work every time, use the values in the following table:

The numbers in the second column are actually the same as the numbers in the first column, they are just converted from base to (decimal) to base 16 (hexadecimal). Computers always work in powers of two, and 16 is actually 2⁴. To set a color, you use the pound sign followed by the two-character hexadecimal red intensity, then the green intensity, and finally the blue intensity. If you were to want to use a color that used 100% red (full intensity), 60% green, and no blue (zero intensity), the definition would be #ff9900. The ff means full intensity red, 99 means 60% green, and 00 means no blue.

Web Graphics

Before we can get too far into the whole web-graphic thing, we need to establish a few definitions.

Native file format

Files are said to be stored in their native format when they are saved in the default format used by the software that created them. For example, a .psd file is native format for Photoshop, .doc for Microsoft Word, .xls for Microsoft Excel, and so on. These formats often mean nothing to other processors. In simple terms, you cannot open a Photoshop .psd with Microsoft Word.

Pixel-based graphic

Also known as bitmaps, paint format, or raster images. Graphic packages that allow you to change the content of an image one pixel at a time are using pixel-based graphics. Photoshop, Paint, and Paint Shop Pro all fit into this category. These are the types of images that are used on the web. They can be reduced in size very easily but lose quality quickly if they are enlarged.

Math-based graphic

Also known as outline, object-oriented, draw, and vector graphics. Images of this type are generated using mathematical formulae. They can be resized to very large sizes without loss of quality. Math-based graphics are created using packages like Freehand and Illustrator.

There are only a few formats of raster graphics that work on the web. For the purposes of this class, we will focus on two: GIF and JPEG.

GIF images are platform independent and can be displayed on any computer using any web browser. They are compressed and quite small as long as you limit the number of colors and stay away from shading and gradients. A couple other cool things about GIFs is that you can create them with transparent backgrounds so that you background shows through in places that would normally be just white and clunky and you can use GIFs to create simple animations. More about that is the next chapter.

JPEG format is much better for storing images that have fades, shading, or a lot of colors. Because of the compression algorithms used in JPEG creation, images with many colors can be stored much more efficiently. The downside is that JPEG compression can cause the loss of data if the file is manipulated too often, causing the image to become blurry.

Aliasing is a term used to define the relationship between the edges shapes in an image. When an image is aliased, it means that there is no color blending between the shapes. This causes the edges to be jagged and look like little staircases. When an image is anti-aliased, there is a smoother transition between edges, where colors blend and edges do not have sharp corners and jagged edges.

If, for example, a red circle is placed on a yellow background, an aliased image would have rough edges around the circle. An anti-aliased image would include some shades of orange around the edge of the circle to prevent the jagged edges.

Image maps are a way to take one large image and use it to link to several different pages. In short, you supply an image and a map (Suppose that is where they got the name?). The map list coordinates in the image in the shapes of rectangles, circles, or polygons. If the mouse is clicked while inside one of these predefined shapes, a new page is loaded in the browser window.

Example:

Alternate text is defined using the ALT attribute within the IMG tag. This alternate text is displayed by the browser in the graphic box before the graphic is loaded and is displayed by some browsers and informational text when the mouse hovers over the image.

Thumbnail images are smaller versions of original graphics. They are used on pages with many graphics to speed up the download. If you have a page that contains many graphics, create thumbnails in Paint Shop Pro or Photoshop that are physically smaller dimensions. Use these on your page and make them links to larger versions of the same images. You page will download faster and your viewers will thank you. Click on the thumbnail at right to see the big picture.

Easy, fast buttons & headers

There are many ways to create buttons and header banners for your web sites. One of the fastest and easiest ways is to use Cool Text.

In this exercise, we are going to create a button for our site. If we need more than one button for our site, we need to perform this process once for each one. You can also use this site to create graphical headers for your pages.

1. Begin by going to the Cool Text web site at cooltext.com.
2. To create a button, click on the Render a Button link on the top of the page.
3. You will see a page with several different button styles. Click on the one you want to use.

4. As soon as you click on the button style you want, you will go to a page containing the input boxes at left. The page displays the button style you chose and allows for your custom input. In the box labeled Logo Text, type in the text for your button. You can modify the size of the text in the Text Size box and change the colors of the button components by clicking on the Color boxes and selecting new colors from the next page.
5. Once you have input your text and selected your options, click the Render Button Design button. A new page will be displayed showing your button.
    
6. Select the Download Image link.
   
7. Your new button is downloaded to your computer. Save it with the rest of your web site images and add it to your pages.

216 Web Safe Color Chart