Making a Duotone Web Page Menu
This brief tutorial goes through the steps of making a simple, two-colour menu for a website in Photoshop.
1 – Setting up the menu image
Create a new image, about 160 pixels wide. Select a nice blue colour, and fill the area with the Paint Bucket 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.
Create a new layer.
Use the Selection Tool to select a vertical strip at the right hand side of the image.
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.
2 – Little squares
Hold Shift and select a small square area.
Fill the area with orange.
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.
3 – Watermarks
Create a new layer, and move it down the layers list, so it's just above the blue layer.
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.
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.
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.)
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.
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.
If you know CSS, you can also do it that way.
