Web Development: How to Make a Mockup Without Photoshop

How to Make a Mockup Without Photoshop

Final product image — What You'll Be Creating

Learn how to make a mockup without Photoshop by using the online mockup generator at Placeit to create a mockup online.

Mockups are a very effective way of showing a design in its intended form without actually investing any time and money in its production. You don't have to print your design on a T-shirt to see how it looks—you just need a mockup.

But how do you create mockups? For years, designers have been using Photoshop for this task, but it's not necessary anymore. In this short tutorial, I will show you how to make a mockup without Photoshop, in a few simple steps. I'll use a T-shirt mockup and an iPhone mockup as examples.

Follow along with me over on our Envato Tuts+ YouTube Channel:

What You Will Learn in This Mockup Tutorial

How to use Placeit, an online mockup tool
How to create a mockup online, without using Photoshop
How to create a T-shirt mockup online
How to create an iPhone mockup

1. How to Create a T-Shirt Mockup

Step 1

Go to the online mockup tool at Placeit.net. Find the Mockups tab and go to T-Shirt Mockups to create a T-shirt mockup online.

Step 2

Click Upload Your Design Here and select the image you want to see on the templates. Give it a moment to upload. I used this image.

Step 3

When it's uploaded, you'll be asked to crop it. In my case, it looks fine as it is, but you can easily change its size with the slider. When you're ready, click Crop.

Step 4

The online mockup generator will now apply your design to all the templates automatically. The image you have uploaded will be adjusted to each T-shirt in terms of the position, shape, lighting, and even colors.

Now simply scroll through a whole library of mockups presenting your design. If you find one that looks particularly nice to you, just click it to see it better.

Step 5

Here, you can still edit the design as you wish. You can change the color of the T-shirt to see if the design works for other colors, and you can still crop the image differently if you need by clicking this icon. I decided that my image would look better if it was placed slightly higher, so I changed it.

Step 6

If you're happy with how the mockup looks, and you want to show it to the client without the watermark, just scroll up and click the Download button. Here you can purchase the image or download it as a part of your unlimited subscription.

10 Awesome Free & Paid Templates to Get You Started

Now that you understand how to use a T-shirt mockup template, here are some terrific apparel templates you can start practicing on to get you started. You will create a mockup online in no time and very easily.

1. Young Woman Wearing a Snapback Hat Video Mockup Standing Against a Brick Wall

Video is everywhere these days, and we would be remiss if we didn't include a video mockup. This one is a nine-second clip featuring a young woman standing against a brick wall. The camera pans slowly from left to right as the woman smiles at the camera.

2. Folded T-Shirt Mockup Lying Next to a Camera and Clothes on a Bed (FREE)

Maybe you want to show off a fashion brand or a travel logo. Either way, this free T-shirt mockup template is another great way to incorporate a real-life context with a neatly folded T-shirt lying on a bed next to other items. The perfect flat-lay to show your designs to their best advantage.

3. Man Wearing a T-Shirt Video at a Parking Lot

One of the best advantages of using our awesome online mockup tool is that you can also see how your mockup looks in video, not only in an image. Like this pretty cool video of a man walking through a parking lot and wearing a T-shirt. Take advantage of this feature and make a T-shirt mockup online!

4. Hoodie Mockup With Couple

Looking for just the right couple to show off your hoodie design? This mockup of a cool young couple can be used for a myriad of purposes, including edgy hairdressing salon, tattoo parlor, laidback clothing line, and more.

5. Video of a Woman with Bangs Wearing a Hoodie

Next up, we've got this video mockup of a woman wearing a hoodie. This is a great opportunity to see your own hoodie design in action. Go create a mockup online at Placeit!

6. Woman Wearing a Round Neck T-shirt Mockup (FREE)

Featuring a young woman standing behind a counter, this free T-shirt mockup template uses a real-life context to bring your designs to life and help people visualize themselves wearing your T-shirts. This is a simple and effective T-shirt mockup online.

7. Hoodie Video of a Girl Hugging Her Mom at a Park

If you've browsed our online mockup generator, I'm sure you've found an extensive variety of options for your mockup. We also have mockups for kids' clothes, like this girl wearing a hoodie. Check this cool video for your next mockup online.

8. Sweatshirt Mockup with Couple

Here's a cool sweatshirt template of a couple, one of whom is wearing a sweatshirt and facing the camera directly, which allows your design to be seen clearly. Another great feature of creating this mockup online is that you can change the background to whatever colour you want.

9. Volleyball Jersey Maker - Woman Receiving the Ball

If you need a stylish jersey design mockup for volleyball, this is a great template to consider. The image in the template is shot against a black background, and you customize everything from the color of the shorts to each color in the ball. Our online mockup tool has plenty of customization options for you.

10. T-Shirt Mockup Featuring Man Wearing a Yellow and Green Bracelet (FREE)

This simple, free T-shirt mockup template with its neutral background would be a great way to show off products or services targeting a male audience. Just upload your image, select the desired T-shirt color, and you’re done.

If you're interested in other cool mockups for sweatshirts, hats, tote bags, etc., check out these handy roundups of the best apparel mockups: