There is a Mockup for Everything

Using mockups to showcase your products is the best way to show them off without the need for a professional photo shoot. Graphic Designers use mockups all the time to show their clients how a design will look “in real life”. The most common mockups are the ones for devices, t-shirts, mugs and flatlay photography for social media graphics. You can also mock up a business card, an Ebook or trifold flyer or brochure, and even a wireframe for UX Design.

Mockups usually come as psd files which you can edit through layers called “smart objects”. This means that using Mockups for your products, merchandise, and designs is very easy and quite practical. The photography is impeccable and the photoshop files are usually clear and easy to navigate. You might need to rotate and resize your images but not too much.

Around the web you can get mockups of all kinds, free ones, paid ones, even some automated mockup creators. In this post, I will show you all the possibilities!

What kinds of mockups are there?

Here are some ideas on how you can use them for your projects!

Device Mockups (phones, laptops, and tablets)
Device mockups are so versatile! They come as either stand-alone devices or staged in a scene like a desk or in someone’s hand. These are used to showcase user experience design, websites, apps, social media marketing, and actually whatever you’d like to show on a screen, even a screenshot works well in a device mockup.

Commonly used mockups are the ones for Apple products like the MacBook, iPhone, iPad Pro, and iMac. But there are mockups for all sorts of devices, not just Apple ones.

Clothing Mockups (t-shirts, hoodies, tank tops, caps)
Clothing mockups are great when you want to sell all sorts of t-shirts or hoodies with your designs. This is a great way of making some extra cash. You can sell your shirts via Amazon dropshipping or through your blog or e-commerce site. Using clothing mockups will help you promote your awesome designs!

Powered by Creative Market

Logo Mockups (business cards, letterheads, tags) These kinds of mockups are used mostly by designers for showcasing their logo designs in different ways. You can use these if you are a designer and want to show off your designs as they would look in “real life”. A business card design can look really nice on a mockup, then it can be showcased on Behance as part of your portfolio. In fact, when designing the entries for your Behance portfolio, mockups can really come in handy!

Powered by Creative Market

Branding Mockups (style guides, stationery) Branding mockups are really versatile because they don’t just work for setting up a branding style. They also come in sets where you can move the elements on the scene and make an endless combination, these are called scene mockup creators. These work great for social media graphics!      Other kinds of branding mockups have all the elements of a branding identity. For example, the business card, the letterhead, the coffee cup, etc. The logo and branding can be added to those products with layering. A lot of the branding mockups are available as both a Photoshop cc file or even as a vector graphic to use with Illustrator.

Product and Packaging Mockups (bottles, tubes, boxes, bags) There are tons of mockups for packaging as well. Designers use these to present artwork to clients. It helps visualize how their logo and branding will look “in real life.” The most used packaging mockups are to display product labels on shampoos, creams, food products, etc. When all you need to do is drag artwork into a smart object layer, why not use mockups to showcase your designs seamlessly?

Social Media Mockups (Instagram quotes and stories, headers, featured images) Using mockups for your social media graphics saves so much time, it’s ridiculous. You can use them for social media channels, even Instagram Stories! Another way of using social media mockups is to create a week’s worth of posts so you can see what they all look like together. Lots of social media schedulers have this now, like Tailwind and Later.

Artistic Mockups (posters, prints, photographs, wall art) If you create artwork to sell online or in person, frame mockups can help your buyers imagine what it will look like framed up on the wall. Frame mockups usually have movable layers for each frame so that you can display your artwork in any layout you like. 

Powered by Creative Market

How do Smart Objects work in Professional Mockups

Like I mentioned before, customizing the mockups to fit your brand and inserting your graphics and images is quite easy. That’s because these mockups are made by professionals and they use something called “smart objects”. In Adobe Photoshop, the smart object will be marked with a special icon and all you have to do is insert your graphic and it will automatically take the right shape and angle of the mockup!

Technically, a smart object is a layered section in the mockup which already has all the effects applied to it. That’s why when you add your graphic, it will fit right in. Good quality mockups will even be pixel perfect. Even the fonts and the typography in your graphic will look good.

Sometimes you need to tweak the textures a little for the rendering to be perfect and for the effects in the mockup to look good with your graphic. You might need to add a color gradient or add a color adjustment to match the mockup. A mockup psd file will have layers which organize all sections of the design. Most will even have text instructions on the smart objects like, “place your graphic here” so it’s even easier.

If you are new at using mockups, maybe you should watch some tutorials to learn the functionality of mockups and smart objects.

Where can you get some really good-quality mockups?

There are lots of places online to get good-quality customizable mockups for your brand or website. Below are my absolute favorites. They have some freebie options if you are short on cash:

Rawpixel

Creative Market

Freepik

What if you don’t have Photoshop CC, Photoshop CS4 or Adobe Illustrator?

I get it, not everyone has Photoshop of any kind, or even Illustrator for that matter. Not to worry, there are some online web applications that you can use to insert your graphics in mockups. They are quite practical actually!

• PlaceIt – This generator has lots of options, mostly for devices and advertisement in all sort of settings.
• MagicMockup – This generator has only devices but with nice backgrounds and settings.
• Ten MORE Free Mockup Generators with lots of options.
• Mockuper: Totally free mockup generator with amazing options.

I used Mockuper to make this mockup for a web design I worked on. All I had to do was choose a mockup, add the url of the site and the screenshot was added in automatically.

Why not use mockups on your next project? They can even work as Blog Post Titles and Social Media Sharing graphics! Scroll down to see all the Mockup Bundles I have found for you! If you

Let us know how you make your mockups! Did we miss any cool mockup makers or products? Leave us a comment!