How to Use a PSD Mockup Template in 3 Easy Steps

A mockup is an edited image in PSD format that you can insert your own design into it. Mockups are easy to edit for designers and people who are interested in showing their work in a realistic way. It’s also useful for design previews, branding, and showcases. They can also be used for advertising purposes and to promote a product.

As we all know trends toward e-commerce are growing and the digitalization of all support is changing the way how we perceive a product, also branding is changing with these new technologies, for all these reasons a designer or people working on e-commerce must have a varied set of mockups in their hands so they can deliver a good design outcome for their client. A well-designed mockup is a perfect solution to stand out from the competition. A realistic mockup can help you save time and money because you will not need to create the design from the scratch or make the photo shooting for the design.  In this article, we will show you step by step how to use a PSD mockup and insert your own design into it using Adobe Photoshop layers and smart objects. Smart objects are Layers that contain data that you can change yourself with a simple double click. They are very useful when using a PSD template. Now we will start learning how to manipulate a PSD mockup template in 3 easy steps.

Step #1: Find and Download

PSD mockups can be found around the web, but if you want a free mockup with a commercial license MockupOwl is your site it has a lot of free mockups in all fields related to design. So before starting to use a mockup let’s read first its structure so you can use it in a good way. When downloading a mockup you will find it in a compressed folder .RAR or .ZIP. while extracting the zipped folder take a look to know what you will find inside. For our Mockup site Mockupowl.com will find the following :

• .psd file this is the file that we will edit in this tutorial
• .jpg file preview of our mockup that we will edit
• .txt or .pdf  in most cases you will find the license of the product or a tutorial explaining how to use the mockup.

In our case, let’s use an IPhone 13 Pro Max Mockup from MockupOwl.com. Here is what the product looks like:

Step #2: Open and Locate the Smart Object

When you extract the zipped file you will find a .jpg preview, a .PSD source file. And a PDF or .txt documentation. Now the next step is to open our PSD file in Adobe Photoshop and check the layers and smart object inside. Inside the Template you will find well-organized and named layers, each mockup is different from the other depending on the complexity of the scene and the elements that you will find. You must get familiar with layers on a .PSD file because you will insert your design inside and replace the smart object elements with yours. The Mockup that we will work with IPhone 13 pro max, has 6 layers in total:  the first layer contains the logo of the website you can uncheck the eyes of the layer to hide it, and the second layer for the smart object that we will work with, the third for the screen base of the iPhone, and the fourth for the iPhone isolated, and the last two layers for adjusting background color, and the background as the final layer. 

If you find any difficulty when opening a particular layer, just check or click on the EYE icon to show or hide the layer. What we will do next is to find the smart object and open it.

Smart Object

In Photoshop, there are different types of layers in our case study smart object the smart object layer contains all the elements inside. The element within a smart object can only be edited inside the specific layer and they do not affect the whole scene or the other Photoshop template elements. In our case, the PSD file that we have opened contains the smart object layer, and it’s the second layer in our file with the name “Insert Design Here” below : 

Step #3: Place Your Content

The next and final step is to replace the design inside the smart object with our design. To proceed. Just double click on the smart object layer “Insert Design Here”. Then a new window will be opened inside the smart object, Now replace the design inside the newly opened window with yours. In our case the smart object opened like this :

As you can see now we are inside the new layer with a single layer named “Design”. You can delete this layer, and add your design and vector elements if you have them inside, when you are done just click file save or CTRL+S with your keyboard to save. 

Now return to the original PSD file and you will see your changes in place. The template with the changes we made looks like this :

Add some text if you like and you are ready to go.

Conclusion

Using a PSD template is very easy as you have checked. All you have to do is follow the steps in our article and you are done. Don’t forget to check the website Mockup Owl for free PSD mockups. Mockupowl.com is a Mockup design website with free downloads and a commercial license that you can use for free. The site offers a variety of Mockups in all domains that concern the design industry, and it’s important for Mockupowl.com that all these resources are unique and original.