Create a Fantastic Landing Page for Your Next Product Using Photoshop

Let us start the week with another PSD tutorial here at 1stwebdesigner! We will create a Product layout using Photoshop in a step-by-step manner. Techniques will be discussed in this tutorial which include the use of proper spacing, typography, and colors. Keep in mind that these techniques can also benefit you when you’re working on other designs in the future, so keep your mind focused and do not skip a single word!

Resources you will need to complete this tutorial:

Here is what we will be making, click on the image for a full preview:

Step 1: Working with the Site Structure

Before we get started, download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are visible by pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step 2: Working with the Header

Rename layer1 folder (group) Header, create a new layer and name it header_bg (Create groups for every major section for example you should group: Header, Navigation, Footer layers together to help stay better organized).

Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below and fill it with #191919

Step 3: Working with the Logo

Create a folder inside Header group and name it  Logo, put all your logo related layers there.

Select Text Tool (T) and put up your Site Name and Slogan.

  • Site Name: #e0cf39
  • Slogan: #ffffff

Separator line: Select Line Tool(U) color #414141.

Step 4: Working with Navigation

Create a new group and name it Navigation, put all your navigation related layers there.

Select Text Tool (T) and add the following text: HOME, PRODUCTS, SUPPORT, ABOUT, and CONTACT.

Create a layer and name it Hover.

Select the Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #282828

Create another layer at the top of the Hover group. Follow as shown in the screenshot below and fill it with #dfce3e

Step 5: Working with Featured Section

Create a new group and name it Featured_Section, put all your Featured-related layers there.

  • Create another guideline, 375px Horizontal.
  • Set the foreground color to #dcdcdc and background to #ffffff
  • Select Linear Gradient

Create another layer and name it img_holder.

Select the Rectangular Marquee Tool (M), make a selection as shown in the screenshot below and fill it with #414141.

Add this Blending Option

Stroke

Open up the 3dbox generator you have downloaded. Create another layer at the top of img_holder and name it img.

Alt + Click between the two layers to link the img to img_holder.

Below the img_holder create another layer name it shadow.

Select the Rectangular Marquee Tool(U), make a selection as shown in the screenshot below and fill it with #000000.

Ctrl + T to transform. Now, Left Click and choose perspective.

Go to Filter > Blur > Gaussian Blur.

Select the Text Tool (T), Grab some lorem ipsum text. Follow the text format as shown in the screenshot below.

Select the Elliptical Marquee Tool (M), make 4 small circles as shown in the screenshot bellow and fill it with #b2b2b2. For the hover fill it with #1b1b1b.

Step 6: Working with Buttons

Create a new group and name it button, put all your button-related layers there.

Select Rounded Rectangle Tool (U), set the Radius to 5px. Create a layer named btn_bg.

Add this Blending Option

Inner Shadow

Gradient Overlay

  • #ffffff
  • #dcdcdc
  • #a2a2a2
  • #d7d5d5
  • #ffffff


Stroke

Select Text Tool (T)

Create another layer at the top of btn_bg and name it shine.

  • Ctrl + Click layer btn_bg
  • Select Brush Tool (B), Softness to 0%
  • Brush at the center of the selection

Now let’s make a shadow on our button. Repeat the same step as we did on our slide show shadow.
When you’re done duplicate Button folder and place give it a 20px distance.

Step 7: Working with Features

Create a folder named Features, put all your features-related layers there.

Open up the icons you have downloaded. Grab 6 icons that you like.

Place it as shown in this screenshot below and follow the text format.

Step 8: Working with Newsletter

Create a new group and name it news_letter, place all your newsletter-related layers there.

Create another layer named news_bg

Select the Rectangular Marquee Tool (M), and make a selection as shown in the screenshot below.

Select the Gradient Tool (G), set it to Pattern.


Add this Blending Option

Gradient Overlay

  • #000000
  • #ffffff

CTRL+ T to transform, right-click and choose warp.

It’s up to you how you do the warping. In the image below I curve a little at the top left and a tiny curve on the right side and bottom.

Create another folder below new_bg and name it Shadow

Select Pen Tool(P), make a shape as shown below and fill it white #000000.

Go to Filter > Blur > Gaussian Blur.

Set the shadow layer opacity to 50%.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

  • Sign Up For Free: #f4c714
  • Name & E-mail: #403f3f

Step 8: Working with About Us

Create a folder named About_us, place all your about us related layers there.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

Step 9: Working with Footer

Create a new group and name it Footer, put all your footer related layers there.

Create a guideline 990px, horizontal.

Make a selection as shown in the screen shot below and fill it with #282828.

Create a folder named Latest News.

Select Text Tool (T), follow the text format as shown in the screenshot below.

Create a folder and name it Recent_tweets.

Select Text Tool (T), follow the text format as shown in the screen shot below.

Create a folder and name it Get Connected.

Open up the social icons you have downloaded and grab Facebook, Twitter and Email.

Select Text Tool (T), follow the text format as shown below.

Select Rectangle Tool (U), set the color to #191919 and place it as shown in the screenshot below.

I also added copyright text and some footer links using Text Tool (T) 11pt color #9d9d9d

Done! I hope you learned something new here. Don’t forget to comment and suggest better ways on how to do things! If you have a tutorial request, or a question feel free to leave them as a comment below. Thanks!

Final Preview

Michael John Burns

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Mitch says

    Hey, great tutorial! I only got 1 question: where can I get the patterns (stripes) of the paper?

  2. Stan says

    Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup. Do you have any solutions to stop hackers?

  3. Bart says

    We are in the process of setting up landing pages as well. Does this process have any good search engine optimization value? If so I would like to apply this method to at least one of our landing pages.

  4. Sam says

    Glad to found such step by step landing page design process in photoshop, I learn a lot from this post, thanks for your hard work.

  5. Ken Jansen says

    Wonderful Tutorial. I have seen those cool graphic boxes all over the web and NOW I know how they did it. I like the graphic landing page idea too. Does having the landing page mostly be in photoshop lower your SEO for the page or do you not really care if it is a landing page and they would not have found the landing page without already finding your site?

    Thank you.

  6. Adcuda says

    Those light blue, almost teal-like horizontal stripes were a little confusing at first, but then they grew on me. I like the diversity.

  7. says

    Nice tut … very clean and easy to follow …
    Using the 960 to layout the page is definitely a plus …

    Thanks for the learn

    • benj says

      What I pulled form your page was that important things should be above the fold, not that everything has to be within 500px. A whole page that’s only 500px tall is shooting yourself in the foot.

  8. David Mejias says

    I like the result, it is clean and elegant.

    But why use the system x?, I greatly limiting design, though falicite things for the code.