Building a Website with Photoshop and Dreamweaver (Part 1)

In the course of 8 lessons, we are going to use Photoshop and Imageready to design a website. Then we are going to create rollover effects and slice and optimize in Imageready. If that's not enough, we will then publish the site and import it to Dreamweaver where we will turn it into a website. These are the same techniques I used to build PhotoshopCafe.

In the first part we are going to prepare our homepage by producing the background and blending an image.

Curriculum.

1. Preparing the background (Photoshop)

2. Adding the design elements to the page (Photoshop)

3. Preparing rollovers with Layer Styles (Photoshop)

4. Slicing in (Imageready)

5. Rollovers in (Imageready)

6. Optimizing and publishing (Imageready)

7. Bringing it into (Dreamweaver)

8. Turning the page into a website (Dreamweaver)

1. Create a new canvas at 800X600. This is a good starting size for a webpage, however we can use larger sizes as screen sizes and resolutions increase. At this time I use 800X600 so that people with lower resolution monitors can display the page correctly. Previously I used 640X480. But now so few people have these resolutions that its not worth taxing everyone else. That is one of the challenges of the web, there are always trade offs.

2. Drag out a few guides to help keep everything in its proper place.

Before we really get into the design I want to encourage you to create your own design and use the principles rather than just follow along.

3. Create a new layer.

I like to design on layers because of the flexibility offered.

4. Set a dark blue as your background color and prepare a foreground to background linear gradient.

5. Apply the gradient to your page. Hold down the shift key to keep the gradient perfectly vertical.

6. Drag the image of the shark (Or your own image "better idea") into the document and resize it. Download the image here. (Right click on it and save to HDD)

7. We are now going to blend the image into the background. Click the 2nd icon from the left in the layers palette to add a layer mask.

8. Choose the paintbrush and select a 100 pixel soft brush.

9. Make black your foreground color and begin to paint around the edges of the picture and watch it fade out. If you make a mistake just paint back with white and the image will reappear.

When you paint black on a mask, it hides the linked image. When you paint white, it shows the image. Shades of gray will effect the transparency.

10. Keep painting until the edges are soft.

11. Finally Switch to screen mode and drop the opacity to 49%.

12. The picture is now seamlessly blended with the background.