Building A Website In Photoshop

After launching Photoshop select file new, from the screen that pops up, select the pre-set 800 by 600. You may even change the 800 width to 750, that's totally up to you, make sure to keep the resolution to 72.

You can then choose, any colour you wish for the background, use the paint bucket to apply the colour to the background. You will see, I will not stick to this background

Create a new layer, you then use the rectangular marquee tool draw out the area for the header. Again use the paint bucket, to apply the colour you wish to use. control and the D key will deselect it in other words remove the perimeter around the header section.

Select the type tool, to write the title of your website

Creating a new layer and select the rectangular marquee tool and draw the rectangle as seen above, This is where an image is going to be placed, again use the paint bucket to apply a colour, the control D or on the Mac command D to deselect. I know it's not looking much at the moment, but we are getting there. In the layer palette double click on the layer containing the place holder for the image. this will bring up the styles menu. All I did there was to apply a drop shadow to the image place holder. At this stage it might be a good idea to put all the assets we have created centrally to the page and also name all the layers. To centralise everything select the background, then lock every other layer, text as well. Select the move tool which will make the align tool visible click center
( then un lock )
You can then use the arrow key to nudge the image place holder up or down to suite.
To name your layers select the image place holder for example it may be called layer three, you may choose to call it image holder. naming every layer will save you a lot of time as you continue to add more asset to the site

With the image place holder selected open the image you want to use as the main image. With the move tool selected, go to the layer palette. The cursor will change to the hand click and grab the layer and drop it over the image holder. As you can see the image is larger than he place holder. I could crop or resize the image but I will do neither.  We are getting there, we are going to clip the image to the place holder.

With the image in place move back to the layer palette, place the cursor between the image place holder and the image. Press down the alt key, when the cursor is directly centred the cursor will change, at that point click and there you have it, a clip mask. You can then with the image selected move to the canvas. the image can now be move around and positioned to how it fits best

Next Stage