In this tutorial, we’ll learn how to create a landing page (also known as a lead capture page or lander) in Adobe Photoshop. We’ll talk about layout techniques as well as layer styles and typography to make our landing page design super eye-catching.
Here is what we will create today
What is a Landing Page?
A landing page is essentially a page that comes up after you click on an advertisement. They play a very important part in selling a product or a service. The main role of a landing page is to convert visitors into customers. Landing pages are also useful for marketing analysts to calculate conversion rates and CTR to determine the success of an advertisement.
For landing pages to reach their goals it is common practice and a crucial decision to use AIDA. AIDA is a marketing acronym that describes a series of events that happen when a user engages with an advertisement.
- A – Attention: attract the attention of the customer.
- I – Interest: raise customer interest by focusing on and demonstrating advantages and benefits.
- D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
- A – Action: lead customers towards taking action and/or purchasing.
We will use the AIDA principle in this tutorial, so make sure it’s settled.
To learn more about landing pages, please visit the Wikipedia page.
Let’s Create our Landing Page!
Okay. In this tutorial, we’re going to be creating a landing page design for a fictional WordPress Theme. Let’s call it… well, call it whatever you like, actually. So, open up Adobe Photoshop, and create a new document measuring 1200×1000 pixels, with 72dpi resolution, and RGB color mode.
Set the following vertical guides: 120px, 600px, 1080px. These will constrain our content to be 960px wide.
Step 1 – Background
Go over to the View menu and click on New Guide. Add a horizontal guide to 600 pixels. We’ll use this line to keep the most important content above it. This is a graphic design concept related to the print industry going by the name of “Above the Fold”.
To learn more about the Above the Fold principle, please refer to the Wikipedia page.
Create a new layer, then select the Marquee Tool (M) and draw a rectangle from this line up that covers the whole page. We need to pick a fill color. The color palette of the landing should actually match the product’s color (if it has one. Or, in some terms it should be related to the product. Like if you’re designing a landing page for, let’s say, air-conditioners, you would use a sky-blue theme not a pink-purple combination, right?
I’ll use the screenshot of my own WordPress theme for the sake this tutorial, however you can use your own website template if you have one.
If you look at the screenshot, you can see that darker shades of blue are dominating. Therefore, we could use a light, bright blue to enhance the look of the theme. I’ll be using HSB(205, 80,90) HEX(#2E99E5) for the background. Fill the selection with this color.
Select over the remaining white space and fill the Background layer with a dark grey #393d40.
Step 2 – Title
The title of our site should be the theme’s name itself. My theme’s name is actually SDB (goes for SzabokaDesigns Blog). Let’s use a more creative theme name here, let’s say Themisto. Themisto is one of Jupiter’s moons and it could be a great theme name, too.
Let’s pick a font before touching anything. Depending on the subject you’re designing your landing page for, it could be super-varying.
For title I’ll use ChunkFive. You can download it for free, here. It’s an amazing font just perfect for titles and headlines. Grab the Type Tool (T), and type “Themisto” or whatever name you prefer. I’m using a font size of 80px, and white color. Position it to the left side guide, and leave about 70 pixels of padding from the top.
Step 3 – Headline
Writing a good headline is paramount for a landing page to reach its goals. When users reach your landing page, the first thing that catches their eyes is the title and headline. Without a good headline, your landing page would fail to convert visitors into customers.
Let me give you a simple example. If we were to write “Yet another WordPress theme”, nobody would even look at the features and benefit list, they would immediately close the page. However, if we got up with something more creative like “A free responsive HTML5 WordPress theme”, the user would more likely to be committed to the site and would almost surely complete our goal.
Okay. What font? Well our title is already popping out nicely, that’s great. However if we used that font here, too, that would be too much I believe. So we should pick a font that still has that impact and can live with our title font. I’ll pick Ubuntu Condensed as it’s a great looking font with very good legibility. We can also turn the Condensed font to our advantage; because the font is condensed and it takes up less space horizontally, we can implement a larger font-size, therefore making the impact bigger.
Let’s type in some catchy headline like we discussed just now: “A Free Responsive HTML5 WordPress Theme”. I’m using 32pt font-size, still white color and -30 tracking.
By this point, we have successfully passed AIDA’s first event: Attention/Awareness. The user came to the site, took a look at the title and headline, and then immediately recognized that this site is about a WordPress theme.
Step 4 – Advantages & Benefits
According to the second point of AIDA, let’s now tell the visitors how they can benefit from our theme; what they will get by downloading, and how they can use the theme to their advantage.
We’re going to create a list here. It is best to have a list of short, concise phrases than having a long, boring paragraph of text. Users tend to read short lines, they won’t read big chunks of text by nature. So, grab the type tool again, set the font to a generic one like Verdana, Arial, or any standard sans-serif you like. I’m using Verdana with 16pt font size, 36px leading and a very bright blue color #DAE8F2. Click anywhere on the screen and let’s add some short phrases that will raise our visitors’ interest.
Let’s write these:
- The perfect theme to start your new blog with
- Easy to customize with tons of theme options
- Suitable for magazines, blogs, portfolios, etc
- Includes .PSD files to really suit your needs
- And many more features!
We can add some arrows to really emphasize the list feel. Grab the Custom Shape Tool (U) and select one of the arrows from the list.
If you can’t see any arrows in the list, make sure you click on the little icon in the top right corner of the shape selection popup, and select All (overwrite or append, your call).
Draw out your desired arrow once (hold down Shift to constrain default proportions if you like is that way), right before the first line of text. Make sure it’s not too large, but also don’t make it too small. When you’re happy with the result, duplicate the arrow 3 times (provided you have 4 lines of text like in my case), and position them accordingly. You should end up with this after lining up everything nicely.
Let’s continue learning how to create a landing page.
This concludes the second level of the AIDA principle.
Step 5 – Call to Action
In this step, we’ll create our CTA button. Call to Actions are key components of a landing page. They need to be big and super-visible so that the visitor can easily click on it. We’ll be talking about Call to Action buttons in a later tutorial. For now, let’s create ours.
So, what should we write on it? In our case, it’s a theme, which can be downloaded. Let’s say that this theme will be free to download. According to that, we can write DOWNLOAD FREE. That’s really catchy with a user’s eye. About aesthetics, we’ll use a big bold font with huge font size, and a nice shiny background that stands out from the surroundings.
Grab the Rounded Rectangle Tool (U), set a Radius of 5px, set the Foreground Color to #FFDD00, and draw our a rounded rectangle big enough for a CTA button. An adequate size is 300×70 pixels for this design.
Grab the Info panel from the Window menu to see the measures real-time, as you draw. If you’re using Photoshop CS6, it’s not needed.
Nudge it into position, then grab the Type Tool (T), type in “Download Free”, and set the font to Bebas Neue (all caps by default), size 52px and color #333333.
Nudge this text to the center of the button, and we’re done here.
Popping out nicely. Aida level 4 is reached.
Missing level 3? Call-to-actions can present more than once on a landing page. We’re adding ours here to have one above the fold. If the user has already fallen in love with our theme, he would definitely click the Download button at this point. In Step 7, we’re going to add the rest of the benefits, so if the visitor is not persuaded yet, he can read more about it and download it after he’s really convinced that this theme is going to serve him well.
Let’s now add the product image.
Step 6 – Product Image
Since in this tutorial we’re creating a landing page for a theme, the product image could be a preview of our theme. That makes sense after all, right? To really emphasize the image, we can put this preview on a device screen. This way it will get more contrast and it’s going to jump out of the page, literally or not. In this tutorial, I’ll be using an iPad. I’ve found a great-looking iPad PSD by ~mppagano. You can download this one if you like, or use any other tablet or even a computer screen if you prefer.
Open up ~mppagano’s iPad PSD in Photoshop. Also open up an image of a website, or use my screenshot if you prefer – I’ll be working with this one. Before touching anything, resize the iPad PSD to a Width and Height of 1400 pixels.
Paste in the website’s screenshot into the PSD. Move it on top of all layers, and align it to the center if the iPad. Use the Free Transform Tool (Ctrl+T / Cmd+T) to distort (right-click to select Distort) the screenshot to match the iPad’s alignment and angle. Also, apply an Inner Shadow layer effect to the screenshot.
Use Multiply blending mode with black color, 40% opacity, 130° angle, 2px distance, 0px size.
If you did everything properly, it should look like this.
When you’re happy with the iPad, select all the layers but the Background, and convert them to a Smart Object. Now, right-click on the newly created smart object, and select Duplicate Layer. In the window that comes up, select your Landing Page PSD as the destination. When done, close the iPad document. You can save it if you want, it’s voluntary.
Now our iPad Smart Object is in our PSD, so we can edit it any time in the future!
One last thing with this one, we need to resize it. Grab the Free Transform Tool and reduce its size to about 500 pixels wide. Position it accordingly. Here’s my result.
Step 7 – Below the fold
Let’s create the rest of our Landing Page. The next gray section is below the fold, meaning that when viewed on an average monitor, it won’t be visible to the user without scrolling. This is the place where we’ll reach the third level of AIDA, where we will be convincing our visitors to download/buy our product, and that it’s going to satisfy their needs.
How to achieve this? In our case, we can inform the users about more specific features and benefits of our theme. Let’s come up with a few creative ideas. Remember, we have to make them want our product.
- Fully layered, editable PSD included
- Taylor it for your needs with ease
- Only 0.8 Megabytes required
- 9 custom page templates built-in
- Widget- and AdSense-ready
- Lifetime support
…and other nice piece of words.
Here are some more examples to choose from:
- Working AJAX contact form
- Validated HTML5
- Twitter/FlickR feed
- Cross-browser compatible IE6+
- 50+ Icons and Shortcodes
- Detailed documentation
Let’s create a section for it on the left. Grab the Type Tool, set Bebas Neue, white, 50px, and type Features & Benefits. Some title that serves as a little heading for the following text box. Create a list with all the above mentioned phrases. We would type it with Verdana as we did with the list above the fold, but here we can try a serif type for example Georgia. It goes really well with the Bebas Neue heading. My font-size is 18px, color is #999999, leading is 34px.
This is the point where we reached AIDA level 3. We could add another CTA button here, but then they would be too close to each other, and therefore it could be messy.
Step 8 – Miscellaneous
Let’s put some stuff to the remaining empty space. Since it’s a theme, it gets updated. Or at least it should be updated sometimes. Let’s add a Latest Update section here, making the whole landing page a little more dynamic. This could be a blog post here (provided we put some framework under it), or maybe a feed from a Twitter account dedicated to this theme’s development.
Duplicate the Features & Benefits layer and nudge it under the iPad, leaving about 50 pixels whitespace between them. Then draw a box with the Type Tool and type something in that looks like a short update change log. I’ll go with the following.
As you can see I played around with some colors to make this area below the fold a little more colorful. I made the link blue, and applied our button’s yellow background to the date.
We’ve successfully created our Landing Page design for our theme. But it’s looking flat at the moment. Let’s now to play around with layer styles to make the make look more three-dimensional. Feel free to play around; here are some ideas on how I would go.
The first thing I would do is to put a subtle drop shadow on the heading and the tagline.
Here are the effects for the Title.
I used the same settings on the Tagline, but with only 1px distance.
Here is my button that I came up with. Looking much more like a button and you definitely want to click on it when you see it. And it’s all done by only using Layer styles.
Here are the layer styles for the button’s layer.
And here are the styles for the text “Download Free”.
Let’s take a look at the area below the fold. Let’s add some shadows to them to make them jump out a little.
I’ve used the same exact drop shadow on the paragraphs as I did with the Tagline (1px). So copy over the tagline’s layer styles to the features list and the latest update’s text.
For the titles (Features & Benefits and Latest Update) I used the same drop shadow as I did with the Title (2px). Copy that one as well.
Find the layer that contains the blue background. Give it the following styles to make it really eye-catching.
Greeeat looking! Let’s see one more eye-candy. Create a new layer on top of the blue background’s layer. Grab soft brush (no hardness), set its size to 1000px, set the color to white and click somewhere at the top of the page. Reduce this layer’s opacity to about 20-25% depending on its impact. It creates a little highlight for the top of the header.
You can also mask out this highlight’s layer with the blue background, so it won’t overlap to the area below the fold.
And for some real final touch, you can apply some noise on the background layers. Go up to the Filter menu, choose Noise and select Add Noise. Set these values listed and watch their effect immediately if you have the Preview option checked!
I added noise to the area above the fold, the area below the fold, and the button’s background.
Note: In some cases you may need to rasterize a given layer to enable the Noise on that, that’s pretty much the way it works, just hit OK whenever Photoshop asks you.
And guys, this is it! We have successfully learned how to create a Landing Page in Photoshop. This was quite an interesting tutorial, isn’t it? Here is my end result (click on it for high-resolution).
Here is my version
I’ve played around for a couple more minutes and came up with this very-end result (click for full-size).
Download FREE PSD
So, how did you enjoy this tutorial? What is your end-result? Did you use another colour scheme for another Theme? What other features you put into your design?
Share your thoughts and ideas with us in the Comments below. We would really love to hear your voice!