Software Layout #6

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hello everybody, welcome to another tutorial by HV-Designs. In this tutorial I’ll be showing you how to create a simplistic product layout with a green theme. Lets get going…

 

Resources Used In This Tutorial

The Finished Layout

This is what we’ll be creating, click image for a bigger view.

Software Layout #6

Creating The Document

Create a new document 1200 x 1200 pixels with a white background. Set your foreground color to #d6d6d6 and background color to #efefef then select the gradient tool with a linear gradient.

Software Layout #6

Drag the linear gradient over your canvas starting from the top, drag the linear gradient about 250 – 300 pixels down.

Software Layout #6

Creating The Header

Select the rectangular marquee tool, then drag out a selection the width of the canvas and about 160 – 170 pixels in height.

Software Layout #6

Before filling the selection set your foreground color to #483f38 and background color to #1e1916. Select the gradient tool then this time set your gradient type to reflected.

Software Layout #6

Drag the reflected gradient from the middle of the rectangle towards either the left or the right side of the canvas. Once you’ve filled the rectangle add some noise by going to “Filter > Noise > Add Noise”.

Software Layout #6

Software Layout #6

Creating The Template Title

Using the type tool add your website title and slogan inside the rectangle.

Software Layout #6

Once you’ve add your title and slogan add a drop shadow to the title using the settings below.

Software Layout #6

To one of the words in your title add a gradient overlay using the settings below.

Software Layout #6

You should have something like this.

Software Layout #6

Creating The Small Navigation

Select the rounded rectangle tool with a corner radius of 10px.

Software Layout #6

Drag out a small rounded rectangle on the right side of the canvas inside the header rectangle.

Software Layout #6

Now add the following layer styles to your rounded rectangle.

Software Layout #6

Software Layout #6

Software Layout #6

Inside the rectangle add a small selection of textual links, you should have something like this.

Software Layout #6

Creating The Main Navigation

Before creating the main navigation using the rectangular marquee tool or the single row marquee tool create two 1px lines on top of each other. Color the top line in black and the bottom line in white. Place the two lines directly underneath the header rectangle.

Software Layout #6

Using the rounded rectangle tool drag out a rectangle, keep the rectangle in the center of the line between the background and header.

Software Layout #6

Add the following layer styles to your navigation rectangle.

Software Layout #6

Software Layout #6

Software Layout #6

Still with the rounded rectangle tool create another rectangle inside the main navigation rectangle. The rectangle should be the color white and should only be half the size or smaller than the main rectangle.

Software Layout #6

Set the opacity of the small rectangle to 5%. For this next part you need to create your own custom pattern.

Create a new document 25 x 25 pixels, zoom in as much as you can then select the pencil tool. Using the pencil tool and the color black mimic the image below.

Software Layout #6

Once you’ve created the pattern go to “Edit > Define Pattern”, save the custom pattern has “Diagonal Lines”.

Head back over to your original canvas and load a selection around the main navigation rectangle. You can load a selection by selecting the layer inside the layers window then go to ” Select > Load Selection”.

Once you’ve loaded the selection fill your selection on a new layer using the paint bucket tool (Don’t forget to set paint bucket option to pattern). Finally set the pattern layers opacity to 1%.

Software Layout #6

Creating The Search

Using the type tool add your navigation items, in the space left over on the right hand side this is where we’ll be adding our search field.

Using the rounded rectangle tool with a radius of 5px create a small rectangle in the space.

Software Layout #6

Add the following layer styles to your search field rectangle.

Software Layout #6

Software Layout #6

Software Layout #6

Inside your search field add some text and a little icon on the right. I’ve chosen a small magnifying glass from the custom shapes library.

Software Layout #6

Creating The Featured Area

Underneath the main navigation were going to create a featured area to feature the product in question. Start off with the text tool and add a nice big title followed by a couple of paragraphs.

Software Layout #6

On the right side of the text create your product in the form of a software box. For this tutorial I’ve just used a blank software box from HERE. You can take more time in creating your very own custom software box, or simply use the icon from the link above.

Software Layout #6

Once you’ve added your content box duplicate it, then drag the duplicated software box behind its original. Free transform the software box by pressing “CTRL + T”, resize your duplicated box by a fraction or two then blur it by 1px by going to “Filter > Blur > Guassian Blur”.

Software Layout #6

Finally duplicate your blurred software box then drag the layer behind its original. Blur the third software box by 1 px once more then resize it again by a fraction or two. You should have something like this.

Software Layout #6

Were now going to create two small buttons, select the rounded rectangle tool with a radius of 10px. Drag out two small button sized rectangles then add the same layer styles as the main navigation.

Software Layout #6

On your two buttons add the diagonal pattern the same as the main navigation then label the two buttons accordingly.

Software Layout #6

Creating The Divider

Using the single row marquee tool or the rectangular marquee tool create two 1px lines on top of each other, color the top line in #c9c9c9 then the bottom line in white (#ffffff).

Software Layout #6

Make a selection directly underneath your two lines using the rectangular marquee tool.

Software Layout #6

Set your foreground color to #e6e6e6 and background color to #efefef then select the gradient tool with a linear gradient. Drag downwards from the top of the selection releasing the mouse button just short of the bottom of the selection.

Software Layout #6

We now need to blend the two lines and the little gradient we added into the background on both the left and right sides.

Add a layer mask to one of the layers, set your foreground color to white and background color to black. Select the gradient tool with a reflected gradient then drag the gradient from the center of the element you have chosen first outwards to either the left or right. The element you have chosen should be blending in with the background on both sides, left and right.

Do this for all 3 layers, top line, bottom line and gradient.

Software Layout #6

Adding The Content

On the left side of the canvas underneath the divider create a rounded rectangle with the rounded rectangle tool. The rectangle doesn’t have to be big as it will just hold a small list of features.

Software Layout #6

The layer styles are as follows.

Software Layout #6

Software Layout #6

Software Layout #6

Inside the rounded rectangle add a simple list with green bullet points, separate each list item with its own divider.

Software Layout #6

On the right side of the box add a heading with a short paragraph underneath. Then underneath the paragraph add some icons, I’ve used the “Classy Icon Set” from “Dryicons”.

Software Layout #6

Creating The Footer

Duplicate the header and the bottom divider then drag it all the way down to the bottom of the canvas. Select the duplicated header layer then press CTRL+T to free transform the header. Resize the height of the rectangle to fit your footer content.

Move the duplicated divider line to the top of the duplicated header. Finally add your footer text to your footer.

Software Layout #6

That’s it all done, hope you enjoyed this tutorial. If you did enjoy this tutorial then maybe you would consider digging and retweeting it.

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.