Web Design Tips

How to make your own realistic t shirt template designs?

how to design a t shirt template mockup
2
how to design a t shirt template mockup

how to design a t shirt template mockup

Today, I will show you how to make a t shirt template design with the least knowledge of Photoshop or Illustrator. Yeh. You heard right. This will give you a chance to built up your portfolio by uploading your t shirt template designs on popular graphic portfolio making sites like Behance, DeviantArt or any other. You could also sell them or just make it a freebie for freebie lovers and upload your t shirt template designs to resource sites like Best PSD Freebies or FreebiesBug.

Literally, its not difficult as it looks to the beginners. You just have to follow the instructions below step by step and you would be able to design a professional looking t shirt template design.

You would need 3 things to start making your t shirt template design mockup:

  1. A high resolution photo of the t shirt template
  2. Adobe Photoshop (cs5 or higher)

Open up your Adobe Photoshop software and click file > open and click your t shirt template design mockup collection in the respective folders. In my case, I have 2 files i.e front t shirt template mockup design, back shirt mockup design. You could buy a t shirt template photo online from ShutterStock or grab a high resolution camera and click multiple shots of your plain t shirt.

How to take a high resolution photo

It’s easy to take a photo from your camera. Just hung your camera on your neck and follow the instructions below.

T-Shirt MockUp Front

T shirt template design mockup Front

T-Shirt MockUp Back

T-Shirt template design MockUp Back

Pixel Perfection

It is necessary to have a pixel perfect photo so it could help to define it and edit it if required in the future. For this, you should get at least 10 mega-pixel camera and it should do the trick.

Lightning

In order to get a nice photo, lightning plays the most important part. Adjust your location in such a way that an appropriate light falls on your t shirt. Avoid bringing your t short direct under sunlight.

Setting

Remove all the stuff that could make your click a little messy, distracted or destroys the overall image of the t shirt template. This includes things which aren’t considered to be photographed such as your hand or the shadow of curtains etc.

Multiple shots

Don’t rely on only one shot. Just to choose the best, click multiple times on different angle and try experimenting the lightning and setting till your get satisfied of what you have clicked.

Import

When you are done with your best photo shoot. Import all your photos to your pc or laptop and decide to choose 1 or 2 photos which would be served as your t shirt template design.

Apply filters and edit appearance

T-Shirt MockUp Front filtered

T Shirt template design MockUp Front filtered

T-Shirt MockUp Back filtered

T Shirt Template Design MockUp Back filtered

When done with choosing the best 2 from the rest. Open them up on your Photoshop by file > open up you files. In my case, I have 2 t shirt template design mockups i.e the front part of the t shirt template and the back side of the t shirt template.

It looks a bit natural and to make it a bit attractive, apply filters and/or adjust the appearance of the t shirt template mockup. Its very easy and nothing to learn about something. Click on the filter tab at the top and just start experimenting with what could enhance your photo to make it a more detailed and attractive.

In order to change the appearance of the t shirt template mockup, just click on the windows > appearance and adjust the curves, photo filters and hue/saturation to make a decent attractive t shirt template design.

In my case, I have applied 3 appearances/filters:

  1. Brightness (54) and contrast (57)
  2. Curve (auto)
  3. Hue/Saturation is set to ‘Red Boost’.

Those above appearances will make the t shirt template design mockup a more visible and enlightened mockup.

Defining logo/text face

convert to smart object photoshop

convert to smart object photoshop

Now for the most awaited part, making an editable screen for your branding stuff. For this,

  1. Make a new layer and name it something like ‘edit logo’.
  2. Now use a rectangle tool and mark the area  for the branding. Just make sure, it doesn’t touches the edges of t shirt template and where logo or illustration should look clean and visible.
  3. Convert the ‘edit logo’ layer to a smart object. To do this, simply right-click the logo and select ‘convert to smart object’. This would allow you to edit your logo in a secure environment when ever required. This makes the t shirt template usable for easy editing and adjusting the branding logo.
  4. Now, double click the smart object thumbnail and press ok when a dialog appears.
  5. A new tab opens and this is the tab which is an editing screen and you are free to make or copy a logo there. Changes made here will have an effect on the real t shirt template mockup.
  6. In my case, I have already a logo designed so I open up the logo and duplicate the layer into the editing screen tab.
  7. Make sure to reduce the opacity of the rectangle layer in the editing screen to ‘0’ or just make it transparent.
  8. Adjust your logo or illustration in a way that it looks clean and decent on the t shirt template.
  9. After you’re satisfied with your logo just save it (crtl+s) and click on the original t shirt template mockup, here you would see the your logo or changes made to it.
  10. You can edit the logo again in a fresh tab by clicking the same thumbnail of ‘edit icon’ layer.

After you have prepared the t shirt template design, it is essential to do following finishing tasks as well.

Shadow Overlay

appearance and filter photoshop

appearance and filter photoshop

It is important to have your logo a more realistic look on the t shirt template. You could see that your logo wouldn’t be looking as it was printed on the t shirt template on the first place rather than its just pasted on the t shirt template.

For this, you should make a new layer and name it something like shadow overlay and apply ‘level’ filter for this. There isn’t any accurate level values but experimenting it will show you how it could be made more realistic. After this, change the blending mode of the shadow layer into multiply and clip mask it in the realistic t shirt template design.

After this, clip mask any other appearance filters too like brightness filter to make your logo more enhanced and protruding.

T Shirt Template Outcome

T-Shirt MockUp Front Logo

T-Shirt MockUp Front Logo

T-Shirt MockUp Back Logo

T-Shirt MockUp Back Logo

This is it. You are now ready to make your t shirt template design, a part of your portfolio. Showcase or just brag your designs on Behance or DeviantArt.

You must switch your attention towards this now!

Abrar Ahmed
Abrar Ahmed is the co-founder of HowFreelance and ProDollars. He helps companies like Flexicom, Zero Defects, Kliir and Blue Artists grow their revenue by his unique web designs. He has also worked for crowd sourcing companies including Odesk, Freelancer and Fiverr. His web design and web development services are most affordable and is dedicated to teach web design beginners and professionals the quality web design tips and business effectively. You can contact through his Google+ page, Facebook Page or through Twitter
You may also like
3 January Freebies by HowFreelance
January Freebie: 3 Web Graphic Design Freebies by Themeforest
PSD Cleaner Website
Ps Review: PSD Cleaner Extension by MadeBySource
9 Comments
  • Cristine Oct 20,2016 at 5:28 pm

    Its not my first time to visit this web page, i am browsing this website dailly and obtain nice facts from here every day.

  • YIW Egbert Feb 19,2015 at 11:53 pm

    Thanks for such a nice tutorial of t-shirt template mockups.

  • ZeusB Feb 19,2015 at 11:52 pm

    Love it. A proper step by step tutorial. Will read later for sure!

  • DugTen Feb 19,2015 at 11:51 pm

    Can I get those shirts for my practice? Please?

  • Bufol@us Feb 19,2015 at 11:50 pm

    V for victory from victor! Vola..

  • Carmellia Feb 19,2015 at 11:48 pm

    Wow! I thought it could take us years to make this thing done! Awesome tips oh I just love it. You are so inspiring!

  • I.Paterson Feb 19,2015 at 11:46 pm

    Hi Abrar.
    Thanks for such a great and nice tutorial. Will try uploading work on behance after my exams 🙁

  • Barry Sting Sting Feb 19,2015 at 11:45 pm

    Nice tutorial! Thanks.

  • Audrey Baldwin Feb 19,2015 at 11:44 pm

    Its been a while designed a t-shirt for clients. Thanks for the tutorial. Some aspects are great and inspiring for me.

Leave Your Comment

Your Comment*

Your Name*
Your Webpage