Web Page Color Scheming using your photos

Colour is something we take for granted, it’s all around us. Using colour effectively to enhance communications is not quite so simple.

Most people understand about warm colours and cool colours but the important thing about colours, is that they are seldom seen in isolation, they are seen in the context of other colours around them and that affects them all.

If you think of colours as musical notes, you will appreciate that some notes work together to produce a harmonious chord and some notes sound clangourous when played together. Colours work in exactly the same way.

Where it isn't too difficult to construct a harmonious chord in music, it's a fairly simple pattern after all, you can just as easily put a set of colours together that will be pleasing to the eye. There are a number of ways to do this and Suzanne Stephens is going to tell you some of them in this month's editorial.

As you get more experienced with using colour (or musical notes), you will find that you can stray off the straight and narrow path. You can start exploring the juxtaposition of less obvious sets of colour or combining notes that have more complex relationships. A skilled jazz musician can put the most discordant combinations of notes together and make them work because of their context - their interplay with other notes or chords coming before or after them.

Similarly, the great colourists of the art world can achieve striking effects by combining colours that just don't 'belong' together.
In the end, the result is a communication at a subliminal level. On a Web page, it is something that reacts with what you are saying verbally, either enhancing the message or contradicting it.

Colour is a very powerful tool for the designer and like any tool (or musical instrument), you have to learn how to use it – and then keep practising.

Do you break out in a cold sweat when it's time to choose colors for your Web pages? If so, you're like many Web page designers who are intimidated by designing with color.

Since color selection is a common stumbling block, I'm going to show you some techniques for creating color schemes from the photos used on your Web pages.

To demonstrate my approach, my clients at English River Adventures (ERA) have permitted me to use their photos. I'm in the middle of my third redesign of ERA's site.

Use color to glue your page designs together.

Unlike design for print, color on Web pages is free. With great tools like Photoshop, color is easy to use, too.

Colors sampled from photos can be used to create powerfully cohesive, integrated page designs. A strong color scheme can unify the elements on a page, draw the eye to a focal point, and create a graphic identity that flows consistently from page to page within your site.

When your situation allows, consider "breaking the rules" by creating pages with color schemes that are inconsistent with the rest of the site. Used appropriately, this approach will add visual excitement.

I try to supplement ERA's content updates with fresh graphics on an on-going basis, hoping to beckon kayakers back for return visits. My decidedly un-corporate creative approach includes doing site redesign on an on-going basis instead of introducing the new design all at once. I allow lots of design and color variety, using the logo and navbar to maintain a consistent graphic identity instead of relying on sameness from page to page.

Search data for ERA's site shows that lots of people visit looking for photos to steal. I like to integrate photos with other graphic elements in layered Photoshop files to discourage image theft.

Would you like to begin taking better advantage of color and photography as design elements? This explanation of how I work with photos to create a color scheme may help you.


How to get started

Your first step should be consideration of your client's objectives to determine what kinds of photos will work best. A successful design must support your client's marketing goals.

While creating a special page about ERA's Costa Rica kayaking trips to illustrate this article, I kept in mind that my clients, Ken and Juliet Kastorff, always want whitewater shots included because they appeal to paddlers who go on trips to Central America to extend the paddling season from summer into the winter.

I can also use 'postcard' shots to interest people in combining kayaking (or mountain biking) with foreign tourism. And, since women can excel as easily in kayaking as men, Juliet and I like to use photos of female paddlers whenever possible.

The next step is choosing photos. If you have lots of pictures from which to choose, the possibilities may feel overwhelming. Don't worry - you can refine your selection later while you work on your page layout and find that some work better than others.
I began work on my new Costa Rica page by looking through several CD-ROMs for suitable photos. I copied more photos than I would actually use, then saved them to my computer.

Next, I studied the composition, quality, and colors in the photos, trying to predict which would work best. Special attention went to noting areas of bright or neutral colors common to several photographs.

Though I don't actually mark up my photos, I've marked a few here to help you visualize my process. Yellow circles highlight spots of bright color that may serve nicely as accents in my color scheme.

By the time I completed this step, I already anticipated using a color scheme composed of cool turquoise blue and green since these colors are shared by some of my favorite photos. Others had areas of gold, yellow or red which would spice up the cool turquoise palette.

Finally, I discarded some photos and sorted my 'keepers' into folders organized by topic and/or accent colors, such as 'Costa Rica kayaks yellow' or 'CR birds animals red.'

Since I have already established a 'look' for ERA's pages, I don't bother with sketching layout ideas on paper. Instead, I design directly in Photoshop.

