When designing for apparel, presentation of your proofs is very important. A detailed image of a piece simply will not suffice as an adequate proof. You want to hit the design home, and mocking it up on a t-shirt is what’s going to do the job. Apparel designs are much different than regular print jobs because you can potentially design around every nook and cranny of the garment, this is something you won’t be able to illustrate to your client with some large .jpeg. They hired you for your creative knack, and that’s what you’re going to need to bring to the table.
Now here at Go Media, we’re always mocking up something – many of them tees – and after a while we realized that providing a pack of tees geared towards designers for presentation purposes would be very cool. And we did just that… a twenty piece pack of tees that comes separated in five colors with four variations of each. Fronts and backs, clipping masks to isolate your artwork onto the appropriate areas, and even a shadow layer to placed conveniently on top to give it that authentic printed look! We took a lot of time and pride out on these to make sure they came out just right, because bringing the best to our clients is a goal we all share as designers.
In this tutorial, I’ll be using a design that I created for Kick Rocks – an up and coming apparel company.
Author’s note: This process will also cover how I mocked up the “Designing on a Budget” tutorial’s end result (Vomit Whistle) onto a tee – which is the very thing that helped spark the idea to make the pack and this accompanying tutorial (thanks “nobahdi” who asked the initial question of how the shadows were applied to the tee, and everyone else who commented on the tutorial!).
Now we’re going to take our tee from the pack (Blue Front Wrinkled.tiff file) and open it up in Photoshop.
Now focus on your layer panel. This is the structure we came up with for these files.
Since the design that we’ll be using is intended for a white shirt, we’ll need to change the shirt layer that’s currently blue, to white. Before hand, I make the background layer a dull grey so we can distinguish the white shirt completely from the background. I then use the following settings using the Hue/Saturation tool to achieve the desired look.
Automatically you’ll notice that the shadow layers look way too dark. So we’re going to bump the opacity down to 50%.
Now we import our art. Open the file in Photoshop (and make sure it’s a hi-res export) and place it in the Your Art layer. Dragging it will work, copy and pasting, etcetera, etcetera.
Now we’re going to use the mask layer to make our printable area the only visible spot on the design. Grab the actual mask from the “Mask” layer (not the whole layer), and drag and drop it right onto the “Your Art” layer. You should now have no excess left around your shirt, and all wrinkles, the collar, and overlaps are preserved as if the shirt were truly printed. The best part is that you can still edit and move around your design. Make it bigger – move it off the edge – whatever – it will stay within the bounds of the shirt because of the mask. Check out the following image to get a better idea of what I mean here.
Now your mockup is done. If you feel you need more shadow now that the design has been placed in… then bump up the opacity of the shadow layer and you’re good to go.
Author’s note: I like to get snazzy so I’ll place some crazy texture on the background and fidget with it to make look all dark and complimenting to the garment. These additional presentation doo-dads often get the client very excited and way more interested in your work, versus a dull and boring round of proofs. And nobody wants to be stuck re-illustrating 3 to 5 times because of a half-assed proof’s inability to wow the client.
We’ve also got a quick video of how to set up the layers on vimeo.
I hope you enjoyed this tutorial and got to learn a little about the functionality of our new Apparel Template pack. Taking a progressive approach to the mock-up phase of apparel design is something that should be taken very seriously. As always, we provide (and use) the necessary tools to do so. Thanks for reading everybody, take care.
Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also work for clients and sell stock artwork and design files on the Arsenal.
August 7th, 2008 at 1:41 pm -
finally some good tee temps
August 7th, 2008 at 2:12 pm -
I have a sneaking suspicion that in the near future, some VERY well designed t-shirt mockups will be hitting DBH, Threadless, and coutless other apparel websites. Looks awesome- its always easier to sell something to a client that has that extra wow factor.
August 7th, 2008 at 2:26 pm -
These are great! We’ll definitely be getting these at work – we currently use illustrated ones that look a bit too “cartoony” – I much prefer the realistic look.
Go, Go Media!! :)
August 7th, 2008 at 3:10 pm -
hahahah its stuff like this that makes you very clever people. So how do I go about getting a free one?
August 7th, 2008 at 3:23 pm -
OMG Dave knows my name. This template is much better than the crummy ones I’ve pieced together using the same techniques you mentioned with the Vomit Whistle tut. As always, very impressive.
August 7th, 2008 at 3:45 pm -
it surprises me how many designers don’t even think to mock up their tee proposals. i’m sure this pack will sell like mad!
August 7th, 2008 at 4:12 pm -
Real designers have been doing this for years. It’s dead easy to do on your own. Kudos for Go Media though to help out the youngsters.
Check out a dude in Cali who is killing it right now
http://www.coroflot.com/bounds
He has been using photo real tee’s for ages…
August 7th, 2008 at 4:49 pm -
This is good stuff!!!!! You guys think of everything! Great Job!!!!! Going to get the credit card right now.
August 7th, 2008 at 5:21 pm -
You’re the man Jeff. You’ll be seeing these mock-up tees throughout the world :) Thanks for doing this. Hope they sell well for you.
August 7th, 2008 at 5:22 pm -
Sorry, I thought Jeff posted this my apologize, I haven’t met you Dave but you’re the man… thanks for the post
August 7th, 2008 at 5:52 pm -
Brilliant. I wish I had a reason to use this though. I don’t do t-shirt designs.
Maybe I’ll start though…
August 7th, 2008 at 6:06 pm -
THE ARSENAL IS NOT WORKING!, CALL 911!.
August 7th, 2008 at 8:12 pm -
deewwwd. This is going to be so handy!
August 7th, 2008 at 9:29 pm -
regarding the “export to hi-res” step, from illustrator, for example, that’s export>psd file>300 dpi right? what’s the difference if a just use the smart objects copy/paste move?
TIA :)
August 8th, 2008 at 12:15 am -
THANKS TO EVERYONE FOR THE GOOD FEEDBACK!
And @ Gio: You’re correct. Thanks for pointing that out.
August 8th, 2008 at 12:17 am -
Sorry, the comment posted and I wasn’t finished.
Yeah, you could do the same with the smart object copy/paste function.
Hope this helps.
August 8th, 2008 at 12:29 am -
Very cool. We’ll be geeting this ourselves. Thanks GoMedia!
August 8th, 2008 at 12:37 am -
If anyone goes to the Arsenal and it’s “not found” don’t worry, it should be fixed sometime soon.
August 8th, 2008 at 2:40 am -
These seem pretty cool, but yeah, nothing really new. I guess they are great for those who don’t have time or the knowledge to figure out how to do it themselves. The price seems way to high for something that only takes a shot of the camera and using a mask. I would buy if it was like $12.
Hey, maybe I’ll make up some FREE templates and help people out who can’t afford $29 for these..or just don’t think the price is justifiable. And the original cost was $69!
August 8th, 2008 at 5:38 am -
wow it’s fabulous!
August 8th, 2008 at 8:39 am -
Great stuff, mega-awesome even!
Are there any tutorials or resources showing what print processes are available for T-shirts, and how to design for those.
I’ve done iron-on on the cheap using an inkjet a & opaque transfers that seem to hold the color better, but never got the chance to design for silkscreen or any other real print processes.
thanks again.
August 8th, 2008 at 11:13 am -
high five to you guys, the tee shirt templates are the poo and thay made all the difference in the world for some designs that i have been trying to put together. they put a whole new prespective on what the finished design will look like. thanks a bazillions.
August 8th, 2008 at 2:04 pm -
Great work Dave. I’ve been using my own flix and getting really good results. My technique differs slightly though.
I use a white tee, a color fill of the cutout set to Multiply and the art layer. Merge down the art layer into the color filled layer and BAM! Instant color tee mockup. For white tees I just use the pic and set the art layer to Multiply.
Quick and dirty and no adjustments necessary except for selecting the right color for the tee.
Might be an easier setup for the next edition of this set.
August 8th, 2008 at 2:44 pm -
This is great. Just ordered mine.
August 8th, 2008 at 10:24 pm -
next we need instructions on how to do proper screen separations with photoshop!
August 9th, 2008 at 10:21 am -
This is a smart idea, but my question is this, is it only t-shirt templates? Are there long sleeve shirts, hoodies, regular crewneck sweaters? If not, I would definitely consider it for the next pack. Maybe even sweat pants as well. I just think it’ll be useful and helpful and I know most people design tees, but their are occasions where something else will pop up and doing it on your own can be a bit of a time waster. Again, it’s a suggestion and I appreciate you guys creating these templates.
August 10th, 2008 at 12:49 am -
@Joe – We’ve got a lot more coming actually. Girls tees, hoodies, tanks, etc. And also shirts that appear more fitted (mannequin shots). Apparel Templates are something we’re really going to work hard on. So you can count on it!
August 11th, 2008 at 12:46 pm -
Brilliant idea for the arsenal. Beats out buying a whole bunch of tees to build out my own set of templates.
Great tutorial too.
August 12th, 2008 at 8:37 pm -
Hey Jeff, I was just going to say I wish the tees were slim fitted ones. I guess those will be coming so I’ll be waiting for that. =)
August 19th, 2008 at 9:40 am -
I got to say that is foookin brilliant. I have dicked around with faux T’s so many times in the past and used nasty pattern template sheets as well.
A rather clever idea.
August 21st, 2008 at 6:00 pm -
Great work. Yeah, the method has been around for ages, but it’s all about the WAY you do it. I can’t tell you how many crappy versions I’ve seen, even if they were using good templates. Dave’s version looks just like the ones you’d see on an online shop like A&F. Very professional.
And I can’t wait for the other apparel templates!
August 21st, 2008 at 6:48 pm -
I might have to get the tee pack because I’m too lazy to photograph my own!
August 27th, 2008 at 2:01 pm -
Man I am in love with what you guys have done . I put my site up for testing not to long ago and I could not put my shirts up because i had no pictures of them done by a photographer well I no longer have to worry about that. Thanks for this one I know i have to by some vects from you guys now
August 28th, 2008 at 1:13 pm -
These are awesome, but it’s very important to know the specs of what your t-shirt printer can actually print. I’m the art director at the #10 screenprinter in the country, and we wouldn’t even be able print the image in the tutorial ash mocked up because it’s too large for our presses. You should work closely with the printers if possible to make sure you know their specs, so you don’t show your client something that they won’t be able to get printed. Ask me how often I get file mockups sent to us with art that is completely unprintable using standard screenprint setups.
September 5th, 2008 at 11:14 am -
these templates are too sweet! Thanks so much GoMedia!
September 7th, 2008 at 9:20 pm -
So I bought these not to long ago, and finally decided to put them to use. And Hooly, you guys made the PSD so easy just about anyone wanting to tamper around with Apparel mock up can use it. Love it, even thinking about submitting my first ever tee entries at DBH on these bad boys.
Would love to see Hoodies, and other such apparel PSDs, I’m a definite shoe-in!
September 8th, 2008 at 6:34 am -
A very nice job. Gave me a lot of ideas!
September 17th, 2008 at 3:27 pm -
Hey @CottonFactory – I know your using http://tinyurl.com/6kejwb to make your templates http://tinyurl.com/4ljcfa – you think your all that!
September 19th, 2008 at 12:37 am -
This is Amazing! cant wait to buy it.
aside from the template pack
you should post a tutorial on how to make sweet backgrounds like u did on the final copy of the shirt template design! :D
September 22nd, 2008 at 2:20 pm -
I love the realistic look. When I mock up designs for my webstore customers dont even realize they are not real shirts. Thank you go media!
September 23rd, 2008 at 12:58 pm -
Another tip – use the shadow layer and export a displacement map. Then you can displace the actual artwork to bend with the folds of the tee.
When I do this I always include an image of the original artwork un-altered so the client can see both.
Great work guys, as always, you save me time by doing the production work for me.
September 23rd, 2008 at 2:33 pm -
I purchase the templates, but I’m having problems with the tutorial. I can’t seem to get the mask layer to apply correctly. I’m unable to drag it to the “your art” layer, I only get the “can’t do” circle with the line through it when I try. Anyone able to help…PShop CS v.8
Thanks.
September 23rd, 2008 at 5:49 pm -
Hey Roland. So watching the video & unlocking the layers didn’t help? If you send me a screenshot / video I’ll know exactly what’s going on and can hopefully fix it. Sorry!
September 24th, 2008 at 1:44 am -
man how do you get those effects on the texture in the background.
a mini tut on how to do that would be greatly appreciated
September 24th, 2008 at 12:44 pm -
CJ, he used one of the Go Media metal textures that you can buy right on this site.
October 2nd, 2008 at 11:45 am -
Hey there. How close is GoMedia to the apparel pack (girls shirts, hoodies, etc.)? I’m ready to buy. I don’t wanna buy one, just to find “new and improved” rocks even better. These templates are solid and I need girl t’s and a hoodie (shortly thereafter) for a presentation to a client.
October 7th, 2008 at 8:13 am -
HAT MOCKUPS!!! Please :)
neeeeeed hats!
October 7th, 2008 at 8:24 pm -
hey guys, when i try to paste or drag my artwork in the artwork layer, it automatically creates a new layer “vector smart object”…
argh driving me crazy…
October 8th, 2008 at 9:49 am -
Leras : http://tinyurl.com/6kejwb
October 8th, 2008 at 10:24 am -
@ Henry: Yea, that is kind of annoying. I haven’t found a way around it yet (read: it hasn’t annoyed me enough to really, really look). You can still drag the mask onto this new layer, and it works just as well.
October 31st, 2008 at 1:00 pm -
how to create a realistic t-shirt mock up: http://tinyurl.com/6kejwb
November 6th, 2008 at 7:26 pm -
Seriously…
you ‘dezinerz’ aren’t all that savvy, huh?
Hasn’t anyone heard of a CAMERA?
Buy a blank shirt, take a photo…
it’s not genius.
December 1st, 2008 at 12:13 pm -
hey guys,
i just have a question, after i apply the mask i can’t move the art only the mask moves and when the art does move it doesnt stay within the shirt borders – does anyone know what im doing wrong?
thanks.
December 14th, 2008 at 1:40 pm -
I just wanted to say thank you!
these are great and the tutorial is easy to understand.
The design you did is amazing too. I am curious as to what font you used for the kickrocks name.
It goes great with the “guts” idea. Just curious if I can get it?
December 21st, 2008 at 12:15 am -
So would you be able to use this with Corel Draw x4?
December 23rd, 2008 at 4:53 am -
Yes The design you did is amazing too. I am curious as to what font you used for the kickrocks name.
It goes great with the “guts” idea. Just curious if I can get it?
………………………….>>
TOPGFX.COM
December 23rd, 2008 at 7:12 pm -
Great tutorial. Where can i get a shirt like this? I really like the design.
January 23rd, 2009 at 5:24 pm -
hey guys,
i love the templates, i just bought and downloaded. i tried to watch the video on vimeo but it’s not working. do you have any other video tutorials for the tees?
March 5th, 2009 at 8:56 am -
whewww, nice tutorial dude…
i really really appreciate that…
very usefull for me when i try to publish my tees design…
thx brotherrr…
would u come to Indonesia & share or make some live tutorials such as in the classroom?? :P
-best regards..
March 27th, 2009 at 1:13 pm -
That's very thoughtful of you, you don't often see this kind of tutorial for free. T-shirt printing is not that easy as some might think and I agree completely with your points of view and perspectives. Now that we know “how it's made” we only need inspiration and creativity to get the job done.
April 9th, 2009 at 4:49 pm -
Последний нах! :)
June 2nd, 2009 at 11:17 pm -
looks easy enough but I probably would never been able to come out with such a nice artistic idea in the first place.
June 17th, 2009 at 6:58 am -
stfu u fag u dont suspect shit
June 17th, 2009 at 7:58 am -
stfu u fag u dont suspect shit
July 10th, 2009 at 2:42 am -
what we offer:
. environmatal friendly clothes,shoe and accessory
who we are:
. a trading company in China specialized in designing ,manfacturing
and exporting the above products.
what we do:
. developing environmental friendly products
. designing new products for each customer with our special designing
team in China.
. arranging production and export .quality will be firmly controlled
with our 10 years experiences in this line.
RICHECO
(Wenzhou Success Group)
Tel:0086-21-35306890
Fax:0086-21-35306891
http://www.richeco.com
July 10th, 2009 at 3:42 am -
what we offer:
. environmatal friendly clothes,shoe and accessory
who we are:
. a trading company in China specialized in designing ,manfacturing
and exporting the above products.
what we do:
. developing environmental friendly products
. designing new products for each customer with our special designing
team in China.
. arranging production and export .quality will be firmly controlled
with our 10 years experiences in this line.
RICHECO
(Wenzhou Success Group)
Tel:0086-21-35306890
Fax:0086-21-35306891
http://www.richeco.com
December 11th, 2009 at 4:28 am -
Thanks for the advice, I was doing all sorts of stuff till you guys explained it a little more.
http://www.hellodestroyers.com
December 29th, 2009 at 7:26 pm -
How do you do the Mask and Shadows?? I have my white shirt and Art but idk how you do the Mask and Shadows???
January 13th, 2010 at 4:51 pm -
could you create a tutorial on how to make designs like that?
January 29th, 2010 at 12:56 am -
Great pack of templates, and very easy to use with the tutorial provided…. Thanks a lot ;-)
March 30th, 2010 at 5:44 am -
i have job for T-Shrit design m going to start work but one thing is making trouble for me that is how i can do color separation? do you know please guide me i will be thank full to you
April 7th, 2010 at 2:07 am -
nice work, thanks for posting,,
April 7th, 2010 at 2:10 am -
Good work,,thanks for Shear
May 5th, 2010 at 4:25 am -
Thanks for this nice work!
dizi izle
May 5th, 2010 at 4:28 am -
Thanks for this nice work!
dizi izle
June 24th, 2010 at 7:16 am -
how do you get the artwork into the thing? D:
July 17th, 2010 at 9:34 am -
i love this one
August 1st, 2010 at 7:11 pm -
this theme is good…