HV-Designs.co.uk

September 16th, 2009 in Photoshop Tutorials by Richard Carpenter

Software Layout #5

• Share

Hello welcome to another tutorial by hv-designs, today we’ll be making software layout with a nice wooden texture applied as a background.

Creating Our Document And Background

Create a new document 1200 x 1120 pixels with a transparent background.

Once you’ve created your document download this wooden texture by “Matt Hamm”. Once you’ve downloaded the texture place it in the top left corner of the canvas.

Duplicate the texture by right-clicking the layer and going to “duplicate layer”. Once duplicated flip the duplicated texure horizontally then place it next to its orginal.

Repeat the process until you’ve reached the other side of the canvas. Once you’ve reached the right side of the canvas repeat the process again only this time flipping the texture vertically. When the whole canvas is covered merge all the layers into one layer called background. Finally desaturate the background by going to “image > adjustments > desaturate”

Creating The Title And Navigation

Select the type tool then add your website title in the top left corner. The font and settings ive used are listed in the image below.

Once you’ve added the text add these layer styles.

Once you’ve sorted the website title on the right side add a simple text style navigation using the color #b3b3b3. On the first text link change the color to white (#ffffff).

On the link that is coloured white were going to add a hover state. Select the rounded rectangle tool with a radius of 15px.

On a new layer underneath the navigation text create a small rectangle around the link.

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

You should have something like this.

Creating The Outer Content Area

Select the rectangular marquee tool and create a big white rectangle, the rectangle should be about 850 x 700 pixels. Once you’ve created the rectangle add 15% noise by going “filter > noise > add noise”.

Once you’ve added the noise apply these layer styles.

You should have something like this.

Creating The Inner Content Area

Click the “Outer Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer.

Now add these layer styles to the new inner rectangle.

You should have something like this.

Creating The Featured Area

Click the “Inner Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer. Once filled add a 1 pixel stroke using the color #e4e4e4.

Select the rectangular marquee tool OR your prefered cutting tool, make a selection around the rectangle you just created starting from the bottom. Leave about 200pixels at the top, then hit the delete key. You should be left with a 200 pixel wide box.

Click the “Rectangle” you just cut whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 5-10 pixels then fill the selection with the color white on a new layer. Once filled add this gradient overlay.

You should have something like this.

Click the “Rectangle” you just created whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Create a new layer then go to “filter > render > clouds”, now go to “filter > pixelate > mosaic” use the settings below.

Now set the layer blend mode to “soft light” and opacity to 75%. You should have something like this.

Inside the blue rectangle add some dummy content and maybe an icon of some sort. Im using an icon from one of smashing magazine’s icon sets.

Creating The Featured Area Buttons

Create two circles either side of the featured area, make the circles small dont make them too big. Once you’ve created the circles add these layer styles.

You should have something like this.

Finish off the little buttons by adding a dark gray arrow to it.

The Dummy Content

This next part doesnt really need a “step-by-step” as its just all text done with the type tool. Create simple blue headings with subtle gray text underneath, maybe add a list or two to break the layout up abit. Leave an area at the bottom for some additional content.

In the area at the bottom create a box in the same way we did our featured area outer box. The layer styles for this new box at the bottom are also the same as the featured area outer box. Fill the outer box with some a dummy paragraph or two and maybe an icon or two. The icons ive used this time are from “wefunction”.

Creating The Footer

Select the rectangular marquee tool and create a black rectangle across the bottom of the canvas, over the wood texture. Set the fill % of the black box to 40%.

Now add these layer styles to the layer.

Using a twitter icon and a speech bubble from photoshop’s custom shapes libary, create a follow us area on the left side of the footer. The twitter icon ive used is from smashing magazine.

On the right side of the footer add a duplicate of your website title and slogan. Then add your copyright information and any other information you would find inside of the footer area.

Finished Layout

Congratulations you’ve finished the tutorial, hope you found it intresting, thanks for reading il look forward to your comments.

Dont forget to re-tweet and digg this tutorial, your help and support is much appreciated.

• Share