4 – Making a logo
The bulbous area at the tip is where the website's logo goes.
Use Times New Roman font here, and put some appropriate text in.
The easiest way to put the horizontal line in is by just typing underscores. ( __ )
GRight-click each of these layers, and choose Blending Options (Photoshop 6.0 and 7.0) or Effects (Photoshop 5.)
Give each of these layers a 0.5 pixel black Strok (outline), a Drop Shadow, and a Bevel.
If a black outline of one pixel is still too much, just make the outline 50% opacity, and it will look like it's half as thick.
5 – Making some buttons
Create a new layer.
Use the Shape Tool to put in a rounded rectangle. (Select the little square button at the top left that says "create new work path"). Create the shape, and then right-click it and convert it to a selection. (This step is Adobe Photoshop 6.0 and 7.0 only - just use a rectangle in Adobe Photoshop 5.0)
Put another light-to-dark gradient across the shape (I've used green), and then give them the usual bevel/contour, texture, stroke, and shadow.
Give the button some text (I've used bold Tahoma), of a new colour (I've used yellow), and give it the usual effects, but without the texture.
6 – Adding a picture
The final touch, which adds a nice effect, is to put a picture of something relevant in behind the menu. You can find stock photography easily on the web.
Use the Clone stamp tool to extend the top and bottom of the photo if it's not big enough.
While holding shift, run a white airbrush along the right side of the image.
Don't worry about the bottom of the image for now.
When you've finished doing any website design, always select any non-picture elements (e.g. the menu bar, header text, buttons, and button text) and press Ctrl+U to colour-shift them. Play around with the sliders until you like the colours. (I haven't done this here, because I already knew which colours would look best. :)
7 – Creating a "sliver"
A sliver is what I call a thin slice of an image that can be repeated indefinitely on your website, to fill up an area of any size.
Save your work here, and do not save it again from this point, as the image will be flattened, and you want to keep your layers for future work.
This step can also be done easily with the Slice Tool, but for simplicity, it has been omitted here.
Select an area towards the bottom of the image, about a centimetre tall, and as wide as your image.
This area should not have any watermark on it, or any outstanding features in the photo.
Click Layer > Flatten Image, then Image > Crop, to remove everything but the selection. (If you don't flatten the image, it will apply the bevel to the top and bottom edges of your sliver, which is not what you want.)
Click File > Save for Web, and choose Jpeg, Quality 60.
On the History Palette, undo the Crop, but not the flattening.
Click File > Save for Web, and choose Jpeg, Quality 60 again.
8 – Table layout
In your web page editor, make a table with two columns.
Set the width of the left column width to be equal to the width of your menu image, and set the right column to be around 500 pixels wide. Make the width of the whole table equal to the sum of these two numbers.
Set the background of your left cell to be the sliver image. Then insert the menu image into that cell. Depending on your web page editor, use Hotspots or an Image Map to turn the buttons into links.
To finish up, some words about text...
Obviously, the body text of the page should be black, but what about the headings?
Scroll up and look at the image. The aim is to balance the primary colours - red, blue and green. Which colour is there the least of?
The red menu bar, and the green buttons and grass are each more prevalent than the blue water, so the best colour for the text headers on the page is blue. (Always use a dark shade of that colour when on a white background.)
