Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web Design Layout #10

Web Design Layout #10


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

Web Design Layout #10 image 1

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.

Web Design Layout #10 image 2

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.

Web Design Layout #10 image 3

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

Web Design Layout #10 image 4

Web Design Layout #10 image 5

Web Design Layout #10 image 6

You should have something like this.

Web Design Layout #10 image 7

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

Web Design Layout #10 image 8

On top of your navigation add your dummy text links.

Web Design Layout #10 image 9

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.

Web Design Layout #10 image 10

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

Web Design Layout #10 image 11

Web Design Layout #10 image 12

You should have something like this.

Web Design Layout #10 image 13

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.

Web Design Layout #10 image 14

You should have something like this.

Web Design Layout #10 image 15

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

Web Design Layout #10 image 16

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.

Web Design Layout #10 image 17

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

Web Design Layout #10 image 18

Web Design Layout #10 image 19

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

Web Design Layout #10 image 20

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.

Web Design Layout #10 image 21

This is how mine looks.

Web Design Layout #10 image 22

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

Web Design Layout #10 image 23

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.

Web Design Layout #10 image 24

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.

Web Design Layout #10 image 25

Creating Our Content Area

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

Web Design Layout #10 image 26

Create a rectangle underneath your featured area.

Web Design Layout #10 image 27

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

Web Design Layout #10 image 28

Web Design Layout #10 image 29

Web Design Layout #10 image 30

You should have something like this.

Web Design Layout #10 image 31

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

Web Design Layout #10 image 32

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.

Web Design Layout #10 image 33

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.

Web Design Layout #10 image 34

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

Web Design Layout #10 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web Design Layout #10"

Only registered users can write comment

No comments yet...