How to customize our MockUps

MockUp is very easy to configure thanks to the built-in smart objects. Save your precious time by studying the manual. We hope that this lesson will be very useful for you.

1) In order to learn how to edit a MockUp, at first you need to download it. To do that, go to the website and select the appropriate MockUp. I chose the cup because here you can edit not only the picture, but also the color of the cup, as well as change the color of the wall.

2) After downloading the file is to be unarchived. In the folder you will find the very MockUp  in PSD format, as well as the text file with brief information about the file.

3) For editing the PSD you need Adobe Photoshop. If you don’t have this software, then first you need to download and install it ( ).

4) Open the PSD file. The first thing you see is our logo. In order to remove it, you need to turn off the top layer. The layers can be found in the corresponding “Layers” window. If you don’t have such a window, then open the “Window” tab and there put a checkmark in the “Layers” or just press the “F7”.

5) In the opened window you can see all layers of the file. The first layer is the website logo, red layers are smart objects which you will change, yellow – lighting, green – base, and blue – background. Some MockUps may have additional layers, or some of them may be missing. You’ll need only red and blue layers.  So, remove the first layer. To do that, click the left mouse button on the eye icon of the corresponding layer.

6) Now let’s edit the cup. For this you need smart objects (the layers highlighted in red). In order to edit a smart object, you need right-click on the layer which you will edit and select “Edit Contents”.

7) In the opened window you see the picture of the cup. Here you will add the image. In order to do this, click on the “File” tab and select “Place Embedded …”. Next, select the image on your computer and click the “Place”.

8) If you want to change the zoom of the image, simply drag the corner of the image (to save the zoom, you need to hold the “Shift” while zooming). If everything satisfies you, press the “Enter” or the checkmark in the the upper panel.

9) Since I got a lot of free space left, I decided to add some text and put the logo in the lower right corner. On the left, on the toolbar, select the “Horizontal Type Tool” and click the left mouse button at the point where you want to add the text. You can change the text color on the upper panel. The logo can be added in the same way as you previously have added image.

10) Now you can close the smart object window and look at the result.

11) In this MockUp you can also change the color of the cup handle and the color inside of the cup. Let’s change the color of the handle to white and the inner part to green. Go into the smart object number 2 and select the color by double clicking on the layer icon. The same thing you need to do with the first smart object (the internal part).

12) You got such a cup.

13) Now you can change the color of the wall. To do this, open the blue folder in the layers and find a layer called “Color”.

14) Just like you’ve changed the color of the cup, now change the color of the wall by double-clicking.

15) That’s all. Don’t forget to save your project. I hope my lesson helped you to figure this out and you will easily use our MockUps.

Share this