How To Create Compelling Product Images For Your Opt-in Forms And Landing Pages (Even If You’re Not a Designer)

Author 
Hanne   92

Updated on April 28, 2022

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.

More...

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.

KISS

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.

This is one of our free guides and you can get it here.

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 represent an audio file, you can add a sound wave and a play button to your flat image.

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.

You can find this IMimpact podcast episode here

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!

by Hanne  June 16, 2016

92

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Thanks Hanne. Some great tips and tools.

    The audio file idea is brilliant. I hadn’t thought of ‘showing’ people the audio wave form. But it is a great idea!

    • Indeed! 🙂

      The representation of the audio is magnificent!

      If you know how to make GIFs, another cool thing you can do is to make the waveform animated. It’s a pretty cool thing to do. 🙂

      Sincerely,
      Leonardo “List Legend” LaVito
      (The Last List Building Legend)

  • Great post! There’s a real wealth of resources here! I’m going to be trying Placeit and Picmonkey for sure!

    I didn’t see Canva in there, though.

    • Hi Steve,

      Looks like a good resource for Photoshop users for sure. And thank you for pointing out the link, I corrected it 🙂

  • Thanks for the tutorial. I’m going to try this as I begin the process of updating my site. I need to get more leads from the site instead of just waiting on referral business.

  • Great resource. This is REALLY helpful stuff for those action takers trying to make something quickly. *Visuals convert*. And so often, you KNOW there must be a shortcut, but just need a little pointer in the right direction – this is going to help a few people get rich 😉

    • hahaha I think it takes a little more to get rich but I hope it helps make better opt-in forms, Tony 😉

  • Thanks for the good tips, Hanne.
    There’s also one more source of great images I use.
    It’s very simple. I just search for “free PSD” or “free design templates” adding some more key words in the Google searhc line and there is often a good choice of the stuff 🙂

    • Hi Arlene, thanks for the tip. Might be worth it for people who make a lot of graphics (but probably a bit expensive for those who just need one image on an opt-in form 🙂 )

  • Hello Hanne,

    Your provided a lot of value and I enjoyed reading your post. I will give it a try with the mock-up tool and special fonts you recommended. Good work!

  • Another great article, Hanne, and perfect timing for our business.

    P.S. Love the design of your comment form. Would love to know how you create those (Thrive template?) at some point when you can share. 🙂

  • Thanks Hanne for the great tips on creating product images for your opt-in forms.

    Indeed showing prospective subscribers what they are about to get, with a visualization that they can keep in mind, is always a great way to bump your conversions as well.

    The representation of video and audio courses or files is especially a good idea, with those increasing in popularity these days. 🙂

    I’ve used PlaceIt before, and it’s a great tool! 🙂

    Sincerely,
    Leonardo “List Legend” LaVito
    (The Last List Building Legend)

  • “Show of Your Video Course On a Screen” -> Should be “Show Off”

    Really great article, thank you!

  • Hi Hanne,
    thank you for sharing all this valuable information. I love Picmonkey and Canva, but never knew about Placeit.
    Thank you for sharing.
    Here’s to creating awesome, irresistible opt-in forms. (Don’t look at mine, I’m going to have to change it thanks to this post)
    Linda

  • PicMonkey looks like is no longer free. Great advice though. Appreciate the time you spent putting it together.

    • Hi Ed,
      Picmonkey is still free 🙂 They do have a paid version but you really don’t need it for this type of images.

  • Thank you for sharing these great tips and tools. Have to think of how to represent “tutorials” better.
    Since our opt-in form is shown as an example, guess I’m going to have to rework it 🙂

    • Hi Arte,
      Maybe simply using an (video) image with a clear title rather than trying to “show” the tutorials could help.

      • Thanks Hanne for the personal reply to all the comments. That shows a lot of commitment! Yep, testing out some versions of video tutorial images with Thrive Leads NOW thanks to your timely post.

    • Hi Ron,
      One thing I like to do for one page documents is take a screenshot of the document and blur it out.
      Use this as background and add a title.
      This shows people a glimpse of what they’ll get but not the total thing (if not, why opt-in 😉 )

  • I agree with….most of this. It’s great stuff, that’s for sure. My exception comes with “3D” covers. That style has become so overused and abused, when I see it, I tend to think the web site is old and outdated. When people think ebooks, they usually see the flat covers like via Amazon. Plus, making it 3D is kind a bit of a deception – it’s made to look real, but it’s not. I see a lot more marketers going the way of the flat cover. In my case, have checklists and I use a thumbnail image of the checklist that works great.

    • Hey Chris,

      Thanks for your comment, I totally see what you mean. I think it depends on the quality of the “3D” (I like the magazine style of 3D not so much the hardcover one). But I completely agree with the trend being flat images 🙂

  • Thanks, Hanne! This is a topic where there’s not a lot written that is organized and covers the various types of media like you do. I’ll definitely refer to this the next time I need to create an image or thumbnail.

  • Though i know how to use Photoshop but no body else in my team know’s about it, That’s why i had to hire an creative designer. Pretty cool article i just shared it with my co-workers. Keep doing the awesome job!

  • Hi Hanne,
    This is a great post for non designers like me. I have bookmarked it 🙂
    Could you also share some resources and tips n tricks on how to make the actual PDF itself? I’d like to know how to create a professional looking PDF but have no clue how to do it.
    Thanks 🙂

    • Hi,

      Ok so this will probably make many designers cringe, but my favorite way of creating nice looking PDFs is in PowerPoint (or Google Slides)
      I like this because you can easily play with the layout (much more so than in a text editor), you can add links and when you are happy with the result you simply export the document as a PDF.
      The thing that makes it work is to use a custom slide size which allows you to put your slides in A4 format 🙂 Try it and you’ll see that it’s pretty easy!

  • Just looked this up again to create my first ebook cover- I must admit I got slightly too much enjoyment to admit to ‘a normal person’ watching my Photoshop render out my lead magnet book covers – so cool! 😛

    Thanks for the great guide & resources Hanne : )

  • I love ThriveThemes and most importantly the FREE tutorials from Shane, Steph and Hanne whose teachings empowers me in no small ways. This particular post is an awesome example of such empowering post.

    Thanks Hanne!

  • I had no idea about Thrive Architect, but by watching their tutorials I have now become a pro web designer doing freelance projects on Fiverr and Upwork.

    Many thanks,
    Tasvir Mahmood.

  • Great article Hanne!

    Good to see that there are so many resources. Although it seems that PlaceIt is no longer free.

    It’s also refreshing to see the meaning of the colours.

    As a Thrive Themes member I simply love all the information that you are putting out! Thank you! I’ve learned so much the last weeks!

    Peter

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >