How To Create A Slick, Modern Website Mock-Up In Photoshop

I think it’s time I started writing a few tutorials so here goes. We will learn how to make a simple colourful, professional web layout in Photoshop. I design my sites with the CSS in mind so typically this design should be easy to turn it into html and we won’t have a coder tearing his hair out. Anyway, enough talk.

Here’s what we want to end up with:

Step 1

Create a new document with a width and height of 1200px:

Step 2

We need to know what kind of dimensions we are working with in terms of the actual content. I usually go for around 900px, as today isn’t particularly special, that’s exactly what we will use. We therefore need a margin of 150px on each side. so go to the View >> New Guide. We will create 4 guides, vertical 150px and 1050px and horizontally the same values.

Step 3

We will use a very dark grey as the background. Click the ‘Create new fill / adjustment layer’ button in the bottom corner and select Solid Color.

Step 4

Now using the same menu select Gradient and create a gradient similar to the one below:

Step 5

Select the layer mask for the gradient layer we just created. Now using the selection tool and the guides we made earlier, delete the top and bottom margins on the layer so the dark grey is visible like below.

Step 6

Now create a new layer just above the gradient layer. Then right click it and create a clipping mask.

Step 7

On this layer, using your favourite set of abstract brushes, add some random shapes and stuff to give our website background some edge. Set the layer style to Overlay.

Try Brusheezy, Qbrushes or here for a few abstract brushes.

Mine came out as below, before I set the layer style as overlay. I also added some text for where the website logo would be.

Step 8

Next we want to create an area for our website banner image. So using the guidelines we created earlier, create a selection with a height of about 300px from the top of the content area and fill it with black.

Step 9

Right click this new layer (Color Fill 2) and go to Blending Options. Turn on stroke and give it a 1px white inside stroke. Then move the layer up by 1px to align the top.

Step 10

Now we are going to create an area for the rest of the website content. Duplicate the same layer and place it directly below. Align the top of the new layer with the bottom of the previous one. Then stretch the layer so that it reaches the bottom of the content area. We should have something which resembles this.

Step 11

Set the fill on this layer to 15%. This will make the background more transparent without affecting the stroke.

Step 12

We will now make the website menu bar. Duplicate the layer we just created (15% fill), but this time move it to the top just above the content area and shrink the height so that the bottom matches up with the top of the banner. Then change the colour to white so that we lighten the area underneath.

Step 13

Just to add a little gloss, create a new layer above the menu bar. Make a selection like the one below which covers the top half of the bar. Fill this with black, then make the layer a clipping mask of the layer below. Set the fill to 15% again.

Step 14

Add some text for the menu items and we should have something like this.

Step 15

Now add a heading and some place holder text below the banner. I used font Segoe UI sizes 32px and 12px.

Step 16

We are going to split the content area of our site into 3 parts, so we will need two more guides placed vertically at 450px and 750px.

Step 17

Now that we have our guides, select the line tool and place 2 lines, which will act as separators,  in the blank content area.

Step 18

Breathe slowly, our design should look like so:

Step 19

Now we are going to move a little bit faster. Create three headers for our three sections. Then, create a new layer and using the selection tool, create a box for one of the blank sections below and fill it with black.

Give it a white internal stroke of 1px, centre it, then duplicate it for the other two sections. Add some place holder text underneath, and voila:

Step 20

Small adjustment, I think the design in the background is a bit too prominent. So go back to the layer which has the design (layer 1, should be masked above the gradient layer) and set the opacity to 60%.

Step 21

Add images! I did a quick search on Flickr (for licensed images of course) and found some great abstract stuff. So I added these as clipping masks to the banner and the Services etc. sections of the content; we should end up with something like the below!

Great Stuff.

Related posts:

1. Website Redesign – What Have You Considered?
2. Selecting A Designer Is A Piece Of Pie
3. 6 Essential Questions To Ask Your Client

Filed under: General, Tutorials, Website Design by Nathan