The differences between good landing pages and great landing pages are often very subtle. Small changes in layout, colors, and imagery can often make large differences in terms of how persuasive these pages are. When it comes to these careful aesthetic choices, a savvy designers will leverage their meticulous attention to detail (and their refined design techniques) to make a client’s website both pretty and powerful. One often-overlooked way to add extra polish to a landing page involves matching the colors of the various images to create a cohesive, professional appearance that adds credibility to the product or service being offered.
Finding images for your landing pages — or any other project that requires multiple images — can be quite a challenge. You can spend hours trying to find the perfect pictures only to discover that they they don’t seem to match each other particularly well. Consistency is key, especially in design, so what do you do?
The first thing that you want to do is bring all of your images into Photoshop. We are going to download some sample images, and the links will be provided for you. We have an image of a woman at her Computer, found here, an image of an office phone, found here, an image of a darkened board room, found here, and an image of a man in a suit holding a piggy bank, found here. These images are shown below:
In looking at these images, they don’t look like they belong together at all. The image of the woman with her computer is nice and clean, crisp, light, and airy. The image of the man with a suit holding a piggy bank isn’t too bad as well, but we might adapt it to match the image of the woman better. The next image of the business telephone has a lot of warm tones in it as well. The board room is dark and shadowy, so we will need to keep this in mind and compensate for this.
The key to matching these images comes from opening them all at once inside of Photoshop. This method only works with multiple documents that are opened simultaneously. You can tell from the images above that the ones that really stand out as serious mismatches are the phone and the board room images. The cleanest and most pristine image is the one with the woman and her laptop.
Open all of the images at the same time in Photoshop. We are going to leave the image of the woman and her laptop alone for now. Go to one of the other images and go to “Image” > “Adjustments” > “Match Color.”
A dialog comes up, and you can make several choices, but the first option to pay attention to is your source. I chose the image of the woman and her laptop as the source, which ends up blowing out the lighter areas of the image. To fix this and still make the image look consistent with the others, we can adjust the sliders at the top. Luminance adjusts how much light is in the image. Color Intensity determines how drastic the color change is, and if the effect is still too harsh, then you can use the Fade slider to lessen the effect.
This effect is strictly done to taste, because every image (and every set of mismatching images) is different. Thus, you won’t be able to use the same exact settings that I have used for the example images, because every image has its own color information. The best plan is to determine your best image and use that one as your starting point. If that image has the look and feel that you desire, use it to tweak your other images. Next, I will do the phone.
As you can see, after following the same steps, I was able to remove the heavy color cast and give it a much brighter, cleaner look.
Before:
After:
The wood has been lightened, and the tones within the phone have been lightened as well. The color cast is gone, and the image looks more consistent with what we want for our landing page.
The boardroom is a little different because it is so dark. It tends to have a different mood than the other images, but with some tweaking, we can adjust this. Follow the same steps, but for this image, we need to bump up the Luminance slider. That alone is going to make all the difference. Before, the image was dark and brooding, but now, is looks clean and professional. The detail in the take and the reflections are more prominent.
Before:
After:
These images look much more consistent with each other, and they’re ready to be implemented in our landing page now. Below is an example of how our landing page will look with our new images.
To make the landing page above, create a new document in Photoshop. The example above is 800 pixels wide and 1200 pixels tall. I left the background white. Select the rectangular marquee tool and create a new layer. Select a vibrant green and draw a box roughly 250 pixels tall that spans the width of your document. Double-click the layer to add a drop shadow and a gradient overlay.
Add a sheen to the box by creating a new layer. Command/Ctrl-click the green box layer to load its size and shape as a selection. Fill it with white and set the opacity to around 20%. Hit Command/Ctrl + “T” to transform the box. Hold down Command/Ctrl and click and drag the bottom-right corner upward until it overlaps the top-right corner. Right-click on the transformable shape to reveal different options. Choose Warp, and then click and drag the middle of the diagonal edge upward, curving that edge. Hit the return key to commit to the transformation.
Next, we are going to remove the woman with her laptop from the background. Open the image and use your Quick Selection tool to select the woman and her laptop, and click the button in the options bar called “Refine Edge.”
Check the Smart Radius option and move the slider all the way to the right. Then, under output, check the box called “Decontaminate Colors” and move the slider all the way to the right. Use the brush to add or subtract different areas from your selection. Choose New Layer with Layer Mask as your option. Then, you can tweak the mask manually by painting on the mask with black and white. I also hit Command/Ctrl + “T” to transform the image, and I flipped it horizontally so that she faces inward.
Resize the image and scale it so that her head slightly peeks out above the green bar that we created earlier. Make sure that the sharp edge at the bottom aligns with the edge of the green bar.
Select the Text Tool and Create your logo text. If you already have a logo, you can import it here and place it at the top left corner. I chose Helvetica Bold for the BizPro name, and used #0082fb, which is a bright blue, for the color. I also set up guides in order to organize the content. I set up the guides to create a 20 pixel margin all the way around the landing page. Then, I took the overall width, subtracted the left and right margins, and divided the remaining size by 3. This gives us a 3 column layout for our landing page.
Next, we are going to add some title text to the feature bar in the middle of the page. Select the text tool, choose Helvetica Bold, select a large size (such as 16-20pt), and create the title. On the next line, create the subtext using a smaller size, and use the regular font style of Helvetica. Fit this within the two rightmost columns, as shown below.
Next, we will add a list of features to include in the right column. Select the Text Tool, and lower the size to between 10-12pt. Click and drag your mouse to draw a text box in the right column, making sure to leave a little padding on each side. To make a bullet point, hold down the alt/option key and type the “8” key. Make each bullet point and hit return at the end. If you need to add space, increase the leading to somewhere between 12-14pt. I also set the type style to italic this type, to call attention to this area.
Next, we are going to implement the rest of our images. Open each image in Photoshop and find an image that has a nice composition. Crop it in a landscape format. Hit Command/Ctrl + Option/Alt and “I” to bring up the image size. These settings are what you will dial into your crop tool, so that all of your images will be sized the same. Go to the other two images and crop them to the same dimensions and choose the best arrangement. Now, you have three images that are sized the same, look visually consistent and can be used within your landing page. It really doesn’t matter what the actual size is, because we are going to scale each one down to fit into our layout. Place them in a row, arranging them sensibly in accordance with your content and your message.
Next, we will add the title for each column. Selecting the same blue that we used for the logo, create the headings for each column of text. I used Helvetica Bold at 16pt. I also aligned it to the left side of each image. To make this quick and easy, once you create the first title, use Command/Ctrl + “J” to duplicate the text layer twice. Then, double-click the “T” icon for each layer and simply type the text you want for each column and align each to the left of each image. To constrain the movement to stay inline vertically, hold the shift key when moving the text left and right.
Now, can can add some sample body copy. Since this is a mockup, we will add lorem ipsum text just for placement. Select your text tool and drag out a text box within the constraints of your left column, leaving padding on each side. Make it around 140-150 pixels tall. Copy some Lorem ipsum text from a site like the one found here and paste it into your text box. Lower the size to somewhere between 8-10pt and stick with Helvetica; chose a medium-dark gray and set it to italic or oblique. Then, repeating the duplicate process that we performed for each of the titles, I added body text to the other two columns, sampling different placeholder text for variation.
Next, I we will add a chart, showing average results from using BizPro’s service. The chart will be 2 columns wide. First, create a heading for the chart using the same blue that we used for the body headings.
Next, we will draw the chart itself. Select the Rectangular Marquee Tool and create a rectangle that fits within the left two columns of your landing page, with padding on each side and even more padding at the bottom. Fill the selection with your foreground color. It doesn’t matter what the choice is, because we are going to lower the fill for this layer to 0%. Then, double-click the layer to add a 1 pixel black stroke layer style, but set the stroke to the inside.
Then, duplicate The rectangle, hit Command/Ctrl + “T”, and drag the top hand down to make a long, thin rectangle, about 1/4 or the height of the large rectangle. Duplicate this layer 3 times. Align this to create four bars that run the width of the box. If they don’t match the full height of the box, select all four rectangle layers and transform them simultaneously to match the size of the large box.
Then, with all four rectangle layers selected, drag them down to duplicate them. With the duplicated rectangles still selected, hit Command/Ctrl + “T” to transform them. Click at the corner and drag to rotate the rectangles. Hold shift at the same time to constrain them to 45° angles until they have turned from horizontal to vertical. Hold Alt/Option and click and drag the middle handles to match the width and height of the chart.
Next, we will create our line for our graph. Create a new layer and select the pen tool. Create different data points to show an increase over time from left to right on the chart. Once your are finished, go to the paths panel and select stroke path with brush. I chose the blue that we have used for our headlines. Then, at key points within the graph, I used a burst brush to highlight these points. Then, double-click the layer and add an outer glow, and set to hard light. I set it to glow with the same blue that we have used all along.
At the bottom of our chart, we want to add time increments for each column. Select the text tool and type “Month 1” in the first instance. Repeating the same process as before, duplicate the text layer and change the number each time. Then, move each text layer into place for each column.
With everything that we have created, we have still yet to create the most important feature — The call to action. The bottom-right column is where we are going to add our web form to capture interested viewers. First, select the Marquee Tool and create a tall rectangle that spans the width of the column.
Next, hit Command/Ctrl+ “J” to duplicate the layer. Set the original rectangle layer to 50% opacity. For the duplicated rectangle, hit Command/Ctrl + “T” and while holding Alt/Option + Shift, drag a corner inward to scale the solid blue rectangle down, leaving a border around it from the rectangle below.
Now, select the Type Tool and create a white title, using Helvetica Bold set to 24pt. Create a new text layer, this time using regular Helvetica set to 14pt. Create the name field. Next, Duplicate the text layer as many times as you need to make each desired text field. Double-click each text layer, changing the text to each field that you need. I chose Name, Address, Telephone, and Email. Hold Shift and drag the last text layer to the bottom of where you would like to place your text. Then, hold Shift, select all of your text layers, and click the align button found in the Options Bar at the top of the screen called “Distribute Vertical Centers.” This will place each field name at an equal distance from each other vertically.
Create a New Layer. Select the Marquee Tool and draw a short, wide rectangle and with white as your foreground color, hit Alt/Option + Delete to fill the selection with white. Double-click the layer and add a 1 pixel stroke to the inside of the shape as a layer style.
Repeat the same process that we did for our text layers, duplicating them and arranging them equally.
Next, create a new layer and select the Marquee Tool. Create a rectangle aligned to the right edge of the text fields of your form. Fill it with the same green that we used for the bar at the top of our landing page. Also, give it a gradient overlay. Select the Type Tool and using Helvetica Bold, create the “submit” text in white. Now, our landing page mockup is complete.
Conclusion
It can be difficult to find images that are perfect for our designs right from the start. Finding the right images that convey the right message is hard enough, but even then we can run into problems with color consistency. They may have the content or message that we want, but they may not look good together within the same design. With the Match Color options found in Photoshop, we can bring all of our images in, and adjust them so that they are much more consistent with one another. The results can make your landing page look much more polished and professional, which will in turn result in more conversions and customers for your client.
James GeorgeJames George is a professional web developer and graphic designer. James is an expert in design, and a professional web developer, with a special interest in WordPress. Founder of Design Crawl, James has been a professional designer since 2005.
