Weeb tutorials feedback Powered by

Create a website mock-up using Photoshop - Part 1/3

This tutorial will show you how to create a mock-up for a new website, following on from the design you will learn how to code it fully using HTML & CSS.

Why not take a look at the end product before you start.

Step 1 - Create the document

Open photoshop and create a new document with the following settings.

 

Site layout thumbnail

 

Step 2 - Create the wrap/website background.

First of all create a new layer(Ctrl + Shift + N).

Change the foreground color to '#e4e4e4' & select the rectangle tool. Create a rectangle which fills the whole page, except for around 20 pixels at every side.

 

Site layout thumbnail

Browse to 'Layer > Layer style' and add the following stroke effect.

 

Site layout thumbnail

 

Name this layer 'BG'.

Step 3 - The header section.

Create a new layer.

Change the foreground color to '#9abbdd' & create a new rectangle for the header.

Site layout thumbnail

Now add the following layer styles to the layer.

 

Site layout thumbnail

To achieve the same pattern effect as us you will need to download and install the Ali seamless patterns set from Brusheezy. You can learn how to install patterns here.

Site layout thumbnail

Call this layer 'Header'.

Step 3a - A bit of lighting...

Create a new layer.

Select the pixels of the 'Header' layer by holding 'Ctrl' and left clicking its thumbnail.

Change the foreground color to white & select the brush tool. Using a big soft brush try to replicate the following.

Site layout thumbnail

In the layers window, change the blending mode to overlay & the opacity to around 40%.

Site layout thumbnail

next last

This is the old version of our site. To visit the new version click the following link: New site