GrafX-Design.com
Home Tutorials Reviews Email Us
GrafX-Design.com
 tutorials | resources | inspiration 

General Graphics Tutorials -- Color part III

This is kind of an ambitious undertaking for me. Normally I try to keep the size of tutorials down to a few pages at most (this one was over 20 pages in Word!). Unfortunately, color is a difficult and rather lengthy topic even where web graphics are concerned. I hope you won't find this tutorial too long-winded and that you'll find it a welcome reference. --tmc

Color Palettes

Traditionally, a palette was a surface where an artist would mix his colors before applying them to the canvas. With computer graphics a palette is somewhat similar. Most graphics programs have some window available that you can pick your colors from. In certain circumstances your color choices are limited. Those limited sets of colors are also referred to as palettes.

Most of the newer imaging programs come with the web palettes included. If you find this is not the case you can get them at various places on the web. I've made the Paint Shop Pro web palette file available here at GrafX Design and many other palettes, or CLUT's... (Color Lookup Tables), are available at Lynda Weinman's site, http://www.lynda.com

Palettes will be of more importance when working with GIF images. Because of their limited color depth GIF images can only use a select palette. This palette, though, can contain a different selection of colors. Sometimes you will have control over the selection of the colors and, unfortunately, sometimes you won't.

Problems With Limited Palettes

There are problems associated with limited palettes (palettes with less than 16.7 million colors). One of these is that, if you choose to work with a limited palette while creating your images, many of the features of your graphics programs will not be available to you. Options such as drop shadows and blurring need to have access to the full range of colors to do their magic. The option here is to create your image using the higher color depth and then reduce the depth or, in the case of Adobe's Photoshop, change the mode to indexed once your image is finished.

Each imaging program varies in how it enables you to change the color depth. In Paint Shop Pro use, Colors, Decrease/Increase color depth. In Photoshop use Image, Mode. In Corel DRAW! you'll make this choice when saving or exporting the image.

NOTE: you should always keep a copy of the image with its color depth set at the higher resolution. This will make applying subsequent changes much easier. Saving your image as a BMP, a TIF or a PCX, for example, is something you should always consider doing. These formats tend to take up a little more room, though, so some sort of back up or archival system is something you might want to consider if you're going to be creating lots of images.


Q&A: What if I only have an 8-bit (256 colors) system? What do I do about using 24-bit (16.7 million colors) mode when creating my images?

Although the program will be set internally to 24-bit you'll still only see only 8-bit images on your screen. As long as the software is set to high color resolution there should be no problem. Even though your display hardware may only be capable of 8-bit color you'll have to set the software to the higher color resolution to work with all the possible options.


Q&A: The color of my images look great on my system when I view them but my friends keep telling me that my images look terrible. What could the problem be?

Chances are that your friends are using systems that display only 256 colors. The best solution, if possible, is to get your friends to adjust their systems. If this can't be done you'll have to look at ways to change your images. You can change the colors you use so that they more closely match the web palette, for example.


How to Build or Select a Palette

Building a palette can be done in a number of ways. You can load an indexed (or GIF) image into your graphics program. Having done so, the palette associated with that image will be available to you. Most software will also allow you to build a palette color by color. You can open up the palette and add, edit or remove colors from it. Figure 3.7 shows the Edit Palette dialog box from Jasc Software Inc.'s Paint Shop Pro.

figure 3.7
figure 3.7
PSP's Edit Palette dialog box



Double-clicking on one of the colors in the Edit Palette dialog box will bring up the Color dialog box (see figure 3.8).

figure 3.8
figure 3.8
Color dialog box



Using the Color dialog box you can change the color you double-clicked to any one of 16.7 million other colors. In Paint Shop Pro, for example, you could just enter the RGB values in the boxes in the lower right corner of the dialog box. This new color would then be available in the palette.

Changing colors in most paint programs is very similar. There is usually two overlapping squares visible within the programs main window. The top square represents the current foreground color and the bottom square represents the current background color. Clicking on either of these squares will generally bring up a dialog box similar to the Paint Shop Pro Color dialog box seen in figure 3.8. Within this dialog box there will be a multi-colored window that you can select colors from. There should also be a way to fine-tune the colors from this dialog box. Consult your user manual to see how this is done with your software.

Programs such as Illustrator and Corel DRAW! differ from each other and the paint programs. In Illustrator there is a Color palette available which can be used to change the color of both the fill and the outline of any chosen shapes/objects. In Corel DRAW! click on either the fill tool or the outline tool to bring up the fly-out menu. From there, click on the circular color wheel to bring up the color dialog box for either the fill or the outline tool

