So, you’ve got yourself a Photoshop mockup, but you’re not sure how to edit it with your own designs? Read on as we go through a step by step process on how to edit PSD mockups.
First of all, open up your mockup in Adobe Photoshop.
Photoshop mockups are normally fully layered. All the one’s we showcase are anyway. On the right-hand side of the Adobe software you will see a menu titled ‘layers’
From here, you’ll want to expand each layer which will reveal separate sub-layers.
Whilst your free to edit whichever sub layer you wish; most people will be looking to replace the main image. For example, if you had a browser mockup as shown in this tutorial, you’d be looking at replacing the default image with one of a website so it displays within the browser.
Most PSD mockups will have a layer or sub-layer titled named ‘Add your image’ – ‘Replace me’ or similar. Once you find this, highlight the layer and double click on the box icon as shown in this image.
Doing so, will open up a new tab in Photoshop of the smart layer. Now you have this tab open, we want to replace the default image with our own.
The easiest way to do this is to simply drag and drop your image file into this layer.
If you need to resize the image you’ve inserted, hold down the shift key, and using the mouse drag one of the corners until you’re happy with the size and placement. Once happy with the placement, hit the enter key to place the image.
At this stage, we want to remove the default image. You’ll notice in the right-hand side menu, there are various layers and they all have a little eye icon to the left hand side. Clicking the eye icon shows or hides the layer. So, let’s click the eye icon on each layer to hide that layer until we find the correct layer.
Now we’ve hidden the unwanted layers, we need to save the new layer. Choose file and then save.
Lastly, go back to your original tab in Photoshop, and your mockup will have updated itself with the changes you have made.
And that’s it. In just a few steps, we’ve taken a Photoshop mockup, edited it with our own content, and have a professional looking mockup. Now choose ‘file’ – ‘export’ and save your file as a PNG or a JPG.
