Monday morning. You’re walking into work (or in some of your cases, waking up in your undies and walking 10 feet to your desk). You pound some coffee and peruse your inbox. You have a present. One of your regulars needs a t-shirt designed for the band Vomit Whistle, but can’t spend much money. To add to the chaos, they needed it last week so your deadline is within the business day. What do you do? WHAT DO YOU DO!?
You know damn well that drawing some hyper-magical illustration is out of the question. You’re not gonna go balls to the wall on some typographic masterpiece either. You need a solution that’s fast and looks good. You need to take some design detours because this design is on a time constraint and a BUDGET. You need stock vector art, and you need it now.
As you may very well know, we offer a solution to this dilemma over at the Arsenal. We’re one of many different choices for theme-driven vector artwork, but since this is the GoMediazine… we’ll be using objects strictly from our packs to show the power of stock art when dealing with projects such as these.
Author’s Note: This tutorial does breeze by at a pretty brisk pace, but doesn’t require a black belt in Illustrator-jutsu. Any questions with the tutorial, please place in the comments following it, and I’ll answer all of them to the best of my abilities. Please be somewhat familiar with how adding and subtracting from objects works and the layering structure within Illustrator. The pathfinder and alignment tools will cover a lot of these nifty little tricks. When duplicating objects or grouped objects – alt+drag will handle that. To paste in place – ctrl+c and ctrl+f. If you’re still confused, these subjects are covered in numerous previous tutorials we have here in the zine. Read ‘em if you need ‘em.
We’re gonna make a new file in Illustrator. 11” x 11” and RGB color mode should do the trick. Make a black square that hits the edge of the artboard (true black, not that cmyk off-black) and lock the object in place. This will be our black t-shirt background.
Now let’s double check what your client had in mind for the design. They mentioned that the design shouldn’t exceed 3 colors, and gave you creative freedom because they like your work so much. They just want it to look gruesome and crazy and all that brutal stuff. This is good because the edge of having to reinvent the wheel on a pressure-filled job like this is relieved. I’m gonna start digging through the design weaponry.
Here’s a list what packs I think will be good for the job, and why. We have stuff that makes amazing background elements for just about anything brutal, focal pieces that can bring just the right attention to the design, and decorative add-ons that help bring everything home as a whole piece.
So now I pick some colors to play with. The main thing I keep in mind with this job when choosing colors is if it will look good on black. Black makes all sorts of colors pop way more than on any other color… so I like using some pretty intense stuff, but not to the point where it’s seizure inducing. Know what I mean? On 3-color designs, I go with a dark, medium, and light tone. That’s the general rule with most designers. Below is what I settled with after some trial and error.
Author’s Note: Experiment with colors, you’ll surprise yourself sometimes. For added inspiration in the color selection process, visit Colourlovers.com – a great community site with all sorts of color schemes and patterns.
So now I start dragging objects that would complement each other into the Illustrator file. Below is what I ultimately ended up using, once again, after some trial and error.
Colors? Check. Objects to use? Check. Now let’s get on with the design.
We’re starting with the abstract halftone first. This will be our background. I applied the darkest swatch from our color scheme to it because it’s in the background. I’m not a huge fan of the negative space that gets left behind on this so I duplicate the object and flip it upside down so it fills out more.
I add the two together and expand them. Lock this object into place (like we did with the background) and we’re on to the next step.
Now I took a bunch of those wormies from the doodle pack and made the fill color on them our lightest colors (while maintaining the true black inked outline. I also did this with the eyeballs we took from our first anatomy pack. I chose a handrawn skull from the pack of the same name, made the fill color our medium turquoise-ish color, and assembled everything how you see here.
Now notice above that I took the entire skull with worms piece and duplicated it. I ungrouped everything and added it together and expanded it. I made it a stroke with the background color (stroke weight of 3 and positioned to the outside of the shape) and expanded the appearance (object > expand appearance). I aligned them together to the middle and center, with expanded stroke being on the bottom of the skull, and grouped them. Added it appropriately to the design and voila!
Author’s Note: I added this stroke because it helps isolate the skull more from the background. This approach to object isolation in design isn’t always a great thing and should be used tastefully. You give strokes to every single object and you’ll have something retarded as hell on your hands – no bueno.
So we need some text dammit! Vomit Whistle. Hmmm, well… The Arsenal does have a gnarly-as-hell font called Goatbeard. We’ll use that!
So I typed out the band name. I duplicated the text, right clicked it and converted it to paths. I then ungrouped it and moved all the letters closer together to my personal liking. I kept the words Vomit and Whistle as seperate objects (I did add them and expand them, however). I then applied an arch to them with a more positive vertical distortion on the “Vomit”, and a more negative distortion on the “Whistle” (because they’ll be going around the top and bottom of the skull). If you’re totally lost to what I just said .. effect > warp > arc. Play around with the settings. That should get you back on track.
Now remember the splatter we put aside? Here’s where it becomes useful to this piece. We’re going to duplicate our band name’s layers, drag them to the side, and make them the lightest color we’re using on the design. Copy and paste them in place (ctrl+c and then ctrl+f). Take the splatter and throw the sucker right on top of one word and size it appropriately. Duplicate the splatter and do it to the other one. Now select the word (this should only choose the second layer of the word you pasted in place, not the original) and then hold shift and select the corresponding splatter. Intersect them using your pathfinder tool and you should have the splatter cut out into the shape of the word. Do the same for the other and you should have about the same result as I have shown here below.
Now I applied a black stroke using the method I explained on the skull, and then once that was grouped into the text, I repeated it again with the background color.
I then placed the text appropriately into the design, and we’re done!
Now be professional – mock up the shirt for your client and send them a decent sized proof of the actual design too. Wait for them to approve, collect your earnings, send them their final files, and keep your eyes peeled for when it hits merch stores internet-wide… FOR YOU ARE THE DESIGN CHAMPION!!!
… and this only took you about an hour.
June 4th, 2008 at 9:44 am
BOOOOO YAAAAAA!!!!!!
Very Cool - When is set 11 Coming out to buy?
June 4th, 2008 at 10:13 am
Nice! When I use the intersect tool on the pathfinder, the overlapping shapes merge, but all of the other stuff is still there. I can never figure out how to do what you did with the splatter and the text. I followed what you said, but it didn’t work right…
June 4th, 2008 at 10:25 am
hi Dave, grate tutorial as always! I was just wondering where you guys print your shirts?
Keep it up,
Ragnar Þór Valgeirsson
June 4th, 2008 at 11:49 am
Wow Dave! This t-shirt tutorial is amazing - one of the best yet. Love it. Thanks.
-Bill
June 4th, 2008 at 12:15 pm
@Drew, expand your object in the pathfinder box. That should do the trick.
@Ragnar, we use Jakprints (www.jakprints.com) pretty often.
Thanks everyone else for the kind words!
June 4th, 2008 at 12:20 pm
dave can you tell us when set 11 will be available for purchase
June 4th, 2008 at 12:21 pm
Great tutorial! This is one of the best tuts I’ve seen to see how to simply put a design together in a short amount of time.
I might add….Vomit Whistle is the funnest band name I’ve heard in years.
June 4th, 2008 at 12:44 pm
@Tom - SET 11 will be available to purchase tomorrow. Keep your eyes peeled at the arsenal. This is one of our best sets yet… alot of really useful stuff.
June 4th, 2008 at 1:00 pm
SaaaaaWeeeeeaaaaaaaaatttttttt!!!!!
June 4th, 2008 at 1:07 pm
Killer tutorial! Reminds me of Skate or Die
June 4th, 2008 at 1:34 pm
You are a Design Jedi!
Thanks man, great as always. I kinda do that spatter (or whatever) thing over type a lot where I work, and people flip out when they find out how simple but effective it is.
June 4th, 2008 at 2:02 pm
Dave,
Sick, sick, sick tutorial! Thanx for the info and how-to…it all makes sense once you throw out doubt and read threw the process.
Question: What files would you suggest a client should receive?
Thanks!
June 4th, 2008 at 2:24 pm
I can’t figure out how to stroke something using the technique that you described…. Do I select everything, or just the fill color, or just the black and white lines? I can just ungroup them if they are grouped and then add them, expand, and make them a stroke? It doesn’t seem to be doing the trick…
June 4th, 2008 at 2:43 pm
This is exactly what I have been waiting for. I always have a tough time designing shirts, and to see some sort of workflow and process is priceless. Thanks so much.
– RustyEight Media –
June 4th, 2008 at 2:45 pm
every file format possible. if the design was made in a huge psd, send them that and a jpeg equivalent. if it was made in illustrator, send them an illustrator eps saved out a few versions back to eliminate backwards-compatibility issues, and for the hell of it, give them a jpeg @ 300 dpi that’s about the size of the final product.
June 4th, 2008 at 2:45 pm
above is @Marcus
June 4th, 2008 at 3:00 pm
How did you get the shadows of the t-shirt to show up in the image? I was thinking “Multiply” or “Overlay” transparency settings, but those drastically change the color.
June 4th, 2008 at 3:22 pm
oOOOOHH snap!
Nice.
June 4th, 2008 at 5:58 pm
Hey guys where do you get your T-Shirt stocks from they look great previewing the designs.
Lovely tutorial.
June 4th, 2008 at 6:08 pm
Wow, a tutorial/article covering stock vector art that you sell. Stock art is ruining the design world. Period.
June 4th, 2008 at 6:36 pm
woww sick tutorial
i cant make the outline anybody can help me please
+
i have so many time trying to make that kind of outlines T_T
June 4th, 2008 at 7:47 pm
Mojo,
Heck yes we’re featuring OUR stock vector art! We need to make money to cover Dave’s payroll. It would be nice if Dave would work for days on a nice tutorial like this and answer all your questions for free… but he has to pay for his rent and food and flowers (ok, maybe not flowers.) But he’s got bills.
This way - everyone gets awesome free tutorials and you have the choice of buying our products or not. I think that’s a win-win situation!
I also debated about how stock vectors would affect the industry… but then I saw what people were doing with them.. and I remembered that stock vectors are only a tool. They won’t make you a good designer. You still have to know how to put the pieces together. You need a good sense of layout, movement, depth, composition, etc. etc. Now I think of stock vectors much like stock images. So, are stock images ruining the design world too? I don’t think so. It’s still up to the designer to use them in the right way. That is still a HUGE challenge. Dave just makes it look easier than it really is… trust me. Dave’s got mad skills. And this tutorial is the culmination of a lot of work. What you don’t see is the designs he chucked before this one came together.
Anyway… that’s my opinion - for what it’s worth.
-Bill
June 4th, 2008 at 9:33 pm
Well said Bill
They are definitely not harming the design industry, though it may cause some extra poor quality designs (from people who just throw it all together into some tasteless vector mess and claim it as original). That’s inevitable though, and it’s not worth worrying about.
For me personally, I used to really rely on them since I didn’t know illustrator very well, but they really helped me learn the program so now I only use them for small touches occasionally. I think they are a really good learning tool as well as incredibly practical
-Derek
June 4th, 2008 at 10:50 pm
you guys rock, the tuts are awesome and your products are thee most used tools in my arsenol. thanks a million.
June 5th, 2008 at 12:32 am
Hah nice one Bill. Yeah seriously, stock art is just that stock art. Noobs will try to create what the see on shirts selling at Hot Topic and Pac Sun and they might be successful for a bit until they grow confidence to create this themselves.
Others use it as a time saver on projects such as this. If we were to create all this stuff from scratch for EVERY project, it would blow the budget out of the water and we’d lose the job.
June 5th, 2008 at 12:42 am
Hey Mojo… I live in Illustrator. And I can make an illustration of the Baby Jesus throwing a cupcake at a Tyrannosaurus Rex’s face in the UFC Octagon while keeping it photorealistic, from scratch, using only one color and no halftones… and I still use stock vector art.
I’d love to see your portfolio :D.
And if you read the damn thing… I quote:
“We’re one of many different choices for theme-driven vector artwork, but since this is the GoMediazine… we’ll be using objects strictly from our packs to show the power of stock art when dealing with projects such as these.”
I explain to the end user that we are ONE of many options, and don’t front for one second that you wouldn’t do the same.
Now to answer some questions…
@nobahdi - Tweaking the shirt to be light instead of dark, and then adding those layer effects are what does the trick. You want dark to show through, and if the whole shirt is dark, it will change the design underneath it undesirably.
@Dan - Many stock photography sites offer blank shirts, just mask them out to isolate them on the background of your choice. That’s what I do.
Thanks everyone!
June 5th, 2008 at 1:39 am
Great tutorial. It basically describes almost every occasion I need to design a tshirt.
June 5th, 2008 at 7:50 am
Great tutorial! Keep ‘em coming!!
June 5th, 2008 at 9:29 am
I can’t wait to see the tutorial of the baby Jesus vs. T-Rex cupcake match.
Thanks for answering my question Dave.
June 5th, 2008 at 9:32 am
Well said Dave and Bill!
And Dave, I’d like to check out that illustration sometime. =)
June 5th, 2008 at 9:48 am
@ Dave
Thanx a great deal!!!
June 5th, 2008 at 9:49 am
As an information designer, this stuff blows my mind. Thanks for the inspiration, Dave. And way to rock the defenses Bill and Jeff.
I would love to see baby jesus throwing full-sized CAKES — because that’s a little more old-school classic comedy. Just my opinion.
June 5th, 2008 at 10:03 am
AND - speaking of shameless self-promotion and selling of products… We are currently working on a “pack” of T-Shirt Templates. A variety of colors and shirts… all with Photoshop paths so you can instantly mask your design onto the shirt. We’ll even make a layer with wrinkle shadows to go over top of your designs on dark shirts!
-Bill
June 5th, 2008 at 10:14 am
@ Mojo
Not for nothing…deisgning is not a random cheap-on-the-fly type of “profession”…however, in today’s social spectrum of supply and demand, you’ve got to get in stride with the machine or be crushed by it. Sure go ahead and pontificate on a individual design for the sake of “originality”, but the competition in this arena of customer satisfaction, you ain’t got no win. Unless you are catering to a clientele who will wait for eions for your final spec.
GoMedia is providing really time saving alternatives to complement our projects…not to exclusively Arsenal vector file a project.
Bottom line, use it or don’t…Go Media is the ish!!!
June 5th, 2008 at 12:49 pm
Marcus, well said.
June 7th, 2008 at 5:25 pm
Dave … all tutorials should be presented this way - fun, creative, and straight to the point. I was twisting my noggin’ trying to find a way to horrify a background for a new website I am building, and this tutorial puts me back on track … damn, you make this TOO easy!!!
June 9th, 2008 at 1:43 am
I tried and tried to intersect the text with the splatter and couldn’t do it for the life of me, everything turned all white or I couldn’t make out the text from the splatter… Hopefully this makes sense, and I am working on illustrator 10..
June 9th, 2008 at 9:42 am
Hey Integral,
A few quick things… First - I HAVE seen corrupt versions of Illy that the pathfinder tool is jacked up on. Also, depending on how complex your splatter is - I think 10 has a harder time handling super-complex vectors when using the pathfinder tool. Sometimes I’ve seen it just fail completely because there are too many points.
But before you’re sure that’s it…. Make sure you prep your copy with the following steps:
1. Make sure all text is converted to paths.
2. Make sure you have expanded all appearances (such as the warp effect)
3. Then, UnGroup your letters and use the Pathfinder Merge (or Add to Shape) tool on your letters BEFORE you try to use the Intersecting Shape tool.
These steps MAY fix your problem. Good luck!
-Bill
June 10th, 2008 at 1:01 pm
This is such a sick article!z
But when you make the Baby Jesus vs Tyrannosaurus Rex tutorial, can you make the cuppycake girl be the referee? Btw, when can we expect that?
Hahaha. Thanks again for another learning experience!
June 10th, 2008 at 4:01 pm
@ Bill, thanks for your help, I think its something to do with either my illustrator or being version 10, I cant even get my layer palette to pull up anymore, I was literally designing on a budget!
Is there other ways to do it folks or should I just break down and buy cs3?
June 11th, 2008 at 9:44 am
Hey Integral,
CS4 is almost out! So, I say - hold out just a little longer…
Instead of using your Pathfinder tool… you COULD just mask your splatters instead of knocking them out.
Just put a copy of your lettering on top of your splatters. Then select both sets of shapes and click Object/Clipping Mask/Make.
Technically all your original splatter is still there. But it’s now hidden.
-Bill
June 17th, 2008 at 8:37 pm
Isn’t true black #000000, not #020202?
Other than that, great atricle.
July 8th, 2008 at 5:01 am
How dare you advertising your own products through your incredibly helpful, inspiring and absolutely free tutorials? Greedy bastard.
*hides under his bed*
July 11th, 2008 at 10:08 am
This is one of the best Tuts i have read in a while. I like your presentation style, and it is easy to follow. I do a ton of t-shirt work and I agree with the 3 color selection, keeps it on the cheaper side.
July 14th, 2008 at 10:07 pm
I love this tutorial! Thank you for showing us a “quick n dirty” way to get through a short deadline.
So for us rag-tag, scrapping, self educated designers….what is a color scheme like for more than 3 colors? You mentioned at the beginning of this tut that dark/medium/light was the general rule for most designers, so what would be the general rule for more than 3 colors?
July 15th, 2008 at 2:22 am
@Stan,
That’s where the designing part comes into play, haha. Basically, it’s color theory. I would write a tutorial on that but my use of color fluctuates. If I design for a black tee, and I decide to use 5 colors, the black of the tee would eliminate the need for the outline color. I’ll use two pairs of similar complimenting colours (a light and a medium of something) and an obnoxious color or white to spread throughout the design. Normally, I use that wild card color to tie it all in. That approach seems to work best for me.
July 18th, 2008 at 11:08 pm
I just thought I’d add a color resource that’s great for color-blocked designers… Adobe lab’s Kuler. http://kuler.adobe.com/
July 25th, 2008 at 2:35 pm
This tutorial puts a lot of simple things into perspective for me, although most of the things are tools I know how to use — your tone is totally relatable. Nice imagery in the intro story too, adds a nice touch.
August 7th, 2008 at 7:32 am
Hey guys … great tutorial.
I just startet using illustrator and outlines were always a pain in the ass for me. Your “trick” is simple, yet effective - thanks for that!
One question regarding printing of that design:
I work together with a guy that needs different layers or files of the different colors to print them.
Is there a simple way in Illustrator to extract (in the case of the tutorial) the three different VISIBLE colorforms onto seperate layers? Or would some free- or shareware help?
Cheers
August 8th, 2008 at 10:35 am
You should really put a link to your new t-shirt mock ups in the article.
August 9th, 2008 at 6:38 am
Dave - I really love this tutorial
Thanx a lot m8.
August 21st, 2008 at 4:00 pm
Wow this is awesome! Thanks so much, I feel inspired.
August 24th, 2008 at 7:19 pm
I CANNOT figure out the outline part for words, i get lost around the adding part…. HELP!
September 4th, 2008 at 8:01 pm
@ Mojo -
I used to smirk at stock art myself.
Then I got a job.
I am the only artist at my company. Stop by desk on any given day and you’ll find 15, sometimes more jobs in various stages of progress or waiting to be started. If I were to try and hand draw every job I would quickly find myself the victim of a client lynch mob.
This is a deadline driven industry. It isn’t about sitting in the basement in a haze of pot smoke, making something “rad”. It’s about more than drawing a “wicked” picture.
It is about juggling multiple projects, time management, asset organization, communication, talent and creativity all working under pressure in some kind of beautiful chaotic harmony to interpret the clients vision and provide them with the best possible product in the required time frame.
It’s about staying fresh and being creative, not just wen you *want* to, but when you *have* to.
There is a huge difference.
Whether you are creating completely from scratch, using clip art to compliment an original piece, or doing an entirely stock art driven piece, stock art is a tool, just like stock photography and just like fonts.
Embrace it. Or don’t.
best
October 11th, 2008 at 1:23 pm
@ Moby,
did you forget to expand on the pathfinder once you added the paths together? Thats what I did, then it worked better.
Thanks for the awesome tutorial, I learned some new tricks!
October 22nd, 2008 at 3:21 am
Just wanna say this tutorial rocks. Really great for people like me to know that design doesn’t require one-off strokes of inspiration to look damn good.
October 24th, 2008 at 10:28 am
Naked gleeming crystal bones …I gotta print this out and read/do over and over. Its just that good.
November 14th, 2008 at 12:26 pm
I have a simple dumb question. How did you color the skull green? If I adjust the fill color it just colors the lines and the fill is still white? It’s driving me crazy!!
Awesome article! Really great to see the process broken down. Extremely informative!
November 18th, 2008 at 9:39 pm
Hi, Nice tutorial.
I am playing round with a trial version of Illustrator CS4 with some of your free vectors.
I can’t seem to figure the stroke outline around the skull out.
Any suggestions would be great.
Thanks