Before plunging directly into design work, let's talk about how to design a color palette derived from only one or two photos. Practice with these less overwhelming tasks will prepare you for more complex design projects.
For the illustration shown at the left, I chose one photo, then added a layer for use as a 'scratch pad' for playing with colors.

Using the eyedropper tool to sample colors from the photo, I painted little swatches of color on my scratch layer. Suspecting I might need more contrasty versions of these colors, I darkened, lightened and/or added saturation to selected areas of the swathes.

Below the photo, I added blocks of blue and off-white chosen from the swatches on my scratch pad to test their effectiveness as background colors for my HTML page or for tables.

Next, I set text samples with Photoshop's text tool, with anti-aliasing turned off, testing to find successful combinations of colors. I used my color swatches as sources for the text colors, adding white for additional contrast as needed.

If I were going to complete this design, my last step would be to open the file in ImageReady (or Fireworks), slice and optimize. I would also make note of the hex values of the text, background and link colors that I would need to specify colors in my HTML code.

When you use more than one photo, try making color swatches as before, except this time when a color is unique to only one image, place it on the outer edge of the scratch pad.

When similar colors appear in both images, place swatches in side-by-side columns. You may also want to create lighter, darker and more saturated color variations.

When colors in the two middle columns are very similar, it's safe to base your color palette on these colors. Both color schemes shown below the photos at left work well because their light green backgrounds - chosen from the water in the background of each photo - serve to unify the otherwise unrelated photos. Those colors that appear in only one photo should be used more sparingly, such as for 'hover' or 'alink' colors.

If you can't find enough similar colors among your photos, place a semi-transparent layer containing a copy of one column of swatches on top of the other column. This will result in a third set of colors that coordinate nicely with both photos.

When you advance to creating a color scheme for a page with lots of photographs, you'll find it surprisingly easy.
Since for demonstration purposes I've used more photos on my Costa Rica page than usual, arranging them was actually harder than choosing the color scheme.

For this project, after filling the base layer of my Photoshop file with the blue background color, I added a new layer for each image, beginning with the kayaker photo in the background.

Layer masks were used to silhouette and crop photos, and to create translucency as needed to reveal a tint of blue from the background. A layer of scan lines added more blue, continuing a theme used throughout ERA's site and making the images less appealing to thieves. Scan lines were masked as needed to reveal more of each photo. Areas of some photos were colorized to force them to harmonize with my color scheme.

While I created a few color swatches on a scratch layer, I often shortcut the process by visually scanning for common colors, then sampling them directly from photos. Then, to give the type graphics more contrast, I substituted brighter, more saturated versions of those colors from Photoshop's color palette.

That's all there is to it. Now I'm ready to slice 'n' dice!
But first, I'll mention another benefit of using these techniques — experimentation is easy and often results in creative new color combinations.

I'm just like a kid with a new jumbo box of Crayolas when I play with color schemes. I hope you'll enjoy these techniques as much as I do!

In the early days of Photoshop when 8-bit monitors were the norm and every file had to have a palette, there was a filter that manipulated the palette to give 'colour cycling'. Each one of the 256 colours values in the palette gradually changed and the overall effect was one of an ever-changing colour scheme that swept through a multitude of mind-blowing, psychedelic images. When you saw one that you really liked, a press of the space bar froze it so that it could be saved.

Modern computers with 24 or 32-bit displays don't use palettes in this way and the filter, whose name I can't remember, is long gone, yet the ability to see a wide variety of 'colourways' of a particular Web page design is very useful and can produce amazing and unpredictable results that unlikely to be arrived at by design – they are happy accidents, 'happenstance'!

All is not lost.

In Photoshop's armoury of 'Adjustments' in the 'Image' menu is something called 'Hue/Saturation' which does much the same thing. It cycles the colours (hue) in the image as you drag the slider left and right. It also allows you to change the strength (saturation) of the colours and make them lighter or darker (lightness).

The filter only affects the currently selected layer but for most purposes, the original design is best screen-grabbed from your browser and opened in Photoshop as a single layer. Moving the hue slider will show you what the design would look like in hundreds of different colourways. You can also boost or flatten the purity of the colours with the saturation control and lighten or darken the effect for more drama or subtlety.

There is also a button called 'Colorize' which switches the whole process into a monochrome mode giving more subtle, harmonious colour schemes.

It is very much a matter of trial and error. Many of the colour schemes produced like this will be lurid and horrible – but amongst them, there will be a few gems. You just have to spot them!

Send your suggestions and comments to
Com4tzone • web developer digest © 2019-2023
Copenhagen, Denmark