Creating a nice design layout with Photoshop CS2. [html]

This is what the final image will look like.

So we're creating a basic design for a website. To begin with, we need to create a new document. Click File > New, and make it 800x600.

Why this size? Since the most common screen resolutions used are 800x600 and 1024x768 (proof), then you design for the lower of the screen resolutions, as it will work in resolutions higher than it. If we make it 800x600, and leave a gap on the edges, then we know that it will work in both 1024x768, and 800x600, and consequently will work in 96% of all computers.

Select a light colour in your palette. To get to this colour picker, double click on the colour's on your tools menu. We are selecting a light colour, as this will be our primary background colour on the design.

Once we've determined the colour, you can select the rounded rectangle tool, and draw out the rectangle for your website. The rounded rectangle tool can be found in the eleventh row, in the second column of your tools menu. You may have to click and hold down on the existing shape for the menu to pop out, as shown below.

Now draw out your shape.

Now we've completed the outline for the shape, duplicate the layer it is on. To do this, first open your layers menu (you may have to select Windows > Layers, or press F7 first.). Then, right click on the existing layer, and click "duplicate". It will make a copy of the layer above it. You will not notice any difference in the appearance of your document.

Now, we can't edit this layer in a raster form yet. We need to convert it from vector into raster. A brief description of why we do this is below.

The difference between raster and vector, is that vector is formed with shapes and mathematics. This way, it is better to be viewed at closer range, and can be expanded and contracted without pixelation or deformity. Raster however works with exact pixels and distances, not mathematics. The disadvantage of this is that it cannot be expanded without pixelation, however since in web design we are dealing with resolutions, and often exact pixel distances, it is logical to raster the objects. Rasterising also enables us to edit the shape further in Photoshop, and with more accuracy than we can if it is vectorised.

On your duplicated area, select an area like this. The purpose of this is to give the top and bottom some definition from the rest of the design. We're creating a header and a footer on the design. Note that its important to get the unselected vertical components right. The horizontal areas not selected are less important.

Press delete, or click Edit > Clear. Now we have an invisible (you can't see it) extra part of the duplicated layer up the top and down the bottom. Now click Image > Adjustments > Brightness & Contrast. Move the contrast bar to the far left, and suddenly a header and footer should appear in a dark gray.

I decided to draw another line with a similar height, to mark the height of my banner, and to provide an area for my banner. I did this just by making a new layer (Layer > New Layer) and selecting the marquee tool, and pasting the identical colour on the header.

Click Layer > New Layer, and select the following area with your rectangular marquee tool.

Now, open a render, or other image to put into the design. I used an image I made with Apophysis. You can download and use some images that I made here: Number 1, and Number 2. Open it up, and copy it, and select paste into. Move it around to suit where you want it to be in the design.

At this point, I duplicated the render, and decided to add some effects to it. On the duplicated layer, I added a halftone pattern.

On this new duplicated layer of the render, set the opacity to somewhere between 50 - 70, and make its blending mode 'overlay'.

I added text to the navigation area, and also put in with the pencil tool (fourth row, second column) a little dividing dotted line.

Your design should look something like this.

Now its time to add some text to the banner. Using the following settings, add text to your design.

Double-click on the text layer The following few images are pretty self-explanitory. They're just the various settings in the blending modes that I have activated, and adjusted.

Your text should look something like this:

Create a new layer. You can name it if you wish, it will be used for our left column on the design.

I drew a line down the page to show divide the layout into the two column layout. Then, select the area shown with the rectangular marquee tool.

Then, on the same layer, with the paint bucket, (second column, sixth row) fill in the area selected. You now have a column to put content, or further navigation if you require it.

At this point, I decided that the banner in its green form didn't work with the design. So, I decided to change the colour of the banner. All you have to do this, is select the right layer:

And now click Image > Adjustments > Hue / Saturation, and put in the following settings.

Once that's done, zoom out, and view your website. This is how mine turned out, and I'm happy with the final result.

End of tutorial. Hope you enjoyed it.