Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
by
Difficulty:BeginnerLength:ShortLanguages:
Final product image
What You'll Be Creating

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.

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.

placeit site preview

Step 1

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.

finding the right mockup

Step 2

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.

Step 3

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.

downloading the image

Step 4

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.

example of adjusting the color

Infinite Possibilities

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:

macbook mockup
Macbook Mockup by Placeit
business card mockup
Business Card Mockup by Placeit
  • and finally this cute iPad one, which I plan on using in the near future.
ipad mockup
iPad Mockup by Placeit

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.

graphicriver product
Phone Mockup and Header Creator

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!

envato elements product
Display Mockup Creator by Envato Elements

Conclusion

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.