What You Will Need
Before you start working with our mockups, make sure you have the following:
- Adobe Photoshop (CS6 or newer versions)
- Your design ready as a PSD, JPG, or PNG file
- Basic knowledge of Photoshop layers and Smart Objects
- A few minutes of your time
Our mockups are designed to be user-friendly, so even if you're new to Photoshop, you'll be able to follow along with this guide.
Download Your Mockup
After purchasing or downloading our free mockup:
Check your email
If you purchased a mockup, check your email for the download link. For free mockups, the download should start automatically.
Save to a convenient location
Save the ZIP file to a location on your computer where you can easily find it, such as your Downloads folder or a dedicated Mockups folder.
Verify the download
Make sure the download completes successfully. Most mockup files are large due to their high quality.
Unpack It
Once you've downloaded the ZIP file, you need to extract its contents:
Right-click on the ZIP file
Use your operating system's built-in extraction tool or a third-party program like WinRAR or 7-Zip.
Select "Extract All" or similar option
Choose a destination folder where you want to extract the files.
Wait for extraction to complete
This should only take a few seconds depending on the size of the mockup package.
Read Info About It
Before opening the mockup file, take a moment to read any included documentation:
Look for a README file
Most of our mockups include a README.txt or INFO.txt file with important information.
Check for special instructions
Some mockups may have specific requirements or features that are explained in the documentation.
Note the file structure
Understand what each file in the package is for, especially if there are multiple PSD files.
Open It
Now it's time to open the mockup file in Photoshop:
Launch Adobe Photoshop
Make sure you're using a compatible version (CS6 or newer).
Open the PSD file
Go to File > Open and navigate to the extracted mockup PSD file.
Wait for the file to load
Depending on the file size and your computer's performance, this might take a moment.
Find Smart Object Layer
The most important part of using a mockup is finding the Smart Object layer that contains your design:
Locate the Layers panel
If you don't see it, go to Window > Layers to make it visible.
Look for the Smart Object layer
Smart Object layers usually have descriptive names like "Your Design Here", "Design", "Front Cover", etc. They also have a special icon in the corner of the layer thumbnail.
Identify the Smart Object icon
Smart Objects are indicated by a small icon in the lower-right corner of the layer thumbnail, as shown in the image.
Paste Your Project
Now it's time to add your design to the mockup:
Double-click the Smart Object thumbnail
This will open the Smart Object in a new window. This is where you'll place your design.
Add your design
You can copy and paste your design from another file, or use File > Place to add it. Resize and position as needed.
Save and close
Once your design is in place, press Ctrl+S (Windows) or Cmd+S (Mac) to save, then close the Smart Object window.
See the result
Your design will now appear in the mockup, automatically adjusted to fit the perspective and lighting of the scene.
Change Background Color
Many of our mockups allow you to customize the background color:
Find the background layer
Look for a layer named "Background", "BG", or something similar in the Layers panel.
Select the layer
Click on the background layer to select it.
Adjust the color
Depending on how the mockup is set up, you can change the color using a Solid Color Fill layer, a Color Overlay layer style, or by directly editing the layer.
Choose your color
Use the Color Picker to select a color that complements your design.
Troubleshooting
If you encounter any issues while using our mockups, here are some common solutions:
Smart Object Not Updating
Make sure you saved the Smart Object
After editing a Smart Object, always save it before closing the window.
Try updating manually
Right-click on the Smart Object layer and select "Update Modified Content".
Design Doesn't Fit Properly
Check the dimensions
Make sure your design has the correct dimensions for the mockup. This information is usually in the README file.
Adjust within the Smart Object
Reopen the Smart Object and resize your design to fit properly.
File Size Too Large
Reduce resolution for web use
If you're only using the mockup for web, you can reduce the image size to 72 DPI.
Export as JPG
For final presentation, export as JPG instead of keeping the large PSD file.
