Web Design Layout #10

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.

Step1

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.

Step2

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.

Step3

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

Step4

Step5

Step6

You should have something like this.

Step7

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

Step8

On top of your navigation add your dummy text links.

Step9

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.

Step10

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

Step11

Step12

You should have something like this.

Step13

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.

Step14

You should have something like this.

Step15

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

Step16

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.

Step17

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

Step18

Step19

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

Step20

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.

Step21

This is how mine looks.

Step22

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

Step23

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.

Step24

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.

Step25

Creating Our Content Area

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

Step26

Create a rectangle underneath your featured area.

Step27

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

Step28

Step29

Step30

You should have something like this.

Step31

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

Step32

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.

Step33

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.

Step34

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

Step35

Learn To Code This Layout

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