Design a Landing Page Mockup in Photoshop

Gabrielle Gosha
Tweet

The landing page is a crucial element in regards to web design. Its effectiveness can translate to increased conversions, increased profits and sales or a failing business. Most times your website visitors will see your landing page first so it is important to make a good impression. While you may know that the landing page’s main goal is to get the visitor to take action, whether it is downloading an app or buying a product, it doesn’t mean you know how to design one. You can learn more about the Anatomy of an Effective Landing Page.

In today’s tutorial you will learn how to design your own mockup landing page in Photoshop. This will allow you to set up elements in a desirable manner and see what works best before you begin the actual website building, so let’s get started.

Resources That You Need

iPhone 4s Vector
Candy Blur Wallpaper
Web Icons

Step 1 New Canvas

Before we begin working on our design we need to first create a new document. Go to File > New or either press Ctrl + N and give your canvas the dimensions of 1200px x 800px and press OK.
lp1

Step 2 Fill Background

Create a new layer to add your background color. Change your foreground color to #179b84 and fill in your empty layer.
lp2

Step 3 Guidelines

We need to create some guidelines in order to mark here our content will go. To create your guidelines you need to go to View > New Guide. Follow the images below to get your guidelines set up.

For the header:
lp3

For the content:
lp3-1

For the footer:
lp3-2

Here is what your final image should look like
lp3-3

Step 4 Header

Since we now have an idea where our elements are going to go thanks to our guidelines we can now block out our header. Create a new layer and change your foreground color to #2d473f. Use the marquee tool to fill in the top portion of your canvas where your header should go.
lp4

Step 5 Footer

Next create another layer, this will be for your footer. Now using the same color in step 4 use the Rectangular Marquee Tool to select the footer section and fill it in.
lp5

Step 6 Main Content Wallpaper

We will be using an image in the largest section of our design. You will need to open the wallpaper image first.
lp6

Once it is open go to Filter> Pixelate > Crystallize and make the cell size 113 then press OK.
lp6-1

Making sure your foreground color is #2d473f and your background color is #179b84 go to the Blending Options menu. Check the Gradient Overlay box and change the settings to match the ones in the image below.
lp6-2

When you have your filters rendered out, copy and paste the image into the main content section of your landing page and lower the opacity to 50%.
lp6-3

Step 7 iPhone

Open up the iPhone 4s vector and paste it to your canvas. You will notice that it is large so you will need to scale it down by using the Transform Tool or Ctrl + T. Move the iPhone towards the left side of the screen in the main content box.
lp7

Duplicate the iPhone and resize it slightly smaller and move it behind the original iPhone layer.
lp7-1

Add a drop shadow to both iPhones by double clicking on both layers to access the Blending Options menu and entering the correct settings as shown below once you check the Drop Shadow box.
lp7-2

Step 8 Ribbon Banner

To begin on our banner we need to first create a new layer underneath our two iPhones. Next use the Rectangular Marquee Tool to create a long skinny banner in the middle of the main content box. Fill it in with #ffb72d.
lp8

Step 9 Warp Ribbon

We want to add some bend to our ribbon so we need to warp it by going to Edit > Transform > Warp. Manipulate the points so you have something that looks like this. Press Enter for effects to take place.
lp9

Step 10 Header Title

Our header needs to be filled in so we are going to do that now. With your desired font and color enter in the title and slogan line in the header and main content area. In this case I will be using the typeface Drawing Guides and the color #ffffff.
lp10

Step 11 Logo

You can add a logo to your landing page if you want to. For this design I simply duplicated my yellow banner and scaled it down to create the Crayo-Apps logo.
lp11

Step 12 Buttons

Successful landing pages have call to action buttons or CTAs so we are going to make some. With the Rounded Rectangle Tool we are going to create two buttons under the ribbon in our content box. Make sure the radius is at 20px and one button is #ffb82d and the other one is #2d473f.
lp12

Step 13 Blending Options

To make the buttons stand out we are going to add effects to them. Open up the Blending Options menu for one of the buttons by either double clicking on it or by right clicking on it. Check the boxes for Gradient Overlay and Inner Shadow. Change the settings so that they match the images below.
lp13

lp13-1

When you are finished, copy the layer style and paste it on to the other button.
lp13-2

Step 14 Web Icons

Other than text we want to add icons to our buttons. To do this you need to first download the web icons PSD file and then open it up. We will be using the ‘trolley’ icon and the ‘phone’ icon. Place these icons on the left side of your button.
lp14

