If you don’t have any clue what this post is about, let me start with the basics. A mockup is a design term used to describe a scale or real size model of a design or device, they are used to demonstrate or present a product to the public (or a client) in order to gain criticism, release a preview of the actual product (not just a prototype or simulation) and a good way to introduce your design to the masses. Now, what I’m referring in this post, is the classic PSD file used to present designs on the internet in a very aesthetically pleasing way without having to do everything yourself, all you have to do is replace a smart object (a .PSB file) which can be done when you double-click a layer that’s supposed to contain our design to showcase (often, the layer as a recognisable name with the words “replace” or “design” in it). I WILL NOT include way too many elements, because I will only select the best and most necessary ones in order to reduce time-wasting and extra page-loading time. Some sites may require registration or a social media payment.
With the existence of numerous devices, comes the need to have a flat or realistic mockup of it with our design in it; various amazing designers have done such a great work that we even get to use 3D and realistic mockups that look straight up natural. What can be done range from browser and operating system windows to ultra-realistic computer screens, mobile devices, posters, T-Shirts, mugs, boxes and much more! Wanna check out an example?
Yo! Show me the example
Table of Contents
How do I use them? I am kinda lost…
Hey, it’s very easy to be fair, all it’s needed is Adobe Photoshop (you need CS or superior, older versions won’t open the PSB file) and patience in case you have a very low performance computer. First, download a PSD file from the list below and put it in a good place (like a resources directory or something, don’t let your downloads folder be messy). Open it and locate a layer that has a name with the words “replace”, “your”, “design”, “here” or any other that has a little rectangle on the lower-right corner of its thumbnail. This will open the PSB file and everything in there is editable, when you are done, make sure to save it and when you return to the PSD, you will eventually see the changes. Now just export to JPG or any other format to showcase it to your audience or clients.
This last GIF is at least 1 MB, if you can’t see it, wait 10 seconds or less.
Mobile and other devices
CLICK on the images to go to their correspondent download/more info site.
Computers (Laptops and Screens)
CLICK on the images to go to their correspondent download/more info site.
Corporate Identity, Business Cards & Stationery
CLICK on the images to go to their correspondent download/more info site.
Printed digital arts (Magazines, Posters, etc)
CLICK on the images to go to their correspondent download/more info site.
Apps, Browsers and Responsive Showcase
CLICK on the images to go to their correspondent download/more info site.
Finishing the list
Okay! You’ve managed to go through the entire list of mockups I’ve put in here, and now it’s time to say goodbye and see you on the next article.
If you have some feedback use the comment section down below, maybe you want to report a broken link, make a claim, give your thoughts or as a question related to the topic in hand. As far as I’m concerned, all the elements here are free, but I might have made a mistake while checking each of the mockups’ sites and some of them aren’t free at all. Let me know if that’s the case, or just say something! You can also subscribe to my twitter or Facebook page to follow the blog; share this post with your friends at let the word be out there, help me grow the audience and I’ll help you out too 😉 .
Creativenauts 
Ask, comment, or give feedback :)