In this tutorial il be showing you how to create a sleek looking web design layout from scratch. The design itself will have a simplistic metal feel, with the use of alot of grey color(s).

 

Right lets get started!

Creating Our Document

We’ll start off with a new document, with the dimensions 1000 x 1000 pixels.

Creating Our Background

Once you’ve created your new document, fill your background using the paint tool with the color #EEEEEE. Go to “filter > noise > add noise”, use the settings below.

Creating Our Navigation

Select the rectangular marquee tool and make a selection across the top of your canvas, the height of the selection should be about 68 – 70 pixels in height but must span the width of the canvas.

Fill your selection with any color then add these layer styles.

You should have something like this.

Underneath the stroke on the navigation, create a 1pixel line spanning the width of the canvas. Fill the selection with white.

On top of your navigation add your dummy text links.

Ive left one of the links in a different color, this one will be my hover state. Using the rectangular marquee tool make a selection around your first link.

Fill your selection on a layer underneath your navigation text. Fill the selection with any color. Now add these layer styles.

You should have something like this.

Were now going to make some seperators to seperate our nav links. Using the rectangular marquee tool create two 1 pixel lines next to each other.

You should have something like this.

In the empty space which is left on the right hand side, you can fill it in with a search form.

The go button use the same layer styles as our hover button.

Our Website Title & Featured Area

Using the rectangular marquee tool make a big selection underneath everything you’ve made so far.

Fill the selection with any color then add these layer styles.

Underneath the stroke add a white line like we did on our navigation.

Underneath our navigation add your website title. Ive used two different colors for the title, the font ive used is a star wars jedi font. Ive also added this drop shadow.

This is how mine looks.

Underneath your website title add a featured image to use in your featured area.

Once you’ve added your image, select its layer whilst holding down the CTRL key, this will load the images selection. Go to “select > modify > expand”. Expand the selection by 10 pixels.

Create a new layer underneath your featured image then fill the selection with white. Add a subtle stroke to the white rectangle. On the right hand side add a simple title and description.

Creating Our Content Area

Select the rounded rectangle tool with a radius of 30px.

Create a rectangle underneath your featured area.

Fill the rectangle with any color then add these layer styles.

You should have something like this.

Duplicate your rectangle 2 more times and place them underneath one another.

Inside your rectangles add some dummy content, im using some icons from smashing magazine with some simple lorem ipsum text. On the right side of the rectangles add a bigger one using the same styles.

Creating The Footer

Select the rounded rectangle again with a radius of 30px create a rectangle underneath your content boxes. Add the same layer styles as the rectangles in the steps above.

Add your footer content to the footer to finish off your layout. Your final layout should look something like this.

Learn To Code This Layout

You can learn to code this layout into a working CSS template by following the follow-up tutorial HERE.