Design a Landing Page Mockup in Photoshop
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.
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.
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:
For the content:
For the footer:
Here is what your final image should look like
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.
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.
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.
Once it is open go to Filter> Pixelate > Crystallize and make the cell size 113 then press OK.
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.
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%.
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.
Duplicate the iPhone and resize it slightly smaller and move it behind the original iPhone layer.
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.
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.
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.
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.
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.
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.
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.
When you are finished, copy the layer style and paste it on to the other button.
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.
Remove the layer style so that you icons appear flat instead of 3D.
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”.
To give the buttons some pop I added in a drop shadow.
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.
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.
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.
