"Moonbase" Website Layout – Page 1 of 2

This tutorial shows how to make a starkly lit sandy website template, with a menu of blue buttons. This tutorial was created in Photoshop CS4.

1 – Creating the structure of the page

Click File > New. Enter a Width of around 700, and a Height of around 500. Press OK.

Set your foreground colour to brown. (I've used 5A2A00 here.)

Select the Pen Tool. Make sure the little Shape Layers icon at the top left of the screen is clicked. Click the Pen Tool to draw a triangle, as shown. (Remember to finish on the same point you started on, to complete the loop.) You may need to maximise the window for this step, so you can see the points properly.

2 – Warping the path

Ctrl+Click on the path, so that you can see the existing points, and then click on the path a few times, to add a few new points. (If you lose the selection of your path, you can always retrieve it from the Paths window. Click Window > Paths.) You can drag the points around, select them, or drag their "arms" around, by holding Ctrl while you do so.

3 – Blending Options

Right-click this layer in the Layers window, and click Blending Options.

Choose the Move Tool. Press Shift+Up Arrow, then Shift+Left Arrow. This will move the brown area off the image a bit, so that the left and top bevels, and the "ends" of the Drop Shadow, aren't visible. (Holding Shift, while pressing the arrow key, causes the object to be "nudged" by ten pixels at a time, instead of one.)

4 – Selecting the shapes of menu buttons

Click View > Show > Grid (or just press Ctrl+').

Click View > Snap (or just press Shift+Ctrl+;).

Click View > Snap To > Grid (if it's not already ticked.)

Select four rectangular areas, as shown. Hold Shift each time you make a new rectangle, so that the previous selection doesn't disappear. When you select these rectangles, they'll extend into the white area.

Alt+Shift+Ctrl+Click on your brown Shape Layer, in the Layers window. This will trim the ends of the rectangles off.

Continue to Page 2 of 2

Tutorials | Articles | Templates | Website | Help | About