4 professional design mock-up techniques to show off your work

When pitching a design to a client, presentation is always crucial. Showing a clean and polished design at any stage of the design process is a given, but there are other ways to help your design outshine the competition. Utilizing mocks-ups is a powerful way to convince your clients that your design fits their brand, and it is something that most professional designers do.

It’s easy to get mockups and stock imagery confused, so it’s important to note that using a mockup and using stock imagery in your design itself are two very different things. Mockups are not the final product that you’re selling to a client – they’re only a visual tool used to display your work, and most of their licenses do not allow you to transfer the mock-up file itself to a client.

In this article we’ll be providing you with mockup resources that are licensed for commercial use, so you can submit your designs utilizing them as a backdrop. For more information on licensing legal stock for your designs, read our “Resource guide for third-party imagery“.

Here are our 4 easy ways to create mockups:

Create an original mockup from scratch

Use Smart Objects to apply your design to a template

Use a Photoshop Action to make a 3D mockup

Use a mockup generator website

Lets explain each one in more detail. Each technique comes with resources for creating mockups that are free for commercial use — enjoy!

1. Create an original mockup from scratch

You can do this by using a combination of your own photos/images and editing them in Photoshop. The tutorial above explains how to use your own photos to create a business card mockup.

The 6 below explain how to create your own original mockups with techniques like Photoshopping your own images, creating Smart Objects, and creating Photoshop actions:

2. Use Smart Objects to apply your design to a template

Mockup templates that use Smart Objects make it easy to adjust them to your design project. A smart object “preserves an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer” (Adobe).

This tutorial explains how to how to use the smart layers in a template to create a mockup of your design. Below are 6 free mockup templates that include Smart Objects:

3. Use a Photoshop Action to make a 3D mockup

Photoshop Actions are a great tool in that can turn a flat design into a 3D mockup in seconds with the click of a button. They are a series of pre-recorded steps that make a design achieve a certain look without the designer having to manually apply each step.

Sites like psdcovers have free Photoshop actions available to download to use for commercial and personal projects, and this tutorial explains how to use them. Here are 6 sweet Photoshop actions that will render your designs into 3D mock-ups:

4. Use a mockup generator website

All you have to do is drag and drop your designs into one of these sites (PlaceIt by Breezi featured above) and it will generate a mockup for you to download within seconds! mockupeverything is a similar website that offers free templates you can drag and drop your designs into.

We always recommend that you create your mockups from scratch, because no designer wants to be using the same mock-ups as every one else. However if you’re in a time crunch, feel free to use the mockups above to make your designs pop!

Want to kick start your graphic design career?

Learn how freelancing on 99designs can help you find more work.

The author

Rebecca was born and raised in the Bay Area, where she currently lives. She has a BFA in Design with a Visual Communications emphasis from UC Davis. Her passions include travel, design, and all forms of noodles.

Wow seriously this is a great tool.I enjoy working with it.Thanks for sharing man.

Eileen Coyle

Sep 3 2013

Hi Rebecca, I would suggest trying out fluidui.com a web based tool for wireframing and prototyping. You can add your own images and create high fidelity mockups, then test them on your mobile device. Just sign in with your email and password to create a free account and check it out.

I use Mockplus.com and it covers all my needs, for free (without coding or programming requirements). If you are looking for something easy and efficient it might be a good solution. It allows you to create prototypes for any apps based on multiple platforms, such as mobile and desktop.