Building a website with Photoshop and Dreamweaver: Part 2 Add Design Elements

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.

INGREDIENTS

by Colin Smith

More Great Tutorials

PhotoshopCAFE home

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. Preparing the background *Photoshop 6
2. Adding the design elements to the page *Photoshop 6
3. Preparing rollovers with Layer Styles *Photoshop 6
4. Slicing in *Imageready 3
5. Rollovers in *Imageready 3
6. Optimizing and publishing *Imageready 3
7. Bringing it into *Dreamweaver 4
8. Turning the page into a website *Dreamweaver 4

 

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 repeatadly 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 selectioon around the unwanted part of the lines.


7

Press the delete key and the lines are cropped.


8

 

Navbar 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?

 


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 seperate layer. We will be using them for the rollovers in pt 3 of the super tut.


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 doesnt 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.

Enjoying this Tutorial?
Photoshop and Dreamweaver Integration
Learn how to build stunning web pages using Photoshop and Dreamweaver together. This step-by-step approach makes it so easy, that even beginners can produce great webpages. Covers the latest version of Photoshop (CS) and Dreamweaver (MX 2004).

Check out the DVD for easy to follow video, watch over Colin's shoulder as he builds a complete web site from scratch, explaining every step along the way. Ever wished you could sit in a professional design studio for a day and learn all the trick? This is your chance, only better!
For a more detailed approach See the book includes iframes, design theory, drop downs, liquid sites and no programming commerce. Perfect companion for the DVD!