Remove the layer style so that you icons appear flat instead of 3D.
lp14-1

Step 15 Button Text

Using the same typeface you used for your header use it to fill in your buttons. In this case I typed “Download App” and “Visit Store”.
lp15

To give the buttons some pop I added in a drop shadow.
lp15-1

Step 16 Text Content

We need to now put some text in our smaller content box but first we need a guideline to make sure that everything is even. Go to View > New Guide and then check the Horizontal option and make the position 600px.
lp16

Once more using the same text add in your desired titles and space them evenly apart. Make sure that they are sitting on the guideline.
lp16-1

Step 17 Finish

To finish up your landing page you will need to fill in the rest of the important information such as app features and a little about the company or app. You will also need to add images to your iPhone vectors so they aren’t blank. You can use whatever images you want. In this case I used images from previous tutorials and other graphic design work that I have done. Once all the details are added you are done with your design.
landing-page

Download PSD File

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Doris Roberson

    Honestly, I don’t get it.
    There are these great online platforms like Wix or Webzai that let you create landing pages/websites.
    These platforms have all the features to create the same landing page you described in your example (and much better ones) in minutes, and, instead of a PSD you get an actual website.
    I really think designers (especially web designers) should start looking outside of their Photoshop bubble and make use of some of some of the other available (free) tools.

  • Chris Carr

    Honestly, I don’t get it.
    There are these great online platforms like Wix or Webzai that let you create landing pages/websites.
    These platforms have all the features to create the same landing page you described in your example (and much better ones) in minutes, and, instead of a PSD you get an actual website.
    I really think designers (especially web designers) should start looking outside of their Photoshop bubble and make use of some of some of the other available (free) tools.

    • Anonymous

      Interesting point, Chris. I’ll see if we can get a SitePoint article up along those lines.

      • Doris Roberson

        Hey SitePointEd

        Thank you, I appreciate it :D.
        I would be glad be a resource for that article. I really have a lot more to say on the subject.
        It is a very important market trend,that freelances should understand use to their advantage..

  • Alex Barylski

    Whats there not to get? The title clearly says “Design a landing page mockup” – Wix isn’t a designer it’s a template factory. You enter in basic parameters and it generates a web site for you. If you are comfortable with a web site whose brand/style is the same as 50k other web sites (hopefully none in your area) than Wix works, otherwise you need to roll up your creative sleeves and design something more bespoke.

    • Doris Roberson

      Alex,
      I don’t think you got to the bottom of what I’m saying.
      I’m saying, be very creative, start from scratch and design the most unique site you can imagine.
      The thing is, you don’t have to do all the work twice (once in Photoshop and again writing code).
      Think about it, you can price your work as if you were writing code, and, work half the time!
      I agree with you about Wix, their editor is very limiting and that is fine because it was made for the average Joe and not for designers.
      Other site builders like Webydo and Webzai have developed platforms especially for designers.
      I personally like Webzai.com better. Their site builder is completely free layout, it looks more like Photoshop than Wix, and it lets you do almost everything you can think of.
      The big plus side for me is their customer relations, they give a real personal touch. As a designer, I need fast answers because I have deadlines and clients on my back.
      In their latest update, they developed a feature that I suggested. They actually listen to my suggestions!!!
      Anyway Alex, the point really is, these platforms help you lose your reliance on programmers. And if you are a freelancer that is a big deal.

      • Maxx

        Maybe it’s all about messy code, that give you all these WYSIWYG builders?

  • Joan

    Actually, I agree with both of you guys.
    I thinks that you should use platforms like wix, webydo and webzai for building the landing page itself, and use Photoshop for creating the images on the site.
    These platforms gives you the ability to publish and share the website in seconds some of them them even give you the html and css. Still, there is no replacing Photoshop for creating the images of the landing page.
    By the way, webzai really impressed me, thanks for the recommendation.

  • Alex Barylski

    That was my point. Wix, Artisteer, WordPress, whatever your poison, they are site “builders” not “designers”. Photoshop and perhaps to a far lesser extent GIMP are the defacto designers, IMO.

    p.s-I am a developer/programmer so having services that remove dependencies on “us” do not work in my favor so perhaps I am bias :p

    Regards,
    Alex

  • Doris Roberson

    Site point, I am impressed :)
    When I wrote my first comment i was expressing some of my frustration and wasn’t expecting a article would come out of it, but i’m very glad it did.
    I hope that web professionals will start to see that these site builders represent progress and that we have to keep up.