Creating a website in Photoshop part 1

In this set of tutorials, we will be creating a simple yet effective web design in Photoshop. We are using Photoshop CS2, but most versions will be fine for this site design.

In this first tutorial, we will produce a rough layout for the design. We will:

• set up the canvas size (size of the finished page)
• decide what is going on the page
• Mark out where all our elements will go
• Draw in the basic elements - header, menu, text area, and footer

In the second tutorial, we will start building on our layout. At the end of the second tutorial, you design will have all the basic elements in place.

The third tutorial in this series will add some more effects to "polish" the web design and make it more unique.

After completing all tutorials in this series

you will have built a design that does the following:

• fits correctly on most users screens (very important!)
• has a clearly defined header, menu, text area and footer
• uses text of different sizes and colours
• Uses Photoshops built in custom shapes, and a custom shape we create
• uses layer effects to create metallic text, add borders

Stage one - set the canvas size

The canvas in Photoshop determines how large the final image will be.
When our website is complete, we want it to be visible by as many users as possible. As not all users have the same size monitors, or screen resolution, we need to pick a size that will fit well for most users.

The most common screen resolution is 1024 x 768, so we will make our site\'s width fit well into this resolution.

We want the website part of our design to be 900pixels wide. This will look good at 1024 x 768, as the text wont go right up to the edges of the screen.

If we make our canvas 1200 pixels wide, we can give 900 pixels of this to our main website, and 150 pixels each side of this for background images. Background images will be only seen by people with higher resolution displays.

The first stage is to open Photoshop, and create a new canvas.

From here, you can set your canvas size to 1200 pixels (wide) and 700 pixels (high).

Now you have a canvas created, we will add some guides. Guides are lines that float over an image, and are used for lining up elements.

Adding guides

We are going to create two guides, that define the main website area (the centre part) and the background areas.
We know that the centre part will display fine for most users and the background edges may not - so we will only put text, buttons, images etc in the centre part.

To draw guides, we need to first display rulers. This is done using View > Rulers (in version CS2).

Its a good idea to zoom right in - I am zooming in to 500% so I can get this pixel perfect.

Draw a vertical guide by clicking and dragging the ruler on the left of the canvas, and dragging to the right. Rulers can be moved around by dragging; to remove them, simply drag them off the canvas.
The left side guide is drawn 150pixels from the left of the canvas. The right side guide is drawn 1050px from the left. We can now clearly see the centre part, where we will create the website.

Its a good idea to save your image frequently when using Photoshop, by the way.

We can use vertical or horizontal guides to mark out other areas. Guides are ideal for this - they are easily moved, and are always on top of anything else in the image. Guides line up with the ruler marks, enabling us to place elements precisely.

We are going to some horizontal guides to mark out where our header will go. Horizontal guides are drawn by clicking and dragging the ruler on the top of the canvas.

Our header is 100 pixels high - so draw a guide that marks out 100 pixels.

We will use another horizontal guide to mark out the top and bottom of our menu. The top of the menu starts at 115 pixels, so draw this guide in 115 pixels down. The bottom of the menu is at 140 pixels.

We will add one final horizontal guide. This will mark out the footer area of the page. We will draw this in 610 pixels down, which will give us enough footer space for some information, links to pages, and some styling.

We now have our header, menu, main content, and footer area marked out by guides. If you are happy with the basic layout, we can start adding elements to each of the marked out areas.

Creating a layer for the header

Each element is going to start with one layer. To create a layer for your header, select layer (from the top menu) and new layer. Enter the name "header" for this layer.

We can now draw in our header. There are many ways to do this - we are going to use simple colour fills and the marquee tool.

Firstly, create a new layer. Name it "header". New layers are created by selecting Layer > New layer from the top menu.

Zoom in to about 400%. This will let us accurately draw a rectangle that matches the guides we drew out. Using the scroll bars on the canvas, scroll to the top left of the canvas.

Select the marquee tool from the tools bar. Take your mouse to the canvas, right up to the top left (position 0: 0). Clicking and holding the mouse, draw a rectangle that fills the header section - and the edges.
When it is drawn, let the mouse go - you will see rows of marching lines around your rectangle. If the rectangle isnt quite right, just start again.

Its now possible to fill this rectangle area with a colour. Click the foreground colour picker, and choose a colour for your header section. If you scroll around the colours in this section, you will see the hex code changing. You can directly enter colours here - to get the same colour as I have used, enter the colour 7bb621.

With the colour selected, select the paint bucket tool. Click inside the rows of marching ants. You have made a header, filled with a subtle colour.

Repeat the process:

• Layer > new layer
•  
• give layer a descriptive name
•  
• draw shape with marquee tool
•  
• select colour
•  
• With paint bucket tool selected, fill in the rows of marching ants.
•  

Repeat this process for the menu, and fill it with black (000000)

And finally, the footer. This is the same colour as the header - 7bb621.

Congratulations - you have completed the first tutorial, and created a web page layout.

Whats next?

In the next tutorial in this series, we will turn our layout into a basic webpage.