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 basic tools.
You can find some great mockup examples here:
How to Use Placeit to Generate Mockups the Easy Way
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 device.
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 like.
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 previous window.
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.
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 absolutely love:
- this casual MacBook one
- this simple yet beautiful business card one
- and finally this cute iPad one, which I plan on using in the near future.
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
Or 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!