Building a website with Photoshop and Dreamweaver: Part 1 Preparing the background

Here it is finally. The long awaited SUPER TUTORIAL 2
In the course of 8 lessons, we are going to use Photoshop and Imageready to design a website. In the first part we are going to prepare our homepage by producing the background and blending an image.

INGREDIENTS

by Colin Smith

More Great Tutorials

PhotoshopCAFE home

Here it is finally. The long awaited SUPER TUTORIAL 2
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 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

Create a new canvas at 800 X 600. 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 res 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.

Continue to: Adding the design elements to the page

Discuss this and other tutorials at our forum

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!

 

 

 


Stock Photography Community