Hello everybody welcome to a new tutorial from HV-Designs. In this tutorial ill be walking you through the process of creating a product layout.

 

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

• Woofunction 178 Amazing Icons

Lets Get Started

Create a new document 1200 x 1225 pixels with a white background. Set your foreground color to #eeeff3 then select the rectangular marquee tool.

Once you’ve selected the rectangular marquee tool make a selection about 80px in height spanning the width of your canvas. Fill the selection with your foreground color.

Creating The Header

Select the text tool then add your website title and slogan inside the rectangle using the color #70767d.

After your website title create a small divider, to do this zoom in then make two 1px lines next to each other. Color the first line in black (#000000) and the second line in white (#ffffff), once you’ve filled the lines set the layer blend mode to soft light.

Creating The Navigation

Using the text tool create a simple textual navigation, use the color #70767d for the text then add a drop shadow using the settings below.

The result.

On a layer underneath your navigation text create a rounded rectangle using the rounded rectangle tool. Color the rectangle in the color #e0dfe2, your should have something like this.

Creating The Product Featured Area

Select the rectangular marquee tool and make a selection about 370px in height that also spans the width of your canvas. Fill the selection with any color then add a gradient overlay using the settings below.

Once you’ve added the gradient overlay right-click the layer and go to “Convert To Smart Object”. Now go to “Filter > Noise > Add Noise”, use the settings below.

You should have something like this.

At the top of the featured area create a divider using two 1px lines colored black and white. Set the layer blend mode to overlay.

Once you’ve create the divider line at the top of the featured area, duplicate the layer and drag it to the bottom of the featured area.

Adding Content To The Featured Area

Inside the featured area add a screenshot of your product. Make the product screenshot overlap on to the background past the featured rectangle.

Once you’ve added your screenshot add a drop shadow using the settings below.

Above your screenshot add some text, maybe a title or something along those lines.

Once you’ve added your text add a drop shadow using the settings below.

On the right side of the screenshot add a couple of icons from the icon pack provided in the resources list. Underneath the icons add a smaller title with a couple of paragraphs of text. You should have something like this.

Creating The Download Button

Using the rounded rectangle tool, drag out a smallish rectangle. Again make the button overlap the featured area and background.

Now add the following layer styles to your button.

You should have something like this.

Select the type tool and add your desired text inside the button. Once you’ve added your text add a drop shadow to the text layer using the settings below.

You should have something like this.

You can now duplicate the button as many times as you wish.

Creating The Content Area

Set your foreground color to #f1eeea and background color to #ffffff then select the gradient tool. With the gradient tool select select a linear gradient then drag the gradient over your background layer starting from just above the featured area and dragging about 200 pixels downwards.

Now underneath the product screenshot add a small title saying “From The Blog”.

Underneath your small title add one of your buttons which we created earlier. Re size the button quite a bit then add a month of the year inside.

On the right side of the month box add a post title with a description underneath.

Repeat the steps as many times as need until you get a small blog.

Creating The Gallery

Create a new text heading saying “In The Gallery” then underneath add 3 screenshots of your product. I’ve just used my current screenshot for the purpose of this tutorial.

Finish off the gallery by adding a small paragraph underneath the screenshots.

Creating The Seperators

Select the type tool and keep the dash key (-) pressed until you get a row of dashes. Place the horizontal dashes in between the blog and the gallery.

Repeat the process once more only this time make the separator a lot longer. Once your happy with the separator rotate it by 90 degrees and place it along side the left content.

Finish off the separator by adding a layer mask. Once you’ve added the layer mask drag a linear gradient from about about 50 pixels from the top, dragging upwards to the top of the separator. The separator should blend in with the background.

More Content

Finish off the content area on the right by adding more product related content building up your layout. I’ve chosen to go for a demo section where you can see the product in action.

Creating The Footer

Select the rectangular marquee tool and make a selection around the last bit of space at the bottom of your canvas. Fill the selection with the color #b8bdc8 then add a inner shadow and stroke using the settings below.

Once you’ve added the layer styles press “Ctrl + T” to enter into free transform mode. Select the left anchor point and drag out past the canvas. Repeat the process for the right anchor.

Finally add your footer text somewhere on the footer area.

That’s it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.