Getting your unique designs on a mockup is undoubtedly among several designers’ wishlists. It makes a design stand out and look authentic and engaging. This simple tutorial is to help designers know that nine times out of ten, they should look around for free tools that solve their problems before painstakingly deciding on and signing up for paid alternatives that have overshadowed the market due to the mere force of their brand names. Nonetheless, we hope this tutorial will also assist other people who might not know what a mockup is. You might not be a designer, but you have seen a brand’s logo on a storefront, logos on branded bags, or your friend’s book cover on a life-like book, and you might have wondered if those things really existed and how much they must have spent to be able to pull it off. Well, good news, those bags, business cards, hoodies, magazines, boxes, and sometimes vehicles are called mockups, and they can be somewhat owned by anyone (virtually). They’ve been around for ages, and the more they increase in popularity, the cheaper the technology behind them. What’s more, you can get one right now at no cost at all.
Without further ado, here are some ways to get beautiful free mockups without knowing anybody.
1. Using the Inspect Element Feature on Your Web Browser (for Web Pages)
Several modern web browsers have inbuilt tools to view and tamper with the source code of any web page. To use the inspect element feature on Chrome to get a screenshot of a mockup of your web page, follow the steps below.
- Open the web page and right-click anywhere. At the very bottom of the dropdown menu shown below, you’ll see the inspect option.
- Click on ‘inspect.’ You should see the screen split and a window similar to the one below appear. It’s okay if you don’t see the exact same thing, but the layout will be similar.
- At the top of that new window or area (whichever you prefer), you should see an icon that looks like two mobile devices. This is the button for the device toolbar. Click to toggle the device toolbar or simply hit “Ctrl + Shift + M” (without the + signs, of course).
- The main web page shrinks into what you will see on a mobile device. Also, a three dots menu shows up at the top bar above this mobile device view. This contains some exciting features that we might cover in a subsequent article. The dropdown “Dimension,” as shown below, lets you select from different device sizes. Unfortunately, not all devices in this method have mockups. You can also change the view from portrait to landscape by clicking the icon below.
- When you are satisfied with the orientation (landscape or portrait) and other settings, click the three dots icon and select “show device frame.” Great.
- Now, you could either click the three dots again and select “capture screenshot” not “capture full-size screenshot” this time as this will do something we have already covered in another article. You could also hit “Ctrl + Shift + P” on your keyboard and scroll down the menu until you get to “Capture screenshot”.
- Whichever path you choose, your screenshot will be saved in your downloads directory.
Things to Note About This Method
- More often than not, you will have issues taking the screenshot of specific areas because, when taking the shot, the browser might shift the capture to an area before that which you want.
- You cannot get the mockup to sit at an angle or do similar fun stuff you see other mockups do elsewhere.
- Not all devices have device frames here.
Nonetheless, you might get a mockup on a transparent background which is one of the setbacks of the following method we will show you. And for goodness sake, you’ve got a free mockup at all, so, hot dog!
2. Using a Free Account on Canva
If you haven’t heard about Canva, chances are you’ve been spending a lot of time doing things or trying to do things some guys have already done for you sitting practically on a platter of gold. We are not being paid to say this, but honestly, Canva is an excellent tool for everyone, experts and otherwise. We will endeavor to provide more tutorials on some less-known things you can do with a free account on the platform. To get a stunning mockup, follow the steps below.
- Sign up for a free account on Canva.
- You can select any of the recommended options shown below, but we will simply use a custom screen size to show the tool’s versatility. We have created a “canvas” with the dimensions 1400 x 1000; therefore, you might not get the recommendations we’ve shown in our screenshot, and your window might look different.
- Again, there are multiple ways of getting mockups on Canva.
i. A device frame from their available frames (thankfully, most of them are free).
- Search for “frame” in the search bar or choose it on the menu on the left.
- Scroll down and choose a suitable frame from those highlighted in the images below. The other frames are mostly shapes.
- The frame is loaded to your design window. Now drag your image onto the frame, and it slips in automatically. You can change the image by dragging another one onto the same frame.
ii. The “Edit Image” Feature
After dragging the image you want onto your design window, click on the image, and you should see the menu shown below.
- Click on “Edit Image,” and you have a different menu on the left side of your screen. Scrolling down this menu, you can see a lot of options that expose how that brand in your mind might have gotten that impossible-looking product image you saw some days ago.
- Great, our mockup is finished. You can now head over to the menu at the top right corner of your screen and choose download from the dropdown menu as shown below.
- You might need to change the file type from pdf to png or whatever (see image above).
- If you have multiple pages, click on “all pages” and select the only pages you want to download. If you choose to download more than one page, you will get a zip file which you will need to unzip.
iii. Canva premade template
Last on our list, you can choose a premade template from Canva templates. This is a good alternative. It helps you see how other designers and brands are using mockups to showcase their products and helps you get a beautiful template that you can easily tweak colors and fonts to suit your brand in a matter of seconds.
- Click on “Templates” in the menu on the left. Depending on the speed of your connection, it might take a while to load (but it is worth your while).
- Click inside the search box and search for something useful like “devices” or “app” or “website” or “pitch” or another keyword that you are sure will include device images.
- Select a template of your choice. It is important to note that if you need the mockup for a place where you can upload a gif, you should pick a template that has an animation. Animations are easy ways of captivating people’s attention.
- Your template has been uploaded to your window. You can now change the color and font by clicking on whatever it is and checking changes available to you in the top left of your design window.
- Drag and drop your image onto the device mockups, and the trick is done.
Other Free Tools
There are several other free tools, such as Magic Mockups and Mockuper, but we recommend you use only tools that have an SSL certificate (HTTPS, not HTTP).
Other Not So Free Tools
Placeit by Envato: A free account on Placeit gives you access to mockups listed under freebies.
Thanks for reading. We really hope this tutorial was helpful to you. Let us know which method is your favorite and why. If you know of any other great tools that can be used to get free mockups without much stress, do let us know in the comment section below. Have any topics you’d like us to cover? Let us know via any of the forms on our site. Please use the title “Article Ideas for Sapphirin”. Or you can write to us at hello.sapphirin.com.
0 Comments