What Is a Mockup? | How To
Always wondered what a “mockup” is but never managed to fully figure it out? Well, in today’s video, we’re going to break it down and see how easy it is to use one using Placeit’s Mockup Generator.
Follow along on our Envato Tuts+ YouTube Channel:
What Is a Mockup?
A mockup is a full-size model
of a design or device, used for product presentations or other purposes.
Think of it as a means of showing off what your
design will actually look like when it’s put out into the real world.
Depending on your skills and time, you can go through the
process of creating your own mockup using dedicated graphics software such as
Adobe Illustrator or Photoshop, but sometimes you might be better off using more
How to Use Placeit to Generate Mockups the Easy Way
Placeit’s powerful platform offers you an incredibly diverse mockup library that you can use in
combination with its online generator to do all the work for you.
Let’s say I’ve finished working on a weather app, and I
want to show the client what the home screen will look like on a real
In a manner of seconds, I managed to find a great iPhone X mockup that I feel that would be a great fit for the project.
All I have to do now is upload my design, either by using the
Upload Image button or by providing a link to it.
If I hover over the first option, it will let me know
what size the image needs to be in order to be a good fit.
As soon as I click on it, it will allow me to select my image, giving me the option of adjusting the position of my design, and its size.
Once I’m ready, all I have to do is click on the crop button, which will quickly give me a preview of what the final image will look
If I find that I need to make some quick adjustments, I
can easily do so by clicking on the little crop button, which will bring up the
Once I’m happy with the result, I can easily
download the image by simply clicking the Download button, which will charge me
a small fee for using the mockup.
As soon as I’ve downloaded
the image, I can open it up and then use it however I want to.
What I love about Placeit is that it has a huge library of mockups, some of which give you the option of making color adjustments on the
fly, like this t-shirt one.
As with the previous one, I’ll quickly go through the
process of uploading my image, and then if I take a close look at the top-right
corner of the page, I can see that I have an option called Shirt Color.
If I click on the little dropdown button, it will give me
the option of changing the t-shirt’s color using either one of the predefined
values or a new one of my own.
Once I’m happy with the result, I’ll press the Download button and then quickly go
through the process of acquiring it.
No matter what project you end up working on, you can
easily find a great mockup to help you bring your design to life.
Personally, I’ve found three designs that I
- this simple yet beautiful
business card one
- and finally this cute iPad one, which I plan on using in the
More Complex Alternatives
If you decide that you need
a little bit more control over your scene, then you might want to try some more customizable ones such as these:
Phone Mockup and Header Creator
This beautiful GraphicRiver mockup comes with a Photoshop scene creator that has 42 isolated objects and 5 mobile devices with smart objects for app or website design presentation.
Display Mockup Creator
maybe try this Envato Elements mockup, which allows you to quickly display your designs and layouts in a digital display showcase. Smart layers allow rapid replacement of screenshots. Once you update the smart layer, all displays running that screenshot are instantly updated!
No matter what method you end up using, mockups can easily help you bring your design to the next level by allowing the viewer to preview what it will look like in real life.
That being said, I hope you
found this tutorial useful, and I’ll see you in the next one.
Expand Your Designer Skills!
Just finished going through this quick tutorial, and feel like absorbing more knowledge? Well, if that’s the case, you’re in luck since I took the time to put together this little list that should keep you busy for the following days!
In this article, we’re going to talk about the top ten most useful tools in Adobe Illustrator. Whether you’re into icon design, illustrations or any other…
From file type to file format, we’re going to explore the meaning of these notions and learn what are the most common images that are used right now.
Learn how to create line icons both in Adobe Illustrator and Affinity Designer, and see how you can craft a usable finished product using a few basic shapes.
Learn all about the experience of switching from Adobe Illustrator to Affinity Designer, and the key obstacles to overcome.