How to get t-shirt designs on to Photoshop mock ups
I got an email this week from Shy asking for a tutorial on how we apply our t-shirt designs onto photo real mock ups. I must say as much as I’d like to act like we could do photo shoots every day with pretty girls like the people do over at Design By Humans, we can’t. So I enlist my resourceful mockup PSDs from Emptees, and Photoshop layer modes and by the time I’m done I’ve got something worthy of the Assault Shirts homepage.
There are already plenty of people who have built ready made templates to place shirts on and to adjust colors so I’m not going to go into detail on that process. Instead, I’m going to refer you to the post I did last week about a few quick tips, as well as point you to the Emptees resources page where I got my templates from:
I chose to use this prepared blank shirt photoshop mockup by Falseone.org and if you chose the same one I did, your design should look something like this when you are done:
For demonstration’s sake, I’ll be using the most recent design we released, SS Amnesia, because it fits very well on many different colors.
Is your design flattened and not on a transparent background? See Below:
You have several choices if your design is on a flat background:
1. Trace your design in Illustrator:
2. Use the magic eraser tool and delete your background (This will look like shit)
3. USE LAYER MODES
Depending on the color of design you can easily set the design layer’s mode to either “Screen“, or “Multiply” and it will delete the background (or blend it) so that you see the design placed nicely on the shirt mockup.
This will take some experimentation. Generally, if you have a darker background on your design you want to use “Screen” as your layer mode. Think of it like a screen door in a way. All the black and darker tones becomes see through. If you have dark colors in your design that now look brighter or darker, you may want to use Image>adjustment>levels (or cntrl+L) to adjust your colors to get them as close as you can to your actual design.
If you have a lighter background on your design set your layer mode to either “Multiply” or possibly “Darken”. @angbowen from Fuel Your Creativity has a great article explaining the various layer modes and how they work. I highly recommend reading her article, Photoshop Blend Modes Explained. It will help clear up any confusion about what each layer blend mode does.
Is your design is on a transparent background. Read below:
If you’ve prepped your design with a vector fill layer as your background layer, you should easily be able to hide that layer, and copy the other merged layers by hitting cntrl+shift+c or by flattening your image and hitting cntrl+c.
Change over to the blank mockup t-shirt file, and hit cntrl+v or paste your design on top of it. Scale it down as you see fit and place it on the design. If you had a transparent background on your design you should be good to go for the most part. The only other step is to change the color of the t-shirt to the actual color you want it.
To do this double click on the Gradient Map Layer which will bring up the gradient editor.
Double click on the red colored tab to the right which will bring up your color picker window.
What I do next is head over to the American Apparel Colors resource and grab all the CMYK values for the shirt color I want. The highlighted field in the screen shot above is where you enter the first value, the second value goes in the next field, and so on and so fourth. Here’s the color picker window with the proper CMYK values for the American Apparel red color:
The red code listed on the American Apparel page is 0,100,80,2. See where I entered them above? Nice work.
You can use any color you’d like for the gradient map color, but you probably want to stick to the exact color your shirt supplier gives you. Just sayin’
Feel free to scale/distort the shirt if you feel it needs to be warped a little to fit into the shirt, but I generally leave it as is. Here’s what the design should look like:
Click to see a larger version of this image to see the detail
Need more help still?
Post in the comments, and I’ll gladly answer any questions you have on using free mock ups or getting realistic t-shirt templates. GoMediaZine has also covered this in great detail and even sells templates. I wish I had an entire design team like they do, but unfortunately it’s just me, and Mr. 51% so you’ll have to take what you get!
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
