Create a Fantastic Landing Page for Your Next Product Using Photoshop

Posted in Tutorials, Web Interface • Posted on 24 Comments

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

37 Written ArticlesWebsiteGoogle+

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.

24 Comments Best Comments First
  • David Mejias

    Monday, February 7th, 2011 15:32

    1

    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.

    0
  • Tutsnow

    Wednesday, February 9th, 2011 13:25

    8

    Sleek Design… Thanks for sharing!

    0
  • Pushpinder Bagga

    Friday, February 11th, 2011 01:45

    9

    waiting for the psd-html tutorial – cheers!

    0
  • djavupixel

    Friday, February 11th, 2011 19:13

    10

    Good Tutorial and nice layout!
    I would also recommend reading this article as a landing page should be a page within 500pixel height, etc…
    http://bit.ly/9h9eB7

    0
    • benj

      Monday, April 18th, 2011 15:14

      15

      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.

      0
  • Diti

    Sunday, February 13th, 2011 22:03

    11

    Not bad, but could be better: I would suggest you to take care of vertical rhythm.

    0
  • Dainis Graveris

    Monday, February 7th, 2011 18:54

    2

    @David what did you mean by system x? Didn’t quite get you, though I am glad you enjoyed tutorial, Michael did good work once again :)

    0
    • David Mejias

      Tuesday, February 8th, 2011 09:46

      6

      960 Grid System sorry xD

      0
  • Theo

    Monday, February 7th, 2011 20:41

    3

    Very good tutorial, it woul be nice to see a PSD to HTML+CSS version of it!

    0
  • Dainis Graveris

    Tuesday, February 8th, 2011 01:32

    4

    @Theo and probably you soon will see :)

    0
    • Theo

      Tuesday, February 8th, 2011 20:56

      7

      Looking forward to it, thanks!

      0
  • Mitesh

    Tuesday, February 8th, 2011 07:49

    5

    Excellent Tutorial and can’t wait to the XHTML/CSS tutorial on it.

    0
  • Flt Lft

    Thursday, March 17th, 2011 11:25

    12

    very easy to follow.. thx a lot

    0
  • omagus

    Thursday, April 7th, 2011 07:24

    13

    clean and elegant..!
    i like it..!

    0
  • Bart

    Tuesday, December 20th, 2011 20:09

    21

    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.

    0
  • Matt

    Wednesday, January 11th, 2012 16:08

    22

    Really very easy to follow.. thanks for share it

    0
  • Stan

    Tuesday, January 31st, 2012 20:38

    23

    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?

    0
  • Mitch

    Monday, April 9th, 2012 15:42

    24

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

    0
  • wick

    Friday, December 2nd, 2011 13:10

    20

    the shadow is fffaake, not real and the perspective too =)

    0
  • Sam

    Thursday, December 1st, 2011 17:45

    19

    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.

    0
  • Edward

    Sunday, April 17th, 2011 06:33

    14

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

    Thanks for the learn

    0
  • ad

    Saturday, June 11th, 2011 02:56

    16

    where to get the pattern?

    0
  • Ken Jansen

    Friday, August 19th, 2011 01:42

    18

    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.

    0
  • Adcuda

    Tuesday, June 14th, 2011 18:56

    17

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

    0
  • Mitch

    Monday, April 9th, 2012 15:42

    24

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

    0
  • Stan

    Tuesday, January 31st, 2012 20:38

    23

    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?

    0
  • Matt

    Wednesday, January 11th, 2012 16:08

    22

    Really very easy to follow.. thanks for share it

    0
  • Bart

    Tuesday, December 20th, 2011 20:09

    21

    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.

    0
  • wick

    Friday, December 2nd, 2011 13:10

    20

    the shadow is fffaake, not real and the perspective too =)

    0
  • Sam

    Thursday, December 1st, 2011 17:45

    19

    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.

    0
  • Ken Jansen

    Friday, August 19th, 2011 01:42

    18

    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.

    0
  • Adcuda

    Tuesday, June 14th, 2011 18:56

    17

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

    0
  • ad

    Saturday, June 11th, 2011 02:56

    16

    where to get the pattern?

    0
  • Edward

    Sunday, April 17th, 2011 06:33

    14

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

    Thanks for the learn

    0
  • omagus

    Thursday, April 7th, 2011 07:24

    13

    clean and elegant..!
    i like it..!

    0
  • Flt Lft

    Thursday, March 17th, 2011 11:25

    12

    very easy to follow.. thx a lot

    0
  • Diti

    Sunday, February 13th, 2011 22:03

    11

    Not bad, but could be better: I would suggest you to take care of vertical rhythm.

    0
  • djavupixel

    Friday, February 11th, 2011 19:13

    10

    Good Tutorial and nice layout!
    I would also recommend reading this article as a landing page should be a page within 500pixel height, etc…
    http://bit.ly/9h9eB7

    0
    • benj

      Monday, April 18th, 2011 15:14

      15

      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.

      0
  • Pushpinder Bagga

    Friday, February 11th, 2011 01:45

    9

    waiting for the psd-html tutorial – cheers!

    0
  • Tutsnow

    Wednesday, February 9th, 2011 13:25

    8

    Sleek Design… Thanks for sharing!

    0
  • Mitesh

    Tuesday, February 8th, 2011 07:49

    5

    Excellent Tutorial and can’t wait to the XHTML/CSS tutorial on it.

    0
  • Dainis Graveris

    Tuesday, February 8th, 2011 01:32

    4

    @Theo and probably you soon will see :)

    0
    • Theo

      Tuesday, February 8th, 2011 20:56

      7

      Looking forward to it, thanks!

      0
  • Theo

    Monday, February 7th, 2011 20:41

    3

    Very good tutorial, it woul be nice to see a PSD to HTML+CSS version of it!

    0
  • Dainis Graveris

    Monday, February 7th, 2011 18:54

    2

    @David what did you mean by system x? Didn’t quite get you, though I am glad you enjoyed tutorial, Michael did good work once again :)

    0
    • David Mejias

      Tuesday, February 8th, 2011 09:46

      6

      960 Grid System sorry xD

      0
  • David Mejias

    Monday, February 7th, 2011 15:32

    1

    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.

    0

Comments are closed.

54.196.159.11 - unknown - unknown - US