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.
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.
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.