Posted by IN / 0 responses

How to create a mockup (and close a sale!)

3 March 2017
Confirm that you have the right numbers, cases and relevant information

In a world that most demands are digital, we sometimes forget how offline media still plays an important role. So, for this post, we are going to talk a little bit about how to create a mockup for a sign in order to close a sale.

Did you know that mockups can increase your sales up to 3 times?

The end customer is not as used to mockups as an agency for example. And without knowing the end result, it can be harder for your client to envision and even order. In this post we will share some valuable and inside information on how to create a great mockup on top of your client’s photo of the shop.

Just move the slide bar under the photo to see the before and after comparison.

First things that you should consider when making a mockup on a picture:
– Perspective
– Sign material (ACM, for example)

1. Create a perspective grid

First, apply a perspective grid onto the picture. That way, you can simulate depth more accurately. To create an accurate grid, use a vanishing point based on some points in your client’s photograph.


2. Build your panel

Now let’s start building our ACM panel using the grid as guideline.

In a new layer and using the pen tool, draw the rectangle that is going to guide your design. It will be the outlines of your design. Keep in mind that you must use the perspective grid as a guide. Use ‘Make Selection’ by right clicking after choosing the 4 points and click ok.

Add perspective grid

Choose the main color to be applied. In our case, we are going to use orange.

Choose main color

Decrease opacity to 50% so you have a better view.

3. Cut out entrance

Using the tool pen again, make a new selection. This time, instead of filling the selections, we are going to delete part of it, in this case the shop entrance.


4. Panel sides

Using the same techniques showed before, let’s make the inner sides of the panel and this time, we are going to use a darker tone in order to give a sense of depth.

Panel sides

5. Add gradient

In a new layer, using the gradient (G) tool, create a gradient effect using a color palette starting with the original color. To do that, select the colors for the background and the first plan on the tool box. Then, click and drag the gradient line to create the effect’s angle.


(It seems like a lot to take in but just go step by step and, if you still have questions, talk to us and let us know how we can help you!)

Ok. now that you have your gradient layer, put it on top of the main layer of the panel. Now, on the layer’s display, right-click the gradient layer and choose ‘Create clipping mask’ option. This way we can create a mask that will only be applied to the main layer. (And not the photo itself, for instance)

Clipping mask

PS.: This process can be repeated as many times as you like to create different variations. It can be applied on the sides of the panel, for example. To use multiple variations at once, decrease the opacity so the layers can blend and show a different variation.

6. Add Reflection

To create a more real look, we’ll add a reflection effect on the panel layers.

First, choose a picture that can turn into an interesting reflection. (It doesn’t have to be the real reflection of the original place, if you don’t have it. It is just so your client has a better idea about the material and what it may look when applied)

For this exercise, we’ll use this photo:

Reflection photo

In a new layer, above the gradient’s, paste the image making sure it fills the whole main layer. Now let’s create a mask for this layer as well. Right click the photo’s layer and choose ‘Create clipping mask’.

Still on the layer’s display, decrease the opacity of this photo layer to between 25% and 40% (See what fits better!) and change the layer mode from ‘Normal’ to ‘Screen’. Done! We now have our reflection effect!

Create reflection

Looking good, right?

7. Add Logo

Now let’s put the client’s logo in. In an ideal world, all clients send their logos in a vector format, right? Since it’s not an ideal world, you can use the selection option on the pen tool create and paste in a new layer create a new layer, for example.

Cutting logo

Ok. Back to our panel. To apply the logo in perspective, we must use the Free Transform command (Cmnd+T or Ctrl+T) and edit the corners by using the grid as guide.

Applying logo

Looking good!

Now, let’s put some depth into it. For that, we’ll use the ‘Drop Shadow’ effect on the logo.

Go to Layer> Layer Style> Drop Shadow. And follow the next instructions:

Drop Shadow

Decrease layer opacity to 85%-90% so it blends with the panel colors.

8. Final tweaks

Some elements may be obstructing the view. In this case we have a handrail. Use the selection option on the pen tool to exclude the unnecessary parts and bring it as a new layer forward.
Deactivate the perspective grid view
Increase original photo’s opacity to 100%

And you are good to go!

Final mock up

Quick recap:

Create perspective grid
Choose material
Create the ‘box’ for your panel
Cut out the entrance and everything that is not the panel/ sign
Create sides to give depth
Apply gradient
Add reflection
Add logo
Make your sale!

Hope you enjoy this tutorial and use it for your clients and increase your sales!

Leave a Reply

Your email address will not be published.