How To Create Compelling Product Images For Your Opt-in Forms And Landing Pages (Even If You’re Not a Designer)
A little while ago, we asked you to send us screenshots of your opt-in forms and landing pages so we could find more ways to help you make them better.
This led to a first article about the Big 3 Conversion Killers, if you haven't read that already, take a moment and read it because it will teach you the must-have basics of good opt-in form and landing page design.
In this post, we're taking it one step further by improving the visual representation of your opt-in offer.
Your Opt-in Offer in the Spotlights
First of all, if you're reading this article, you're already a big step ahead of a lot of websites because you understand that to get visitors to opt in to your list, you need to create a compelling opt-in offer.
To make sure your efforts of creating it are not in vain, you need to make sure you represent the opt-in offer in the most compelling way.
You only get a fraction of a second before your visitor decides to close the light box without opting in or to leave your landing page. An image is processed 60 000 times faster by the brain than words. This means the image that represents your opt-in offer will do most of the heavy lifting in convincing somebody to subscribe.
All of the opt-in forms above are having something in common: they have an interesting opt-in offer, but they're using images that don't represent this offer very well. In fact, just by looking at the form, you'd never know if the offer is for an e-book, a video course, an audio file or something totally different.
If you use a tool like Thrive Leads, placing an image in your opt-in form is easy. It's creating the image in the first place that's the real challenge! Especially if you're not a Photoshop connoisseur.
Let me show you how you can create compelling opt-in offer images with free online tools made for the non-designers.
Step 1: Start Flat
Even before thinking how you can make your ebook look like a real book or your video course like "the real deal", let's start by creating a simple, flat image.
You’re not a graphic designer, combining three different fonts and five different colors is the perfect recipe for disaster so let's not even try to go that road.
Instead, let's follow the rule of: keep it simple, stupid!
Take a look at the above e-book covers. They aren't overly complicated. In fact, they use very few colors and very few graphical elements apart from typography. And these are made by professional designers, so who are we to go make things more complicated?
The easiest way to create a nice looking image for your opt-in offer is to choose a solid colored background with a nice font to make the title stand out.
Pick a Color
Don't know what color to choose? Here's a handy guide, which will help you pick a color that is associated with the kinds of emotions you want to evoke:
If you're looking for more in depth information about the psychology of color, you can read this excellent article by CoSchedule.
Pick a Font
To find a nice font, go to dafont.com on this website you can find a ton of different fonts and you can download them for free.
The reason I like Dafont is because it allows you to browse fonts by category and you can put your own text and immediately see the effect in the different fonts.
Another great resource to find free fonts is Google Fonts.
This is a huge collection of fonts that are totally free to use, but you’ll need a bit more design experience to be able to choose the best one.
Now that you’ve chosen the color and the font, let’s combine them into an image.
To do so we are going to use Picmonkey (a free online tool) and choose design, custom.
Before starting to make your flat image, continue reading this article because depending on the type of final image you want, you'll need to adapt the dimensions of your flat image.
As an example, I created a very simple, flat image (800 x 1200 px) to use as an ebook cover.
Feeling a Bit More Adventurous?
If you’re looking for a more fancy representation of your product, you can use a stock photo or you can take a screenshot and use it as the background of your image.
The screen shot option works very well when you’re making an image for a video course.
To make an interesting image with a stock photo or with a screenshot, I invite you to take a look at the video in this article in which I show you step by step how to alter an image and add text on it.
Another excellent resource to use to make flat ebook covers that are a little bit less minimal is Canva. This is a free online tool that allows you to easily create all types of online images. They have an ebook cover selection that might be interesting to check out.
Step 2: Jazz It Up
Now that you have the design of your flat product image, it's time to bring it to live.
Create a 3D Ebook Cover
Many opt-in offers are ebooks and to make the ebook look more real, you can make a 3D cover image for it.
Place It: A Free Online Tool to Create Mock-Ups
The website Placeit, allows you to simply upload your flat image and they transform it into a 3D ebook cover.
You can download the small format (300x400 px) image for free and this size is sufficient for your opt-in forms.
Most of the time you'll want to chose and image with a transparent background (because this will look better on your opt-in forms and landing pages) but unfortunately the choice is rather limited.
If you give away a book in Kindle format, you’ll be able to find mock-up of a Kindle to put your image on.
PSDcovers: Free Photoshop Actions
If you have access to Photoshop (even if you’re not a Photoshop pro) you can use the actions from PSDcovers.
They have a ton of different Photoshop actions to create ebook covers and will allow you to simple upload your flat image, click on the play action button and have a 3D book cover in just a few seconds.
Even if you’ve never used Photoshop actions before, they have a great explainer video to guide you through it.
The big advantage of this resource is the quantity of different mock-ups and all of them can be used on a transparent background.
Fiverr: Outsource for $5
I'm guessing many of you already know about the website Fiverr. It's a website where you can outsource a ton of small tasks for just $5 a gig.
I’m not a big fan of Fiverr for design work (because most of the time it’s pretty bad) but if you already made your flat image, turning it into a 3D ebook cover for 5$ is a good deal.
You'll find a lot of different gigs who offer this type of service (and you'll probably recognize some of the Placeit and PSDcovers ebooks ;-) ).
This is a perfect solution if you want more choice for images with a transparent background but do not have Photoshop available or if you simple do not want to invest your time.
Show off Your Video Course On a Screen
The time you could show a DVD box to represent your video course is long gone. Now, the best way to make people understand in the glance of an eye that they’ll get a video course is to display a screen with a play button.
A cool feature in Placeit is to use the “Grab Screenshot from URL” and use the URL of your video or course page.
This is perfect when your video offer is already online and you just need a fast image to put on your opt-in form. Here's another example, created from one of our courses:
(How to Create a Free Ecourse to Generate Leads and Make Sales, is one of our free e-courses and it's available here).
How to Represent an Audio File
As with the DVD box, using a CD box to represent a downloadable audio file is a bit old fashioned (unless you actually send a CD).
To do this in Picmonkey, click on the butterfly icon to go to Overlays and click on "Your own", this allows you to select any image from your computer.
Because the images of the sound wave and the play button are vector images, you can simply change the colors.
Use Placeit to make a phone mock-up.
Or if your sound file is hosted on a platform such as SoundCloud, you can take a screenshot and use this as your opt-in offer image.
Now it's Your Turn
Images are a very important element on your opt-in form and it is one of those things that your should definitely test to see what works best.
Could your opt-in form or landing page benefit from a more compelling offer image?
Let me know in the comments below!