Have you ever landed on a webpage that failed to load the images – or all styling whatsoever? You’d probably assume that something went wrong, and you need to refresh the page. But can you imagine what the web would be like without pictures? I am a very visual person, so a text-only, black and white website might drive me a little insane.
That’s because while content itself informs your visitors, but you bring clarity to what you say by leveraging graphics to support your message.
I enjoy creating visuals to help drive home the messages that my clients are putting forth on their own websites. Often, this includes mockups and thumbnails that help their content to stand out more.
3D Mockup Thumbnails Help to Bring Your Content to Life
Let’s say you have an ebook you want to promote. With a 3D image of a book as a thumbnail in a CTA, you can easily convey what your visitor will receive when they convert on your offer. Or perhaps you have a webinar coming up. Use a computer mockup to show that your audience can download and enjoy the recording from their devices at any time.
It’s up to you to run tests and see what thumbnails drive the most audience engagement, as well as what fits well with your brand. But at the very least, I would like to help you get started by showing you some of my own favorite resources for great product mockups.
I’ve broken these down into Photoshop-based mockups – like a thumbnail – and ones that can be constructed completely online.
Photoshop
If you’re not familiar with Photoshop, you may want to send this section of tools to your designer – they can take it from there. Or you can use one of the online tools I’ve highlighted in the next section.
CoverActionPro
Format: Photoshop Plugin
CoverActionPro keeps things simple for those who aren’t used to creating mockups. Step one creates the template for you to work on, while step two will turn your new artwork into a 3D mockup. And you only need to pay once for their large library of templates.
CoverVault
Format: Smart Objects
Run by the same person as CoverActionPro, CoverVault offers free and inexpensive mockups that use smart objects to make it easy to replace the default artwork with your own. The site also offers tutorials to walk you through the setup of your own mockups.
Creative Market
Format: Smart Objects
From scene generators to apparel and paper mockups, Creative Market has a large library of user-created resources. Some are photo-based, with people and real objects that aren’t editable, while others are fully customizable and allow you to add and remove products based on your needs.
GraphicRiver
Format: Smart Objects
Similar to Creative Market, GraphicRiver has a vast, filterable collection created by users, for users. While the number of items available on the site can be a little overwhelming, you will often be rewarded by finding unique product mockups that you may not be able to find elsewhere.
MediaLoot
Format: Smart Objects
MediaLoot’s collection provides a variety of free and premium mockups to choose from, depending on your needs. The library isn’t endless, but it offers many of the standard graphics you would want for projects, as well as a few more unique mockups that help add another dimension to your images.
Pixel Buddha
Format: Smart Objects
Pixel Buddha is another resource for free and premium mockups. It’s a great site for finding more specific mockups – bed linens, or paper coffee cups, for instance. Sometimes you just need a very particular mockup or graphic, and it helps to have another great site to check out for those unique cases.
Pixiden
Format: Smart Objects
I’ll be honest. Pixiden is my go-to resource for Apple device mockups. They do an awesome job keeping up with new tech releases, and they offer multiple device colors and angles. For a small fee each month, you can have access to all of their premium mockups, but they have many great free resources as well, and everything is crafted with a careful attention to detail.
Premium Mockups
Format: Smart Objects
Premium Mockups has a smaller, but very well-made set of photo-based smart objects. You can’t edit backgrounds or objects other than the device screens and smart objects themselves, but the high quality photos and natural settings help to bring your flat artwork to life.
PSDCovers
Format: Photoshop Plugin
Just like other CoverActionPro, PSDCovers has an easy, two step process that will create your desired product template – where you can add your artwork – and then quickly turn it into a sleek 3D mockup. PSDCovers has a monthly fee for full access to their library, but 100 of these resources are available on their free version as well.
ZippyPixels
Format: Smart Objects
ZippyPixels has a large library of photo-based mockups. You may have to dig a little, but if you’re looking for a paper-based mockup of some kind – poster, card, resume, cardboard box – they have it, and more. With so many available formats, angles and options, you’re bound to find what you need.
Online
Since these tools are entirely web-based, no advanced photo manipulation software knowledge is required.
Magic Mockups
Completely photo-based, Magic Mockups allows your to drop artwork into one of their many environments and to download your new mockup straight from there, all for free – with a donation requested.
Mockup Editor
If you want a super simple scene generator – with areas to drop in your own artwork, of course – then Mockup Editor is the place for you. You’ll have the ability to add and remove items – resizing and recoloring as well – to your heart’s content. Depending on your needs, you can pay per image download or per month.
Mockuper
Like Magic Mockups, Mockuper lets you simply select the scene you like most, add your artwork, crop it to size and download your finalized image. They also have a nice selection of “other” items, like billboards and TVs. Mockuper is free, and allows you to donate to support their work.
MockuPhone
MockuPhone has a limited, but organized and well-made resource library. It’s easy to find the device you’re looking for and to add your artwork to it. However, it is also very, very cranky about the sizing of your photos, so make sure you prepare them accordingly before you upload anything.
Placeit
Placeit works similarly to Magic Mockups, but has more options. What’s nice about Placeit is that they also offer many mockups with transparent backgrounds, meaning you can give it a custom background yourself, or you can add it directly to your website to have it stand all on it’s own.
Things to Watch For
No matter which solution you decide to run with, there are a few key things to keep an eye on as you look for mockups:
Licensing and Permissions
There are a lot of great resources, all within reach of a quick Google search. Just be sure you know exactly what you are getting, whether you have to pay or not. Above all, make sure you can use those resources they way you intend, without infringing on any of the permissions or regulations that the item’s creator may use.
File Setup
Take notice of how you will need to build your mockup – whether in Photoshop, online or with some other tool. Watch a few tutorials if needed.
If you use Photoshop, try out both plugins and smart objects to see which you are more comfortable using.
Will you use photo- or vector-based mockups? As the different websites show, many mockups are based on photos that have had smart objects added to them. But my favorite mockups are vector-based and thus easily scalable, and they have removable backgrounds. Photo-based files may or may not let you edit the background, yet transparent mockup look great next to a product description.
Basically, it comes down to asking “How editable is this mockup? How much can I customize?” Am I only dropping my own artwork into this photo, or can I move objects, tweak shadows and change out one background for another?
Trends and New Technology
Take note of the types of devices you use. Some customers love Apple, some love Android. Cater to their interests if you know that they prefer one or the other. Likewise, always use the mockup of a current model – an iPhone 6 Plus for instance. This will make you look like you know what you’re doing much more than if you used one of an outdated iPhone 4.
Pay attention to details, because if you don’t, someone else will.
And, of course, there are still plenty more free and paid resources out there. But these will get you going, and can help you figure out how you prefer to build out your own mockups. Know any other great resources? Share them in the comments below.
Business & Finance Articles on Business 2 Community
(117)
