Web Page Color Scheming

by Joe Gillespie — Nov 1, 2001

Here are the two basic layers, one is the paper and one the colors you are trying out.

Layer palette

The paper layer has all the elements as transparent holes.

The paper layer

The color layer has just rough slabs of color.

The color layer

Manipulating the colors in-behind the page mask is quick and easy.

Both combined

This is the system I use to work out color schemes for Web pages or logos. I use Photoshop, but the same principle will work in any graphics editor that supports layers and alpha channels. If I explain the principle first in real world terms, it makes it easier to understand.

Imagine that you had a piece of paper and somehow managed to stamp all the graphics out of it so that each logo, block of text, line or box was a hole - like a stencil. We are not concerned with photos or illustrations at this point because they don't usually figure in colour schemes. Now, if you slip pieces of colored paper behind those holes, you can see how the elements look in color. You can play with different colours of papers in-behind the front page very easily until you are satisfied with the color scheme.

It would be very difficult to cut such small holes in real paper, but it's very easy in Photoshop. The first thing to do is to create your complete layout in black and white. Start with a white or black background and add the various elements in the opposite color using as many layers as you need. When you are happy with the general layout, either merge all the layers into one or do Select All and useCopy Merged. Now go to the Channels palette, create a new channel and paste the merged layers. Regardless of whether you are doing a dark-on-light or a light-on-dark design, the alpha channel should be white out of black, so you will have to use Invert if your pasted image is black-on-white.

Now, you have an alpha channel mask containing all your layout elements. Go back to RGB mode and to the Layers palette and make a couple of new layers. Fill the whole top-most layer with your intended page colour, you can always change this later, if you wish. On the layer behind that, we'll call that the color layer, fill the whole layer with the opposite color - black or white. The quick and easy way to fill selections is with a couple of key combos - to fill a selection with the foreground colour hit the Backspace and Alt keys, to fill the selection with the background color, use Backspace and Command (Mac) or Backspace and Control (PC). Get into the habit of filling selections this way, it makes everything so much easier.

Go back to the top layer, the page, and load up your alpha channel (Select menu, Load Selection, your new alpha channel) and choose Clear from the Edit menu, or simply hit the Backspace key. You should now have the required holes in your page with the background showing through.

Now, go to the layer behind in the Layers palette where you can select large rectangular areas and fill them with colors or use a big paint brush to paint behind smaller text and graphic elements. You will find that you can do this very quickly and you don't have to be exact because your page mask will make sure that everything stays precise.

I find that rectangular selections, or merged rectangular selections, and the key combos mentioned earlier are quickest. If you want to try alternative schemes, make new layers behind the page layer and experiment as much as you like. Of course, you can also make new page layers and fill them with other colors or even patterns. Punch out the holes as before using the alpha channel.

One final tip, if you want to see something really spectacular, select the color layer and bring up the Image, Adjust, Hue and Saturation dialog. By moving the Hue, Saturation and Lightness sliders, all the colors will gradually change giving you new colorways that you never even thought of. You can do this on the page layer too.

When you have found the most appealing color scheme and a few alternatives, save the file and start building the Web page in your favorite editor.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float