Shopware Agency
Shopify Agency
JTL SHOP 5 Agency
Gambio Agency
Magento Agency
WooCommerce Agency
PrestaShop Agency
Xentral Service Partner Enterprice
VARIO Service Partner
Odoo Agency
Amazon Agency
eBay SEO
Otto SEO
Google SEO
Google Ads
Social Media
Facebook Ads Agency
Instagram Ads Agency
ChatGPT Agency
Link Building Agency
Ecommerce Tutorials
eCommerce Podcast
SEO Tools
AI Tools
eCommerce Facebook Group
Use free mockups
Find and customize mockups for your online store
Find out how you can use free mockups to enhance your online store here. We explain what mockups are, where you can find them for free, how to use them and which of the 3 variants shown is our favorite. So it’s best to watch until the end.
High-quality graphics for the online store
Have you ever wondered where the high-quality graphics like these or these or these in some online stores come from? These are so-called mockups. I’ll now show you what this is and how you can create your own mockups for free in just a few minutes without any prior knowledge.
What are mockups?
But what exactly is a mockup?
Wikipedia gives the German term “Vorführmodell” or “Demonstrationsmodell”. As we can see, the term is used in various industries, from dental technology to architecture. And even in web design itself, there are sometimes different meanings. In our case, it is more or less a conventional image, but one that is designed in such a way that its own content is correctly incorporated in perspective. Sounds complicated, but it’s really quite simple. A classic example would be a laptop mockup.
Use free mockups from Unblast
We downloaded this once free of charge and received several sceneries both as a psd, i.e. Photoshop file, and as a JPG file. Let’s open both and I’ll show you what’s special about a mockup file. Let’s take the eBakery logo as an example. If we simply compare the layer structure in Photoshop, something becomes immediately clear. The JPG file is simply a single layer. If we were to set these to invisible, there would be virtually nothing left. In the mockup file we have the background, the shadows, the screen, the MacBook etc. each as a separate layer. This not only gives us the opportunity to process everything separately, but also to work correctly in terms of perspective without any effort. The eBakery logo serves as an example. We want to put this on the screen and make the background black. With the JPG I would have to select an area first. Then I dye it black. Now I add the eBakery logo. In order to adapt the logo to the perspective of the screen, I would have to work in perspective, which is not that easy.
Use free mockups in Photoshop
In a mockup file, on the other hand, you work with smart objects. We can see what they do when we do exactly the same thing again. And I think in comparison to the JPG it becomes clear where the advantages of a mockup file lie and what is meant by correct perspective adjustment. However, this can be applied not only to digital goods such as software, online stores and the like, but also, for example, to the sale of goods in the form of a product. for clothing. The creation of mockups is virtually the core task for print-on-demand retailers.
What is the advantage of a mockup?
Now that it’s clear what a mockup is and what the advantages are, I’d like to show you three ways of creating your own mockups, i.e. how to use them. The simplest option is online generators such as Placeit by envato. Placeit can be used free of charge at first, but will then be loaded with advertising. Here you will find mockups of all kinds, from clothing and business cards to laptop mockups. For complete beginners in the field, without Photoshop and Photoshop knowledge, this is the easiest and fastest option. All you have to do is upload what you want to have displayed on the screen, adjust the size and you’re done. This is then applied not just to a single mockup image, but several within seconds. As a paying subscriber, you also have more customization options, such as the color of the background. Here you can see what this can look like for clothing.
Mockup Online Generators
The second option, which you have already seen, would be to obtain mockups from free sites and then edit them in Photoshop. One site for this would be Unblast.com, where we also got our mockup from. These mockup files, whether free or paid for, are always structured in almost the same way. There is usually a Smart Object layer at the top, which is intended for your content. You can recognize that it is a Smart Object level by this symbol. We double-click on it and see the design that we have just seen on the screen, but in 2D view. For example, do you want to use place the eBakery logo on a black background, you must create a new layer, fill the area with black and then simply drag and drop in the logo.
Use free mockups in Photoshop
Adjust the size and use the pink guide lines to place your logo in the center. If you are satisfied, simply click Enter again. If you want to reposition it, simply click on Command + T again. Now save with Command + S. This means that the change in the Smart Object also affects the original image. In principle, that’s all you need to do. But sometimes you reach your limits with free mockups. In this case, it looks high-quality, but only has a plain white background.
Using free mockups - the best option
Probably the best and highest quality option would be to work with paid stock footage sites, such as Envato Elements. In the graphic templates section you will find lots of high-quality, scenic mockups. Let’s download this one for demonstration purposes. As you can see, specific instructions are even given as folder titles. However, if you are not sure, you can use the eye to switch the layer on and off to see what has changed and which area the changes would cover. In this case, we again have a smart object that can now be customized in exactly the same way as before.
And this is what the whole thing looks like in the end.
All three variants in comparison
But let’s compare all three variants in conclusion and explain why the last variant is still the best. If you want to create mockups quickly, without prior knowledge or Photoshop, Placeit is a great thing. You are simply more limited in your options here. In Photoshop, you can adjust the saturation, contrast, color values, etc. for each layer individually afterwards. Furthermore, there is nothing to be said against using free mockups. However, if you have to pay for it, this is a small hurdle that not everyone is willing to take. This means that Envato Elements is less likely to use the same mockup as the competition. You also have a larger selection and usually more scenic mockups, like the one we have just edited.
Using free mockups - Summary
But what would Placeit cost now?
Placeit is currently offered for 8.49$ per month.
As diligent viewers already know, Envato Elements costs €14.50. In the end, you will have to decide how much time you want to put into it and whether you want to do it for example. Envato Elements for other tasks anyway, so it’s worth it. However, if you have any further questions, you have two options.
Either write us a comment or contact the eBakery experts directly and make an appointment here.
Do you have questions or need an individual offer? Do not hesitate to contact us.
Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.
