What’s the Best T-Shirt Mock Up Website?
Mocking up designs is an absolute must, of that we are sure. It’s just that extra step that takes a design from flat to incredibly realistic. Clients will think you’ve gone through the expensive printing process, and you will be able to accurately envision your work in real life. It’s a win-win.
Unable to work within Photoshop, or just don’t have the extra time in your busy work day? Head to the very best online mockup tools in the entire world, from your friends at Cleveland web design firm Go Media. These online tools, MockupEverything.com and ShirtMockup.com are similar, but each powerful in their own right. Both are free t-shirt mockup websites which help you to realistically mockup your designs on tees (Shirt Mockup) and pretty much anything else you can possibly imagine (Mockup Everything). Pro subscriptions, available with each, give you the ability to remove watermarks, have access to larger image sizes, and more – so be sure to give the 7 day trials a try for both t-shirt mockup websites a try > Shirt Mockup trial | Mockup Everything trial
1. Shirt Mockup: Upload your art. Mock it up. Download your image for FREE! Pro Users have access to over 40 professional photographed and high-resolution t-shirt, hoodie and related apparel templates.
2. Mockup Everything: an easy-to-use online platform for applying your graphic designs to a growing variety of print products. Free templates available, as well as hundreds of templates for our Pro Users. Pro users also have access to at least 6 new templates per month.
Now go forth and create!
Enjoy and show us what you’ve created over on our Flickr Pool Showcase!
Your Favorite Mockup App Back
After all, we promised. Yep, you Pro Users are treated to new (at least 6) templates each and every month, as well as such luxuries as:
- Larger image sizes
- No watermarks
- and our transparent background option
If you’re not yet a Pro User, give it a try!
Not ready to commit to our Pro Account yet? It’s okay! We still love you. Go ahead and use our free templates over at Mockup Everything.
Now, let’s take a peek at the 6 new templates we have available to you Pro Users this month!
Men’s Triblend Raglan, Ghosted – Front
Buy my product Men’s Triblend Raglan, Ghosted – Back //
Buy my product Rectangle Shop Sign, Version 1
Rectangle Shop Sign, Version 2
Buy my product Oval Shop Sign
Now go Mockup Everything!
You have nothing to hide. Show them all sides.
Our Multiple Views Men’s Ghosted T-Shirt Mockup Templates Pack includes front, back and side versions of 3 of your favorite men’s t-shirts, each set in its own Photoshop file. This allows you to show your client or printer what a final design might look like (from each view) upon completion.
We (that’s Cleveland web designing company, Go Media) hook you up with the following multiple view templates:
- Men’s Crew Neck
- Men’s Long Sleeve
- Men’s V-Neck
as well as the front, back and side single PSD files for each. That’s a total of 12 PSDs!
Let’s take a closer look >
Our Multiple Views Men’s Ghosted T-Shirt Mockup Templates Pack gives you three nice and neatly packaged multiple view PSDS. Each shirt style includes separate layer structures for the front, side and back versions within each. Here is what is included in the pack:
- Men’s Crew Neck Ghosted T-Shirt (Multiple Views Template)
- Men’s Long Sleeve Ghosted T-Shirt (Multiple Views Template)
- Men’s V-Neck Ghosted T-Shirt (Multiple Views Template)
BONUS! We also include the separate PSDs of each front, back and side template giving you an additional 9 PSDs
- Men’s Crew Neck Ghosted T-Shirt – Front View
- Men’s Crew Neck Ghosted T-Shirt – Back View
- Men’s Crew Neck Ghosted T-Shirt – Side View
- Men’s Long Sleeve Ghosted T-Shirt – Front View
- Men’s Long Sleeve Ghosted T-Shirt – Back View
- Men’s Long Sleeve Ghosted T-Shirt – Side View
- Men’s V-Neck Ghosted T-Shirt- Front View
- Men’s V-Neck Ghosted T-Shirt – Back View
- Men’s V-Neck Ghosted T-Shirt – Side View
For a total of 12 PSDs!
Note: Each shirt includes 4 preset colors
— Now, go get ’em tiger! —
One of my favorite movies of all time is Eternal Sunshine of the Spotless Mind. I also really love the movie posters that featured a torn paper effect across the person’s eyes with some text underneath. Nice job by BLT on the original posters. I thought it would be cool to make my own version and show you how I did it.
If you want to skip this whole thing and make it easy, I’ve made a Smart Object Photoshop Template so you can easily add your own photo and text. Just double click the smart object layers, paste in your photo, save, and voila! You can even swap out the torn paper images if you’d like. This message brought to you by the keen minds behind digital marketing in Cleveland, Go Media.
On with the tutorial! You’ll need Photoshop CS5 or newer for this.
1. Set up your Photoshop Document
I just started with new document at 486×755 pixels. It’s not high res, but I have no intentions on printing this. It’s mostly just to display on the web.
2. Create your torn paper layers
You can create these from scratch, but I found it easier to just find some torn paper vectors online. If you create your own, you can use the pen tool in Photoshop or Illustrator and draw your own torn paper edges. Be sure to create several variations. Create two parts for each torn paper piece. One will be the “edge” and the other will be the “mask.” The edge is white part with the drop shadow and the mask is the grey part of the paper that will act as a clipping mask for the graphics we want to place on the paper itself.
3. Paste in each torn paper layer into Photoshop
I copied the white part of the torn paper first into Photoshop and enlarged it to fill my document size. Then I copied and pasted the grey part of the torn paper and enlarged it enough to look good with the edge. Place them a little bit apart so there is enough white edge visible. Do this for each “piece” of torn paper. Remember, you want a “mask” and an “edge” layer. Then add a drop shadow to each of the edge layers.
4. Create a top and bottom piece for your portrait photo
You will take one of the pieces of paper (2 layers each: mask and edge) and use it for the TOP layer. The TOP most layer, you’ll need to extend the paper to the edges of the document. It is within THIS mask you will add your headshot photo. Notice how I arranged the paper pieces so they are closer together? See below:
5. Paste in your own photo!
Now this is the fun part. You can paste in your headshot photo above the top piece’s “mask” layer. And then right click on the mask layer and select “create clipping mask.” See how I have my layers set up below. I have also put in a paper texture for a more textured effect.
6. Paste in more photos for each piece of torn paper
I wanted to go for the “torn magazine” look so I sought out some old vintage ads online. I pasted them in each piece of paper group and set the clipping mask just like I did for my top photo above. This is the effect I get below:
7. Do the same for the bottom part!
You’re going to repeat the steps to the same for the bottom section. One quick way is to simply duplicate all the top layers and flip them vertically. Then swap out all the photos with new ones so they are different. One suggestion is to rearrange the order and positioning of the torn paper pieces so it looks different from the top.
8. Add text
See the space in between? That’s where we will add our text! I also added a dark paper texture set to “screen” to and some additional shadows using the paintbrush tool so I could get a more realistic effect. See my layer structure below:
9. Add textures and final effects
One thing that will tie the whole thing together is some colorizing and textures. You’ll notice I have a dark reddish brown layer set to “screen” to color my darks. And a tan color to colorize my lights. Those are set to a reduced opacity to not have an overpowering effect. I also had a couple vignetting layers to bring more of a framing/focus to the image. There’s a levels adjustment layer to brighten and boost the contrast of everything all together. And finally there is a film grain layer set to “overlay” and reduced to 40% opacity. A film grain layer is just a layer filled with 50% grey color with a noise filter put on it. Tweak the settings to what you think looks good.
10. You’re done!
Bonus: Download the PSD
Or just download the PSD template and make it easy on yourself. Again, you don’t have to go through all these steps if you don’t want to. Just download the PSD file yourself. I set it up with Smart Objects so you can just double click on the layers that you are supposed to swap out with your own photos. Purchase Torn Paper Effect – Smart Object PSD Template – $2.99
Here are a few examples!
Hey look at you! You just finished the world’s best design. You’ve outdone yourself this time.
If you were back in the days of old you’d send that bad boy via horse and buggy, ride it off into the sunset.
But times have changed, my friend. Now we need to step up our games. And step ’em up good.
Let’s be honest. You’ve got two options.
One: Upload the art, flat as a pancake.
Two: Take a few minutes to mock up your work, giving your client a realistic view of the finished product.
It’s the difference between being ordinary and being extraordinary.
Totally up to you.
If you you want to:
- Present your design to clients in a realistic, 3D setting on an actual product
- Test your product’s market potential as well as explore how it might look before going through the expensive manufacturing process
- Impress and entice family, friends and future clients who’ll drool over your designs
- Fully customize the appearance of your design and end product
- Completely revamp your portfolio
All you have to do is head over to MockupEverything.com, where you can find a growing library of over 175 templates in categories like technology, apparel, print, outdoor and food & beverage.
While you’re there, don’t forget to enter the easiest contest in the history of the Earth. Choose a great design and win $1,000 in cash and design weaponry. You got this.
Now let’s check out this month’s templates!
5 Panel Hat
Pom Pom Beanie
Men’s Long Sleeve T-Shirt (Flat Front View)
Horizontal Poster with Clips
Large Cup Koozie
Large Wine Cooler
Small Wine Cooler
What are you waiting for? Let’s Mockup Everything!
PSD Technology Mockup Templates
Here at Go Media, we’re proud of our work and love to show it off.
Thanks to the magic of our Photoshop mockup templates, we can do so in the blink of an eye.
Introducing the Technology Mockup Templates
Ready to see your work on the big screen?
After purchasing the Technology Mockup Templates Pack, open those puppies up and get busy.
To place your design, simply double click on the “Your Artwork Here” thumbnail. For those objects in perspective, click on the smart object thumbnail to appropriately adopt your art to the item you’ve chosen. (More about smart objects here).
Now, let’s look at the goods.
Check out the 13 PSD Templates included to Mockup Your Technology Designs!
Responsive Master Template
Responsive iPad & iPhone
iPad – Angled
iPad – Straight
iPhone 5 case
iPhone – Angled
iPhone in Hand
iPhone – Straight
Laptop – Straight
Go Media Approved
Here at Go Media, we’re custom template creating machines.
Disclaimer: Creating these nicely organized and layered files is far from easy for that matter, even for us after all these years. So sit with us and stay awhile. We want to make sure we do this the Go Media way.
Follow along with me as I create this custom hamster jumpsuit template, from high resolution photograph, to clean and crisp PSD file.
A white/neutral background: This will make tracing the garment much easier.
Red Garments: Red is a great middle value color, which means it shows relatively equal amounts of shadows and highlights. * If you’re not shooting a red garment make sure there is enough contrast between shadows and highlights. In the end, we’ll want to be able to change the garment’s color while keeping it’s natural look.
Sharpness of Image: Sharper images will contain more pixel information. This is crucial editing shadows and highlights.
Duplicate your background.
This is the layer that you’ll be working on. Right click on your background layer to duplicate it then double click to rename that new layer. Once you’ve done this, hide your original background layer.
This will save you time later. Clone tool out any unwanted fuzz, spots, creases, or tags.
Using the pen tool “Paths”, trace just inside the edge of the garment to ensure that you’re not including part of the background. Tracing every detail/fold in fabric will keep it from looking stiff. This is one of the most important steps, and it can take some time. Be patient.
Once you have traced a garment, it will automatically be saved in your “Paths” palette as a “Work Path” – double click to rename it to something more specific. this will allow you to add more paths to the garment later.
Right click on your path and “Make Selection” (click OK on the dialog box that opens). I’m a firm believer in keeping as much of the original photo in tact as possible. To do this I use “Layer Masks”. Ultimately it will make your file size larger, but will save headaches if you need to change something later.
Now that you have your garment selected, go back to your layers palette and click the layer mask button at the bottom of your layers palette to isolate it. If you ever need to show or hide parts of this garment you can do so in the mask layer without actually deleting any pixels. Add a solid color background to be sure you didn’t miss anything. I usually stick with a middle value gray.
Shadows & Highlights Setup
Duplicate the garment layer twice. These will act as your shadows and highlights. Rename the layers accordingly “GarmentName – Shadows” and “GarmentName – Highlights” It’s good to get in the habit of organizing your layers. At this point I’ll create a main Garment folder, in this case “Jacket” as well as “Shadow” and “Highlights” folders.
After that, move the layers into their respective folders. Select the Shadows layer and change its blending mode to Linear Burn. This will set your shadows to show a good amount of contrast and vibrancy.
Adding Hue & Curves Adjustment Layers
At the bottom of your layers palette, click on the black and white circle to add a Hue & Saturation adjustment layer. Change the Saturation to “-100”.
Add a Curves adjustment layer above that.
Currently these adjustment layers affect the entire document. We will need to make them only affect the shadow/highlight layer they’re above by creating a clipping mask. Hold shift to select both the Curves and Hue adjustment layers then right click and “Create Clipping Mask”. You’ll see two arrows appear next to the adjustment layers to indicate that they’ve been clipped into the layer below.
Next, move onto your Highlights Layer and change its blending mode to “Screen”. This will knockout the shadows of the garment and allow you to focus on the amount of highlights that are visible
Repeat steps 4-6 to create the Hue and Curves adjustments for your Highlights Layer.
One of great uses a mockup template is the ability to change the color of the garment. These next steps will ensure that shadows and highlights are consistent no matter what color you apply.
Our next step is to add a White color adjustment layer and clip it into the original garment layer. (you can also apply a color overlay blending mode to get the same result)
*Photoshop automatically adds a mask to that layer – this will come in handy should you need multi-colored sections.
Make sure your Highlights folder is hidden then move onto the Curves adjustment layer that is clipped into the Garment-Shadows layer.
On the left side of the Curves palette, click the button with the exclamation point to get a more accurate view of the histogram. This will show you the brightness values of the image.
Plot points around the three highest values in an arch as shown. From there you can adjust each point to optimize the amount of shadows will appear. Shadows will become lighter the further away from the brightness values you are. If the points are plotted too far away, you run the risk of the shadows looking pixelated and blown out.
*Every garment’s brightness values will be different, but this arch will serve as a general guide to plotting points.
Once you have the shadows to a place that looks natural, hide your Shadows folder and add a Black color adjustment above the White layer. The same rules apply to editing the curves of the highlights only they’re opposite of the shadows.
Once your shadows and highlights are set up correctly, any color you apply to your base garment layer will look natural.
*If the amount of layers you have is overwhelming and you’re confident with the shadows/highlights you have set – you can always select the Curves, Hue, and Garment layer – right click and merge those layers.
If you’re looking to customize a whole outfit just repeat all these steps for each garment and you could create your very own hamster jumpsuit.
-or clip your artwork into the base garment layer to make some wicked snowboard gear!
Hard work, huh?
Pick your pleasure
Shirt Mockup is a free tool used to realistically mockup your designs on tees. The Pro Version is available, offering you a larger variety of t-shirt templates. It’s super easy. Upload your art, receive a jpeg snapshot of your design. Try it free for 7 days!
Mockup Everything, similar to Shirt Mockup, provides designers with an easy-to-use platform for applying graphic designs to a growing variety of print products in multiple categories including technology, apparel, print, outdoor and food & beverage. Also like Shirt Mockup, both free and Pro versions are available. Mockup Everything is similarly super easy to use and designers receive jpeg snapshots of their designs. Try the Pro version free for 7 days!
Want the very best in Mockup Templates, wrapped up in neat and clean Photoshop files just like you saw Aaron create above? Look no further than the Arsenal. Our Mockup Template packs come in all varieties, from tees to hoodies, posters to tanks and more.
A few days ago, I mentioned at the bottom of an email campaign that we were working on a little something that would make delivering new brand assets to a client easier. Well, this is it.
Adding value to the brand you deliver
When you design a logo for a client, are you including a Brand Style Guide? You know, a document that tells the client how to use their new logo? If not, you should be. A well done Brand Style Guide provides tremendous value to your client and can earn you more money on logo design and branding projects.
It’s also a wonderful tool that, if respected, ensures that your client will respect that painfully crafted brand you’ve just sent him. Isn’t it frustrating to sometimes see that branding system of yours completely destroyed by a client that replaced that carefully chosen set of typefaces with Comic Sans?
But how do you know what goes into your Brand Style Guide? And designing it takes up a ton of extra time, so wouldn’t it be nice if someone like us did all the work for you so you just have to replace all the content with yours and be done with it? Yes, that’s what we did.
A simple, yet robust product
We simply set out to prepare a boilerplate version of our own brand style guidelines. We also took the time to look at various style guides released by big and small brands alike, to see how we could improve our own stuff.
We then threw all of that at our very own Chris Comella (the man behind the Freelance Survival Kit), and he created this great template. It will be the perfect starting point for a great, clean, and to the point presentation of your client’s new visual assets.
We’ve also included an example brand guidelines document, so you can see what the template can become. It’s based on Case Closed, a fake brand of handcrafted secure cases designed for our internal needs by our very own Carly Utegg.
The product itself comes in the shape of an InDesign template, and of a PDF example. The InDesign file includes 18 pages, from cover to cover. We chose InDesign because you can easily add or remove pages if your sections need to expand or contract. The template also includes notes by Chris and Jeff on each sections, and on how to make the most of each of them.
You should head over to the product page to learn more!
So you want to make beautiful, photo realistic t-shirt mockups? This is a tutorial for newbies or beginners on using the t-shirt mockup templates we provide at Go Media’s Arsenal. Note: this tutorial was done with our Tri-Blend Templates, which features a removable tag layer. This feature may not be included in older templates.
Place Your Design
Step 1: Open your desired t-shirt template in Photoshop
Step 2: Make sure your top layer (or layer group) is selected so that your design is placed on the top layer. Older template products might not have a “tag” layer, so just select whatever is the top most layer.
Step 3: Go to file, then place.
Step 4: Select your art (a flattened JPG file works best) and hit place. It will show up on top of everything with a big X on it. Those are the transform controls in case you wish to resize it. Just press ENTER to finish placing your art. There are a variety of ways to get your art onto the template, but this is a simple method. You can always copy and paste it from another Photoshop document too.
Step 5: Your artwork is now the top layer. This will make selecting your design’s background color easier
Grab Your Shirt Color
Step 6: Use the Eyedropper tool (I) to select your designs background color. This is your desired color for the shirt and will be used in Step 9-10 to create the correct shirt color.
Mask Your Design
Step 7: Drag your design below the layer named “Your Art Here”. This will automatically create a clipping mask that confines your design to the edges of the shirt template.
Step 8: Your design is now masked onto the shirt. Time to change the shirt color to match.
Change The Shirt Color
Step 9: Expand the group called “Shirt Color”. You will see a variety of pre-set default colors. Simply select the color layer on top and move onto the next step.
Step 10: Use the Paintbucket tool (G) and click on the layer to change the shirt color to your foreground color (the color you selected in Step 6).
Resize and Arrange Your Design
Step 11: Select your artwork’s layer again.
Step 12: Use the Free Transform Tool (Ctrl + T or Cmd + T) to resize and arrange your design. Hold down shift while resizing to keep your design in proportion. Feel free to move it around, even off the edges of the shirt. You’ll see the template won’t allow the design to bleed over the edges of the shirt. That’s because of what you did in step 7!
Step 13: Hide the guides (Ctrl + ; or Cmd + ;) to take a look at your design.
Looks so real. You’ve learned well Grasshopper! That’s how most of our templates work. However, some older templates might have a slightly different layer setup, but the basic idea is the same. You place or paste your artwork into the template, drag it under the “your art here” layer to make sure it doesn’t bleed off the edges, and change the shirt color to the same color as your design’s background.
Pro Tip: If you wanted to change the above design to a different color t-shirt you can. But you must change the background color on your original artwork first. So save out your art on a red background first, then place it into the template and change the shirt color to the same red as your artwork’s background. Awesome!
This second volume of the Go Media Arsenal T-Shirt Templates comes in response to popular demand and features natural, hand-created drop shadows & HDR photography for smoother shading layers. Files are in PSD format w/ layers and masks, pixel dimensions are 1200×1300.
- Preset Shirt Colors
- Photos of both Fronts and Backs
- Flat and loosely-wrinkled versions
- Easy to use clipping masks in place
- Smooth, realistic lighting, drop shadow & shading effects
Also available is a new set of Urban T-Shirt Templates featuring baggy, loose and flat-pressed t-shirt templates.
So you just spent 10 or more hours creating a crazy t-shirt design and your client has officially signed off…so what now?
You may have created stellar photo-realistic mockups and used tons of really cool colors- but none of this means ANYTHING if your screen printer can’t clearly interpret your vision!
I find that many of my clients have had bad experiences with low-budget designers in the past who have been able to create great art, but don’t know the first thing about how to put it on apparel. This can end up costing the client a lot of time, stress, and additional set-up fees at the printer. Over the years, I’ve found that a client truly appreciates the fact that my designs come ready to hand-over to the screen printer that very same day – with no questions asked.
The best rule of thumb when preparing files? Leave nothing to chance and pretend that your screen printer is about 6 years old. (As you establish a working relationship, you may be able to edit out some of these steps once your screen printer knows your file ‘style’. Remember that, like designers, every printer is different!)
This tutorial will set out to give you step-by-step instructions for ensuring that your files are properly set up and ready to go to print! (AKA: Creating a ‘Tech Pack’) Hold on, ‘cuz it’s long, but once you get it down, your clients and printers will love you!
This Tutorial will Cover:
- File Preparation for Apparel
- Creating A Full-Size Blank Shirt Template
- Setting Up Your Tech Pack Template
- Completing Technical Callouts
- Full-Size Screen Separations
- Double Checking Your Work
- Adobe Illustrator
- Pantone solid coated booklet (or use Adobe Illustrator’s included PMS swatch set and take your chances)
- Any linked files or fonts
- Any additional artwork (neck labels, custom rivet art, pattern swatches, etc)
- An actual blank apparel body that your client wants to use, or a clear photo and accurate measurements (shoulder-seam to shoulder-seam and top to bottom)
- Digital camera
Step one: File Preparation
For this particular tutorial, I have decided to use a t-shirt design for one of my more recent clients- the Nastia Gold line by Olympic gold-medal gymnast Nastia Liukin for Vanilla Star Jeans. Though a little girly and basic for Go Media style, it works well for the purposes of this tutorial.
We are already assuming your shirt has been broken down into halftones, bitmap files, etc and brought into Illustrator.
The first thing that I like to do is to change my document size to be about the size of a real-life t-shirt. In this case, for a standard girls’ tee, I know that I need a document approximately 24″x 30″ in order to leave plenty of room for call-outs, headers, and all the other things we will go into later.
Before diving in, I go to my ‘Links’ menu and highlight all of my links, which makes sure that no layers are locked. Click the arrow at the top right, and select ‘Embed Image’.
If I had used any special fonts (mine happen to be hand-lettered), this would also be the time to make sure that you select them, go to the ‘Type’ menu and click ‘Create Outlines’. This ensures that your printer won’t be calling you looking for attached files or fonts later.
Next, in a separate file, I like to create an accurate template of the blank t-shirt or hoodie I will be using to gauge correct size and placement. This way, I don’t have to waste time trying to print out my artwork and re-sizing it until I get it just right. Instead, I take a clear photo of the blank garment that my client wants to use, or ask them to send me one. Keep in mind that you generally want to use a middle-of-the road size shirt (Medium is good), as your art has to fit on both a size S and XL.
For this particular client, they didn’t have a blank supplier picked out yet, so I used an existing template that I had already traced from a photo. Simply drop your garment photo into Illustrator, set the image transparency to about 75%, and using your pencil tool, trace around your blank garment. (It doesn’t have to be super accurate, as different shirts will have different wrinkles and curves)
Once you have traced your shirt and created an accurate template, enlarge it to real-life size using a few key measurements. Measure the distance from the top of one shoulder seam to the other. You may also want to measure the distance from the top of the shirt (top of shoulder) to the bottom (hem). For this garment, my shoulder-to-shoulder distance is approx. 12″ as this is a juniors tee. I make sure that my “Rulers” are turned on, then size my template accordingly.
Save this file for future use as a shirt template, or click below to download the one that we have provided for you! Now you are really ready to begin!
Keep this template on it’s own layer called “Shirt” and lock it. Now in your layers palette, create another layer called “Art”. This is the layer that you will be playing in- doing all of your masking and sizing. Also create a third layer and call it “Details”- we will get into this layer last.
From here, copy and paste your original art into your “Art” layer. Begin playing with placement, seeing which parts of the design may run off the edges, how they might align to the collar or seams, etc.
Once you find a placement that you are happy with, unlock your “Shirt” layer, and using your white arrow, select only the main body area (not the lines representing seams) and copy and paste it into your “Art” layer. You can now use this as a clipping mask to make your art look like it is bleeding off of the edges. The main body area of the shirt should appear to cover the art in your “Art” layer. Under your “Layers” palette, click the little circle to the right of the layer named “Art”. This will select everything in your “Art” layer. Then simply hit COMMAND+7 or Object>Clipping Mask>Make to mask out your art.
Step two:SETTING UP YOUR TECH PACK TEMPLATE
Now that you have your art where you want it, lock both your “SHIRT” layer and “ART” layer. From here on out, we will be working only in our “DETAILS” layer until we do color separations. I like to start setting up my tech pack by copying and pasting my client’s logo into the top left corner of the document. I then align my type to the left and right underneath the logo I type in all caps:
Next, I align my type to the top right and type in all caps:
From here, fill in any and all information that you know.
Your printer is the name of the client’s chosen screen printer (if you know it).
Your shirt brand would be, for example, American Apparel.
Color is self explanatory. Name is the name of that particular design.
Job # will most likely be given to you by your client, if they have one.
Once you get to screenprint colors, you will want to grab your trusty Pantone Solid Coated book to accurately choose your colors. In my experience, this is the book that most printers use to accurately show inks. There are also separate Pantone books just for metallics, neons, etc, but we will stick with the basic book for now.
After selecting my colors, I create little boxes with my rectangle tool to act as little swatches for each color. Next to each swatch, I list the name of the color- for example, my first color is PMS (Pantone Matching System) 7499 C (Coated).
TIP: if you use the Pantone swatches that Illustrator provides, they will look very different on the screen than in an actual Pantone book. Always go off of the book, and try to make the ones on your screen look like the book, instead of the other way around.
Also note that even though I can see that PMS 871 C is a metallic gold in my Pantone book, I made sure to note that I wanted it to be metallic foil, not just metallic ink. The more information you can provide, the better.
STEP THREE:COMPLETING TECHNICAL CALLOUTS
Now we want to really get into calling out any special art placements, special treatments, etc. I begin by calling out that it is OK for the PMS 7449 C color art to run off the sides. I show this by drawing a clean line using my line segment tool, and writing exactly that.
“PMS 7499 C ART CAN RUN OFF EDGES”
Next I want to point out that it is OK if the art runs off the collar and prints on the inside back of the t-shirt, since I know we will have a neck label sewn in over the top. So again, I call that out:
“INK RUNS OFF COLLAR. OK IF INK GETS INSIDE OF SHIRT.”
I also decide that I would like my art, for the most part, to appear centered. This is up to the eye of the printer, but lets him know that I will be looking for that. So I add that in:
Hopefully, by this point you are starting to get the picture. The more info that you can provide your printer, the better. I also always like to provide at least one measured point of reference – in this case, I would like the top of the black screen (the top of the rose) to be approx. 2″ from the base of the collar. So again, I draw a line pointing to that place and write:
“BLACK SCREEN BEGINS APPROX. 2″ FROM BASE OF COLLAR”.
Finally, I know that my client has custom neck labels that they would like sewn into the neck of these t-shirts. So I copy and paste the neck label art, placing it in a red rectangular box so that there is no confusion about which label goes with which shirt. (You’d be surprised). If there is an associated ID# for that particular label, go ahead and include it. If your client wants to screen print neck labels, go ahead and include that art too, just in case. Or, at the very least, make mention of the fact that it needs to be there.
Don’t forget to include any other custom treatments such as: contrast stitching, various garment treatments and washes, rivet or rhinestone embellishments, embroidery, etc.
STEP FOUR: FULL-SIZE COLOR SEPARATIONS
Hang on guys, you are almost there! While many printers are smart and able to figure out how to ‘unmask’ your “Art” layer to make separations, many aren’t. To eliminate any confusion, I like to provide color separations at the bottom, off of the art board, but on my “Art” layer. Lock your “Details” layer, and unlock your “Art” layer. Select everything in that layer and copy it. Now paste that art directly below the art board and unmask it (ALT+COMMAND+7) Delete your mask, leaving just the art.
This next part gets a little tricky, so pay attention! Depending on how many colors your art has, this will determine the number of separations that you need to make.
My particular file has 5 colors, so I need to make separations for 5 separate screens. The way that I approach this (and others may do it differently) is to copy and paste the art that we just unmasked 4 more times in a row. I then write each Pantone color’s name above each separation, like this:
Now – PAY ATTENTION – depending on what color you are separating (my first color is 7499 C)- wherever that color is shown in the art, it needs to be made BLACK. Every other color in the art needs to be made WHITE (so that it won’t show up).
As you click on each piece of the art, turn it the appropriate color and then LOCK IT! This should leave only the areas that are 7499 C showing!
NOTE: This will mess with your brain, since you are used to thinking in terms of colors, not translating those colors into black-and-white. But I promise, it gets easier.
Proceed to do this for every color, leaving only the areas that are that specific color showing. IE: If you are on the ‘green’ screen, then all areas that are ‘green’ should be black when you are done with separating that screen. When you get through every color, you will have screen print separations!
STEP FIVE: DOUBLE CHECK YOUR WORK!
Double check everything, send a JPG to your client for final approval with all of the callouts shown (in case the client has any revisions), and off to the printer it goes! Send a copy of the final AI file to the client, and kick back until the samples roll in! Whew, you made it!
As a full-time art director for the new skate apparel line Self-Destruct (www.teamselfdestruct.com), as well as full-time freelance designer for my own firm (www.marenkellydesign.com) I know the ‘tech-pack’ can seem like a lot of extra work that you may not think you have time for. But once you get the process down, it really shouldn’t take you longer than 30 minutes, and it acts as a major selling point to your clients. In my experience, it even helps to justify a slightly higher, flat-rate per design, since the client knows they are getting quality, print-ready art!
Thanks to these easy-to-understand files, I have also gotten a lot of work over the years from screen printer referrals. Remember- everyone loves someone who makes their job a little easier, and it will payoff in the end!
*NOTE: This upgrade path no longer exists.
The original Men’s T-Shirt Templates was the debut Template Pack back in August 2008. In the process of making two more Template packs & an Advanced Hoodie Design Package, we learned a few new tricks about how to create fantastic photorealistic apparel mock-ups. Now, six months after the initial release, we’ve integrated those features into T-Shirt Templates version 2.0!
Quite a bit. Each shirt has more advanced shading layers such as highlights & color-sensitive shadows. These shadows and highlights are not just part of the shirt, but applied to your design during the mock-up process to make it appear truly ‘printed’.
Thanks to a tip from Jimiyo, we updated & streamlined the masking process using clipping masks. Now it’s really as simple as pasting your design onto the “Your Art” layer – no hiccups or locked layer masks to worry about.
We also added preset material colors that are optimized with subtle color variations to look real. You can see in the screen shot there are now added optional lighting & vignette effect layers for extra photographic realism.
Finally, we added three “new” composite shirts made by layering the shadows from several shirts together. They’re my new favorite in the pack.
Free Upgrade to Current Users
If you’re already a proud owner of the original T-Shirt Templates – a free upgrade is coming your way! Keep an eye on your email for the low-down on getting the good stuff.
If you’ve looked on lovingly at other mock-ups on Design By Humans and Emptees, there’s no better time than now to easily get professional mock-ups of your designs. Besides, now you know how generous we’ll be when version 3.0 comes out!
Suggest a feature for version 3.0
That’s right, share your ideas & we’ll use them to create an even better mock-up template! Tell us what would make these templates harder, better, faster, or stronger & we’ll do what we can to make it happen.
A month or so ago I did this sweet tutorial of a pin-up girl on a motorcycle. It had been a project from on of our better clients. Since they liked and bought the design I thought that they wouldn’t mind if I posted a tutorial about how I made it. I was wrong. Threat of legal action later and that killer tutorial was taken down. I am truly sorry to our client. I should have asked.
BUT… …the tutorial was very good with lots of details. And I didn’t want to deprive you of all the time I put into it. There was only one thing to do: remake it. So, that’s what I’ve done. I found a different motorcycle, different girl, re-illustrated (vectorized) the entire thing, added a Christmas theme AND even added some more detailed instructions! 16 hours later, it’s better than ever and here for your tutorial pleasures.
Without further ado…
Holiday Vector Pin-Up girl on a motorcycle T-shirt Design (Phew! That’s a mouth full.)
It’s time for another sweet vector tutorial. And what would make a better subject than a pin-up girl on a motorcycle wearing a sexy Christmas outfit? Well, not much. At least, not much in my book. So, let’s get right to it. Oh – quick warning; there will be a few gratuitous plugs for Arsenal products at the end, but it’s just a little bit right at the end. This tutorial can be completed at no expense to you. ;)
Here is what our final design is going to look like:
This design took me
eight twenty-four and a half hours to complete from beginning to end. The first time I did it in about eight hours. Then it took me 16 more hours to rewrite this tutorial and redo all the artwork.
What you’ll need to complete this tutorial:
Adobe Photoshop (just a little bit)
Access to stock images (or stolen ones will work too.)
Client logo (if you have a client)
This tutorial will cover:
• The Technique
• Finding Photos
• Proper perspective
• Vectorizing the girl
• Making vector fur
• Vectorizing the motorcycle
• Grabbing some stock vectors
• Putting it all together
• Mocking it up
Originally this project was to design a series of new t-shirts for an American motorcycle company. Some of the direction we were given was: “comic book style drawings” and “an old school style pin-up girl.” I thought I could combine those motifs into a modern vector style pin-up on one of their newer more contemporary motorcycles.
The technique I used for this design is vector illustrating off of photographs. I could hand draw something then create my vector art off of that, but that would take about twice as long. Working off of photographs is like having a model. Unfortunately you can’t tell your photo to change positions, so you’re forced to do an extensive search until you find the pose you’re after. Once you assemble the images you need you’ll place them into Illustrator and draw vector shapes over the photo to create an illustrated look/feel to the design.
Finding the photos that you’re going to use can sometimes be a real lengthy process. I have spent as much as 2-3 hours looking for the “right” photos. When I am working on paying projects I like to find my images on royalty-free image websites like istock.com. This way I can avoid any legal entanglements that might get me or my client in trouble. BUT – as you are creating vector art out of these images and not using the photos themselves it does open up the opportunity to “steal” some images. If you’re going to use unlicensed images as a resource for vectorizing just make sure your final art is not recognizable (in any way) as that original photo. When in doubt I say just pay for your images. Certainly for a client as big as this one was and the possible huge exposure it will get, it’s best to play it safe. And please – always protect yourself. If you’re dragged into court because you stole an image – the defense: “But Bill told me I could do it.” won’t stand up.
I know the final piece of art I’m after is a girl sitting on a motorcycle. It would be great if I could find a picture of a girl in the pose I want on the exact model of motorcycle that I like. But that’s not going to happen. Even better would be if I HAD the motorcycle of my choosing and a hot model to shoot photographs of. But that’s DEFINITELY not happening. So, I’m going to have to find the images of each separately, make sure the fit together (have the same perspective) then draw them together. In this case I think it will be easier to pick the motorcycle picture first then find an image of a girl to fit onto it.
For this design I chosen this slick contemporary motorcycle (all logos have been airbrushed off to protect the innocent.) What else can I say? It’s a fairly sweet looking motorcycle. I think it looks a bit more modern than a normal “hog”. I chose this particular photo because it shows off the bike itself. It was originally a shirt design for the manufacturer and I thought they would appreciate seeing the details of the motorcycle. Artistically I would have preferred to use something that had a fish-eye lens type of effect with the rear tire as the focal point. But the bike would be hard to recognize and trying to find a picture of a girl at that same perspective would be nearly impossible. This photo is a straight-on perspective shot with a typical 35mm lens. It shouldn’t be hard to find a picture of a girl that fits.
For the pin-up girl here is the first photo that I found that I really liked.
She looks hot and has a sexy dramatic pose. Also, her upper body seems to be angled as though she is sitting on my motorcycle. Unfortunately her hips and leg don’t quite look to be in the correct position. If she were sitting on a motorcycle her hips would be turned more toward the camera and her leg would extend out almost straight. No problem, I just need to pull a “Frankenstein.” To “Frankenstein” a photo is to take several different photos, cut different body parts and put them together. In this case I need a beautiful leg to attach to this torso. Here is the image I found.
Also, I’m not a huge fan of the face on my girl in the photo. I could find yet another image, but I happen to recall a great vector face I’ve got in one of our vector packs. It’s a beautiful face that’s in the sexy vector pack which is part of Vector Set 2.
Here is that face:
Now – you don’t need to use a stock vector face, You can use the face in your original photo or just find a different face to vectorize. Here is a sample of a face that I vectorized… just to give you an idea of how the vector lines look.
When you’re piecing together a bunch of photos like this (three parts of a woman and a motorcycle) it’s helpful to bring your photos into Photoshop and do a quick mock-up to make sure all the different parts will fit together when you’re done doing the vector illustration. To do this I will make a rough cut-out of each body part and layer them on top of my motorcycle. This will require some rotating, reflecting and scaling to get them into place. This allows me to get a sense of where the pieces overlap and fit together. Here is the Frankensteined body parts and motorcycle for this pin-up put together. I think it looks pretty good.
Here is what this design looks like now that I’ve mocked up the photos together. These all seem to fit together so now I can take these over to Illustrator and start illustrating them. It’s smart to use the free “comps” (preview images) from royalty free stock image sites to make sure the pictures will fit together before you pay for high resolution ones.
Vectorizing the motorcycle
I decided to start illustrating the motorcycle first. Before I begin making my vector shapes I’ll try to decide how many different colors I’m going to use. This makes my decision making process easier while I’m drawing. I can look at each area and ask myself: “Can this be defined with one of my colors?
Here is a little diagram showing the colors I selected and some samples of each color on the motorcycle. You can see that the four colors I selected are a real light grey to represent the chrome, black for the, uh, black, dark grey for the dark grey and a medium grey for the middle greys on the bike. It’s important to LIMIT THE NUMBER OF COLORS you select. There are a couple of reasons for this. First and foremost is the fact that it SHOULD look like a drawing. If you have too many colors it starts to look like a photo. If it’s going to look like a photo, then why not skip the labor of vectorizing and just USE the photo? Secondly the more colors, the more work! And nobody likes that. I try to limit myself to 3-6 colors per object. You can see that for this motorcycle I’ve selected 4 colors; black, dark grey, medium grey and off-white. This shouldn’t be too hard.
The first step I take whenever I’m doing a vector illustration off of a photograph is to outline the entire object I’m working on. This will allow me to draw vectors right up to and past the outline of the shape, then quickly chop off the excess. Let me show you this process.
Step 1. Outline your object (in this case it’s a motorcycle.)
Step 2. Draw an interior shape that butts up against the edge. Since we already have the outline of the object drawn you don’t need to worry about the portion of your shape that is part of the outline. We will use the pathfinder tool to chop off the excess.
Step 3. Make a duplicate of your outline and paste it directly on top of the current outline. You can accomplish this by clicking Edit/Copy then Edit/Paste in Front. Or, you can simply use the quick key combo of Control-C then Control-F. Now you will have two exact copies of your outline with the new one on top and still selected.
Step 4. Hold down the shift key while you select the new interior shape that you drew. So, now you should have two shapes selected – the interior and one of the outlines.
Step 5. Use the Pathfinder tool: Intersect. This will preserve the shape where the two shapes overlap, or, intersect. Essentially, this will chop off the excess shape outside the outline.
This may seem like a lot of steps, but once you’ve learned it you’ll be able to do this in a split second. And that’s certainly faster than having to draw the edge of everything that butts up against the outline.
Now that you’ve got that little trick under your belt… you still need to endure the slow laborious process of drawing each individual vector shape. This is where you earn the big bucks.
One other thing to keep in mind is the stacking order of your shapes. The first shape you draw will be on the bottom. The last one you draw will be on top. So, if you can clearly see that one shape is on top of another… …start on the furthest back shape first, then build your way up. If you do make your shapes out of order; no problem. You can always reorder them. It’s just faster easier if you work in order the first time through.
Here is my final vectorizing of this motorcycle (Just the shapes with no colors put in.)
And here is what the final motorcycle looks like with no outline and each shape filled with the appropriate color.
Vectorizing the pin-up girl
Now that I have found the pictures on I-stock that work for this composition, I will buy the high resolution versions. You may wonder if it’s possible to just use the low resolution comps for doing the vector illustrating on. In my experience; no. When you zoom in to see the details they’re all pixels. It becomes very difficult to decide where to draw your lines. The higher the resolution the image is the easier it will be to illustrate (vectorize) it.
As my girl is in two pieces and as I’m fairly confident that I can put those pieces together – I will illustrate them separately. Also, I have a little skirt to cover the joint between the leg and the torso. As with the motorcycle, I always start with an outline of the entire object. Then I will build up lights and darks on top of that shape. Here is the leg with the first few sets of shapes defined.
You’ll notice I didn’t get too detailed near the foot. In fact, I thickened up the part around her foot and thickened the heel. I know that this will turn into a sexy boot later, so, no need to worry about the details around her toes.
Here is the leg complete and filled with the five colors I’ve chosen for her skin. Also I went ahead and did the outline for the boot. You’ll notice that the boot follows the shape of her body fairly close. All you really need to do is add a few wrinkles where the boot flexes at the Achilles and also add a little flair out at the top where the boot meets the leg. This creates the illusion that the leg goes into the boot.
We will illustrate the upper body the same way as the lower body and the motorcycle. We start with an outline then draw shapes to define areas that are lighter or darker. You’ll notice that most of the shapes have soft round corners. The gradients that make up these shapes have smooth transitions, so you want to avoid sharp corners.
I tend to put more shades of color and more details into the face. That is where all the beauty and emotion is shown. So, there are a lot more details in the face. Also, for women I will exaggerate the fullness and color of the lips. I will also exaggerate the length of the eye lashes and even increase the size of the eyes slightly. After all, this IS an illustration. Why not take advantage of your ability to “play” with the proportions and details. You can shrink the waist, increase the bust, lengthen the hair – whatever. It’s your illustration! And just to be clear that I’m not being sexist; I use the same technique on illustrating men. I make them more muscular, strengthen their jaw line, broaden their shoulders, etc.
I’ll usually put the hair on last. It’s easy to layer it on top of the head once everything else is in place.
One very challenging (code word for annoying) part of the girl is the fur on the edges of her outfit. In order to speed up the fur-mailing process I will follow these steps.
First I outline the shape with large clumps of hair (fur).
Second I just draw lots of simple vector lines.
Third I create an art brush in the shape of a simple triangle. When it is applied to these curving lines it will look just like more hairs.
Fourth I will use the: Object/Expand Appearance to convert these brushes into solid vector shapes, then I will use the Pathfinder/Merge option to combine these hairs with the original shape.
So here is our complete girl with boots and sexy Santa Claus outfit.
You’ll notice that I added a sack of Christmas gifts over her shoulder. I noticed that her arm and hand were in just about the right place. All I had to do was add some fingers grabbing the sack.
One last little detail to help make this look like an illustration; a black outline. To make the black outline I will select the entire girl, Copy/Paste then Pathfinder/Merge to create one single shape. I’ll add a black outline to that shape and drop it right behind my pin-up.
Now here she is placed on top of her motorcycle! Wa-Hoo! She looks hot! Sometimes I put a smile on my own face. This is working out better than I had anticipated.
Almost done. Now, for some fun stuff.
Grabbing some stock vectors and Putting it all together
Ok, we’re almost done, but we need to add some artistic elements into it and add the Go Moto Cycles Logo. Fortunately for us we’ve been provided with vector logos by our client. And for additional vector shapes to finish off the design, it’s off to the Arsenal!
Remember that gratuitous plug for our products that I warned you about earlier? Well.. here it is: Go Media’s Vector Packs are an EXCELLENT resource for design elements. I will frequently use them to either make a complete design or use them to polish off a near-complete design.
I scroll through our store and found this pack of halftone patterns I thought would look slick on the design.
At this point I am just taking my halftone vectors and brand logo and arranging them behind my girl and motorcycle until it looks good. Here is the final composition:
Mocking it up
Now that I have the design done I need to make sure the client likes how it looks. I believe that it helps to mock up your design on a shirt. The cooler you can make the design look (by mocking it up) the better chance you have that your client is going to like it. Are you ready for some more product plugs?? Why sure! First, I drop my design onto a Go Media Apparel Template. The nice thing about using a Go Media templates is that it only takes you a split-second! The masking is done, the shadows are already in place. All you have to do is drop your art onto a layer in photoshop, resize it and pull the mask down!
Now we put it all together and Voila, masterpiece design!