Software Layout #5

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.

Step1

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.

Step2

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.

Step3

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”

Step4

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.

Step5

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

Step6

Step7

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).

Step8

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

Step9

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

Step10

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

Step11

Step12

You should have something like this.

Step13

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”.

Step14

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

Step15

Step16

Step17

You should have something like this.

Step18

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.

software layout step19

Now add these layer styles to the new inner rectangle.

Step20

Step21

Step22

Step23

You should have something like this.

Step24

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.

Step25

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.

Step26

You should have something like this.

Step27

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.

Step28

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

Step29

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.

Step30

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.

Step31

Step32

Step33

You should have something like this.

Step34

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

Step35

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.

Step36

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”.

Step37

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%.

Step38

Now add these layer styles to the layer.

Step39

Step40

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.

Step41

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.

Step42

Finished Layout

Step43

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.