Create a Clean and Effective Product Layout

by TutsArena - Templates, Tutorials

This tutorial will show you how to create a clean and effective product design in Photoshop. This template can also be easily converted into a portfolio layout if desired. We hope you enjoy following this tutorial as much as we did making it!

In today’s tutorial we’re going to show you how to create a clean and effective product layout in Photoshop.  This layout can also be easily converted into a portfolio layout.

Here’s what we’ll be creating:
Brainpulse

Stuff you’ll need:

Step One: Create a new document

Create a new document with a size of 1024×1058 px. Then select the Paint Bucket Tool (G) and fill Layer 1 (Background) with #FFFFFF (white).

Step Two: Create a “top bar” navigation

Create a new layer, select the Marquee Tool (M) and create a horizontal bar with dimensions 1024×39 px.  Now, select the Gradient Tool (G) and draw a vertical gradient with colors #F3F3F3 to #E4E4E4 in your new selection.  Next we’ll add a slight drop shadow to this bar to give it a little bit of character.
Brain Pulse Drop Shadow

Now, this new horizontal “top bar” will serve as our navigation as well as a branding for our company.  Add some navigation text and your company name.  Let’s style our company name.
Brainpulse 1
For the “BUY” button, we just created a new square shape with the color #000000 and set it’s Blending Mode to Overlay.

Step Three: Adding the identity

In this step we’re simply going to add the product icon, name and a short description about the product.  Get ready to use your typography skills!
Brainpulse 2
You can see we’ve added our product logo and text already, no fancy effects here, just plain old branding.

Before we go to the next step, let’s go ahead and split this layout in half with a Gradient.  Select your Gradient Tool (G) and create a new layer.  About 375 px from the top of your document, create a vertical gradient “Foreground to Transparent” with the color #EAEAEA.  You should end up with something like this:
Brainpulse 3

Step Four: Add some aesthetics

In this step, we’ll be adding a main product image and some buttons to direct customers to key points of the website.

Let’s start by adding our main product image.  Strictly for the sake of this tutorial we’ve used an iPhone image straight from Apple’s website.  However, this is where you’ll use an image of your product (if, by chance, you have an iPhone app, your result will be very similar).
Brainpulse 4
Now, time for those buttons we were just talking about.  Select the Rounded Rectangle Tool (U) and create a new button shape, about 195×25 px and name this layer “Button”.  Now select the Gradient Tool (G) and fill your new button shape with a vertical gradient, #6E6E6E to #2E2E2E.  Now, add these styles:
brainpulseinnershadow
brainpulsestroke

Now, you’ve got something close to:
brainpulse5
Don’t forget to add some text to your buttons!
brainpulse42

Step Five: Adding content text

Being a more typographic-based layout, this is the actual meat of the template.  All of the important product info will be at the prospecting clients’ fingertips.  This part will go quick because there is no styling, just plaintext.  However, the way it is positioned will make the template look great.

You’ll want to grasp attention with your bolder headers and lead them on with insightful information.
brainpulse61
We also added a few images, as you can see, just to add some flare.  Your potential customers aren’t going to want to read a novel, keep the text bits short and sweet and try to keep them symmetric.

Step Six: Adding a “Features” list

We’re going to add a quick list that displays cool features about our product, we’ll even give it some icons to match.  If you haven’t already, go download FamFamFam.com’s Silk Icon Set.

Select your Rectangular Marquee Tool (M) and create a new layer for the box shape, about 340×385 px.  Fill your new shape with #F5F5F5. Then add a drop shadow to this box to make it stick out:
brainpulsedropshadow2

Your “features” box should look something like this:
brainpulse7

Now, it’s your turn to pick some icons you like and add the features of your product to the box.  Make sure the icons have a general feel for that the feature is.  You don’t want to be talking about the price and use a rainbow icon.
brainpulse8

Step Seven: Adding copyright information

In this step, we’ll be adding copyright information to the bottom of the layout.  If you feel you’d rather add a footer, feel free to do so.  We wanted to keep the simplistic feel of the template all the way down to the bottom so we’re simply adding some text for copyright information.

brainpulse9

And that’s it ladies and gents!

We hope you were able to follow along with this tutorial, also, be sure to download the PSD file just in case you didn’t understand something we did.

Thanks for reading!

Check out these other tutorials we’ve written:

Download!

About the author

TutsArena is dedicated to providing the best, free web design tutorials.


Visit TutsArena's Website | All Articles From This Author

39 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.