Note: the HSL model that's available in the Color dialog box, as well. Again, it's not really necessary to know how these values work. You're better off just visually selecting a color. These values can come in handy, however, if you're stuck with matching an existing web page background color, for example. The HTML code will give a series of hexadecimal values pertaining to the different colors of the text and background, etc. I'll describe hexadecimal values further on in this tutorial.


Types of Palettes

There are a number of types of palettes available. These include the exact palette, the adaptive palette and the web palette. You may also see the term system palette. This generally refers to a subset of the web palette and contains the colors used by whichever operating system you use. The colors in the system palette are used for icons, cursors and windows, etc. Keep in mind that the one thing that all of these palettes have in common is that they contain a limited number of colors. They differ in which, and how many, colors are available.

Exact Palette

The exact palette is built from the colors currently being used in an image. If the number of colors exceeds that for the palette which you're building you can change some of the colors to others that are similar or you can allow the program to dither the colors for you. Normally this will only become an issue once you need to convert the image to a lower color resolution mode before saving the image, though.

Adaptive Palette

An adaptive palette is what most web browsers will use when loading an image that doesn't fit their own color palette. There are a few gotchas involved here, though. You'll be okay if all of your images share the same palette. If, on the other hand, you have a couple of images that use different palettes you may find that your images have dithered terribly.

The problem is that while you're working on your images you're probably only working on them one at a time, right? So you create one image and save it and go on to create the next one. You get this great idea for a different set of colors and create the second image with a completely new color scheme from the first. You then save the image after adjusting the mode appropriately. Still no problem. You sign on to the Internet and load your web page. Oh, oh! The colors on both images look really bad. What happened? Well what happened is that if the browser is running on an 8-bit (256 colors) setup it can't show you the 256 colors from one image and another 256 from the next. It can, after all only display 256 different colors at one time. This brings us to the dreaded Netscape or Web palette.

Web Palette

The Web palette; scourge of web graphics artists the world over. This palette consists of 216 colors that, if used when constructing your images, will display your images exactly the same no matter what the platform is that they're being displayed on.

Q&A: Why does the web palette contain 216 colors and not 256?

Because both the operating system, Windows for example, and the browser, Netscape let's say, use up, 40 colors between them. This leaves 216 colors. This palette is sometimes called the cube which refers to it being a 6x6x6 (6 times 6 times 6 equals 216) cube. Six colors wide, six colors high and six sides. Whichever web-color you'll be choosing from the 6x6x6 cube the RGB values will consist of one of the following 6 numbers: 255, 204, 153, 102, 051, or 000.


Due to the popularity of web graphics many graphics programs are now shipping with a version of the web palette built-in. While this makes the process of creating images that use this set of colors easier it doesn't change the fact that you are limited to this particular color set.

So what can you do about this? One answer is to use your own set of colors being careful that all of your images use the same restricted palette. The other is you can hope that many of the readers of your pages will be using machines capable of displaying more than 256 colors. I wouldn't bet on the second being the case for a little while, yet. There are many people out there surfing the web with older 386's.

Of course, you could build your graphics with these limitations in mind and take them into account when the images are really important for navigation around your site.


Be sure to check out some of our other general graphics tutorials.


High Quality video-based tutorials

...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.
Photoshop CS2 Tutorials Photoshop Special FX
Photoshop for the Web Photoshop for Photographers
Photoshop CS Tutorials Photoshop Image Artistry
Photoshop Image Restoration Photoshop 7 Tutorials

CorelDRAW Graphics Suite X3 Tutorials CorelDRAW Graphics Suite 11 Tutorials
CorelDRAW 10 Tutorials CorelDRAW 9 Tutorials



Previous Web Graphics Tutorial General Web Graphics Tutorials Next Web Graphics Tutorial
[Previous Tutorial]  [Web Graphics Tutorials]  [Next Tutorial]

We'd like to hear from you... If there are any web graphics techniques you'd like to see covered, send us an e-mail.

 

Current Favorites

Here's of list of our most popular graphics tutorials:

Adobe Photoshop Tutorials

Quick Mask Have you ever wanted to do a little cutting and pasting and make it look as if your head was on someone else's body? Read more....

Corel (JASC)
Paint Shop Pro Tutorials

Transparent GIFs This technique demonstrates how to create transparent GIFs in Paint Shop Pro Read more....


Xara Xtreme Pro Tutorials

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....


Corel DRAW! Tutorials

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need. Read more....

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com
has partnered with some of the best graphics software companies in the World to offer you terrific savings on your favorite programs.

AlienSkin


Photoshop Plugins
AlienSkin Software - They will never wear suits! We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

AutoFX


Photoshop Plugins

Xara 3D


Create amazing, high-quality 3D graphics easily!

Read our review of Xara 3D 6 or click the graphic below to download a free trial version.


GrafX-Design.com



Comments/Questions   ||   Copyright © 1996-2009 GrafX-Design.com -- All rights reserved   ||   Privacy