Building a Website with Photoshop and Dreamweaver (Part 2)

In a continuation of the design part of this tutorial, we are going to take our background and add the graphics needed to turn it from an image into a webpage.

1. Select a nice clean font like Futura or Arial and type the word "waterworld". To make it look better, increase the spacing between the letters. You can do this by:

• Highlighting the text with the text tool
• Open the type dialog box
• Click in the kerning (letter spacing) option (The one with the icon of the "AV" with a double sided arrow under it) and press the up keyboard key repeatedly to increase space and the down key to decrease letter spacing.

Press Ctrl/Cmd+T key for free transform. (PC Control/Mac Command)

Rotate the text 90 deg counter-clockwise and position it.

2. Place your logo in the top left corner. I made this logo with the text tool and by creating a square and filling it, then I applied the wave filter to it and rotated it 45 deg. Finally I applied a 1 pixel white stroke to it to define the edges.

3. Lets add some some thin lines.

Create a new layer, name it lines and move it to the top.

4. Choose the vertical single pixel selection tool.

5. Drag the tool to the right of our text, fill it with white.

Drag the tool to the left and fill with white again.

6. We want the lines to stop half way up the logo. Make a selection around the unwanted part of the lines.

7. Press the delete key and the lines are cropped.

8. Navigation bar time!

Make a selection around the top with the rectangular marquee tool and fill with a royal blue color.

See how the guides are becoming very useful at this stage?

Click to enlarge

9. Add a tag-line or slogan on the top in the same royal blue.

Add the text for the links. You will want to give them better names than I did here. Be careful to create each text link on a separate layer. We will be using them for the rollovers in pt 3 of the super tut.

Click to enlarge

10. Lets see what we have created now. Turn off the guides for a preview. View>show>Guides

11. Here is the page ready for processing. Notice that a webpage doesn't have to be complicated to have impact. Really the best designs are the simple ones that are well thought out.

In the next section we will be using layer styles to set up our rollover effects. Rollover is the name given to the effect that causes an image to change when the mouse roll over the image.

See you in part 3 soon.