Drag and drop your designs in the design dropzones and use the visual editor to change the
design size and position.
Generate the mockups!
If your design appears glitched similar to the above, it is likely due to a missing
displacement map in your PSD mockup template. If this is the case, you should have a separate
PSD alongside the primary mockup PSD that is named something like displacement.psd
You can fix your mockups by embedding your displacement map PSD in the mockup PSD by following
Drag and drop the displacement map PSD onto the canvas and hide it by clicking its
Navigate the project layers until you find the SmartObject layer responsible for displaying
your design. If it has a displacement filter active, it will have a arrowhead pointing
downwards or to the right. The same SmartObject might appear in your PSD more than once, so
make sure you find the SmartObject that is visible and has the arrowhead.
Press the arrowhead to reveal the active Smart Filters and double-click the Displace
From the Source dropdown, select the displacement map PSD you just placed in the document.
You can adjust the horizontal and vertical parameters to change the intensity of the
displacement. The more intense the displacement, the more warped your design will appear.
Press OK once you're done.
Save this updated PSD from File > Save As PSD.
Load your new PSD into MockCity.
Under the hood, the MockCity mockup generator uses free web-based editor Photopea. Photopea, a project by Ivan Kutskir, brings a lot of Photoshop's functionality, including
SmartObjects, to the browser and is able to read and write PSD files.
Alternatively, you can also use our plugin for Photoshop to connect MockCity to your local Photoshop installation.
The best way to support MockCity is to upgrade to
and gain access to premium features. Additionally, you can also use our affiliate link when purchasing
premium PSD mockups from CreativeMarket. This will give us a small commission at no extra expense to you.
It would mean the world to us if you support MockCity by spreading the world and sharing our
mockup generator with others who might find it useful. If you have a larger audience, check
out our Affiliates program to earn commissions.