Making a Duotone Web Page Menu using Adobe Photoshop

Related Articles

This brief tutorial goes through the steps of making a simple, two-colour menu for a website in Photoshop.

Navigation bar

1 - Setting Up the Menu Image

Fill tool Create a new image, about 160 pixels wide. Select a nice blue colour, and fill the area with the Paint Bucket Tool.

Text tool Use the Text Tool to put in some white menu header text. Use all lower case, and a sans-serif (non-curly) font. I've used Trebuchet here.

New layer tool Create a new layer.

Selection tool Use the Selection Tool to select a vertical strip at the right hand side of the image.

Fill tool Choose an orange colour, and fill the area.

Blue is always a safe colour for websites. It gives the user the impression of authority and trust-worthiness. Orange doesn't really give any such impression. It's simply useful here because it contrasts adequately with both blue and white.

Little squares

2 - Little Squares

Selection tool Hold Shift and select a small square area.

Fill tool Fill the area with orange.

Move tool Use Alt + Move Tool to copy the square twice.

You may have seen these little squares appear on some other sites. They don't have any meaning - they're just little coloured doodads. With a duotone design like this, the golden rule is to try to use all three contrasting colours in the same area. This contrast between objects makes the difference between graphics that look good, and graphics that look bland.

Watermarks using Photoshop

3 - Watermarks

New layer tool Create a new layer, and move it down the layers list, so it's just above the blue layer.

Custom shape tool Choose the Custom Shape Tool. It shares a button with the Polygon Tool, Line Tool, and others. Hold down on the button, or press Shift+U a few times, to change to the appropriate tool.

At the middle of the top of the screen, it should say "Shape:" and show a little outline of a shape. click the arrow next to that shape. A box of shapes should appear. Click the little arrow at the top right of that box, and select "All".

Choose a nice shape you'd like to use (I chose a flower). Set your foreground colour to black, and draw the shape on your image twice. Make both shapes the same size, but rotate them differently.

The Shape Tools only exist in Photoshop 6.0 and 7.0. In Photoshop 5.5 or earlier, you can use the Lasso Tool and Paint Bucket to make your shape.

Set the layer's opacity to 15%, to make it into a watermark.

Save the image for the web (Click File > Save for Web.) Choose Jpeg, quality 60.

Photoshop design: Navigation bar

4 - Creating a "Sliver" Image

This menu is 400 pixels tall. However, the web page it's on could be any height. To fill up the rest of that height, the menu needs to extend all the way down.

This can be done by creating a "sliver". A sliver is a thin slice of an image, that repeats to fill up an area.

Selection tool Select a narrow strip at the base of the menu. Click Image > Crop, then click File > Save for Web.

(I've inserted some normal text here in my web editor as an example of how the menu can be used.)



2: Create this little table, and set the menu image as its background.




1: Set the sliver as background of this cell.



5 - Adding the Menu to a Web Page

In your web page editor, make a table with two columns and no borders, padding or spacing. (Like this table, but with invisible borders.)

Set the width of the left column to equal the width of your menu image. Right-click and set the Vertical Alignment of both cells to "Top".

Set your sliver image as the background of the left cell.

In that cell, insert a new, one-celled table.

Set the table to be exactly the same size as your menu image, and set your menu image as its background. This allows you to put text and links on your image.


Publication Date: Thursday 30th October, 2003
Author: Daniel Piechnick View profile

Related Articles