Creating t-shirt designs

Creating t-shirt designs.., have you ever wondered how to create a t-shirt design?  I know, I know… …there is not a simple answer and more questions usually poop up.  Well, I think I found the answers to most of your questions.

Check out this tutorial which was originally posted on the gomedia blog by William Beachy:

Hey Designer and Illustrator faithful! It’s time for another wicked tutorial from your brethren here at Go Media. I had a particular project I was working on recently that I thought would make a great tutorial. The technique I would like to share with you is a little illustration short-cut.

When you need to create something with that hand-drawn look but you’re on a tight time line – this is one way to do it fast. The project I was working on was a t-shirt design for Black Ace Clothing. They’re great guys and pay us well so I am not normally rushing through their projects. But on this particular project I had already completed a large hand-drawn illustration for the back of the shirt. They wanted an additional illustration for the front of the shirt, but I was concerned about the total budget for one t-shirt, so, I busted out this little trick of mine. It saved me time, and saved them money!

The Design

Let’s start by taking a look at the final printed t-shirt:

Here is both the front and the back of the design. The quote on the design is: “Sticks & stones may break my bones, but words will never hurt me.” This is a really cool project because this t-shirt design is destined to be worn by Tiffany Michelle on an up-coming reality TV show. So, given the potential national exposure, we wanted to really hit a home run with this design.

The part of the design that uses my rapid-fire illustration technique is the front design. You can see it here in more detail:

This image shows a 3-color design. In the end production of the shirt you’ll notice that Black Ace decided to keep the front design simple (1 color) as to not over-shadow the back design, which is 4 color with a gold foil print.

The Tools

Just so, you have a full understanding of the entire design process we went through, I will show you how I did the back, then reveal my rapid-fire shortcut for the front illustration. Before I get ahead of myself I should give you a list of the tools you’ll need for this illustration:

• Bristol Drawing Paper (plate, smooth or vellum finish.)
• Pencil, Mechanical Pencil, (I used a Koh-I-Noor Technigraph 5611 mechanical pencil)
• Mechanical pencil sharpener
• Staedtler Mars Plastic White Eraser
• #1 or #2 fine-tip paint brush or crow quill pen (I used a #1 Windsor Newton University Series 233)
• India Ink (I use Higgins Calligraphy Waterproof Black Ink)
• Light Box (Or a window will work too.)
• Scanner
• Computer
• Adobe Illustrator
• Access to the internet or some source of photos

The Concept

Let’s do a quick fly-over of how the back was designed so you can understand what lead us to the front. For starters, Paul Davis – my contact over at Black Ace (and a mighty fine dude if I may say so) sent me over this concept layout.

Now, I know this may look a little rough, but I was actually very impressed with it. Not many clients come to me with such a refined concept. And while this particular incarnation of it doesn’t look so good – I could easily see that this was an awesome layout with great potential and just needed to be fixed up on the production end. Paul asked me to work with this concept, but to also sketch up two additional concepts for this design. Now, there is no shortcut to this early process. This is just a lifetime of drawing that allows me to do a real quick sketch. But as you’ll see later, the details I put into these are really not necessary. All you’ll really need to focus on is placement and size of your elements.

Here are the three sketches I did for Paul.

This first one (above) is my interpretation of his rough layout. Now that it’s in this rough sketch phase you can start to see the potential. I KNEW this one was the best of the three, so I pushed to work on this one.

Above are the other two sketches I did, but Paul was wise enough to go with concept #1 (his own original layout.)

At this point I just drew this. There were no shortcuts used on the back design. OK, maybe one—we do own a skull over here at Go Media. Whenever I’m drawing a skull and need reference, I can pick it up and hold it at various angles to see how to draw it. And no, it is not the head of a Boston Red-Sox fan (Go Tribe!)

Above is the scan of the pencil sketch for the back before I inked it. As you’ll see, I left the text off because I knew I was going to drop that in with Adobe Illustrator later. Also, there will be a Black Ace logo in behind the banners. So, that too was just roughed in. As I said before, I’m not going to go into all the details of the back design, just a fly-over so you can see what I’ve done. For all my pencil drawings I use a Bristol paper because it’s very thick. This allows me to erase without fear of tearing the paper. Bristol paper also allows me to ink it without fear of the ink bleeding through to my desk. I use a mechanical pencil, well, just because it feels better in my hand then a regular wooden pencil. I use an HB or H hardness lead. Although the B, B1 and B2 leads feel GREAT when I’m drawing, the lead is too soft. It smudges all over the paper and makes a big mess. So, I use the harder leads.

Inking

Once the pencil drawing is done, I bust out my brush and “ink” the drawing. I use a paint brush because it allows me maximum line weight variation. Or, in layman’s terms – I can make my lines as thick or thin as I want. By varying the weight of my lines it gives the illustration a ton of character that is hard to duplicate on the computer.

You’ll notice a big roll of masking tape near the end of my brush. I put this on my brushes because I have big fingers. This gives me a better grip of my brush.

I make a lot of little shading lines that look best if they start as a thin line and thicken as they work their way into the dark. A crow quill pen can also accomplish the same effect. If you’re going to use a crow quill pen I suggest using a Hunt Artist’s Pen tip #512 and 102.

Scanning

Once this Illustration is done, I scan it into my computer using our flat-bed scanner. We’re fortunate to have an over-sized scanner here at Go Media. This over sized scanner allows me to scan the whole illustration in one single pass.

Not long ago we only had a legal-size scanner. I would have to scan my larger drawings in two or three pieces then assemble them in Photoshop. That was always a pain in the ass, but hey – what can you do? As I am planning on live-tracing this drawing in Illustrator, the higher the resolution the scan is the better. I like to scan my inked drawings at 500 dpi.

Typography

At this point I have my finished inks are in Illustrator and I’m ready to add my copy and colors. For this design I wanted an edgy, almost medieval font that looked like it was hand painted so it would match the rest of the illustration. I did an extensive search and found the font you see here.

I won’t tell you where I got it – ancient Go Media secret. Obviously, it was perfect!

I used the Effect>Warp>Arch tool in Illustrator to get the copy to follow along the shape of my banners. Then it was just a lot of nudging, kerning, stretching and scaling to get all the letters where I wanted them.

Coloring

I started the coloring by creating one single shape that filled the entire design. I made this by simply making a copy of my vectorized line art, selecting it, and then doing the following: Object>Compound Path>Release, then Object>Ungroup, then Pathfinder>Add to Shape Area. Basically this process broke all these vector pieces up, then merged them into one single shape.

Next I pick my colors. Paul was printing this shirt with silk screens and has asked me to restrict my design to 4 colors. I know that I’ll need a range of color values so that I can color both shadows and highlights. Here are the four colors I picked. I would love to give you a long explanation for why I picked these exact colors, but I don’t have one. I just picked some colors that I liked and thought worked well together.

As I was planning on putting this design onto a black shirt, I start by swapping my line art’s black with my darkest purple. It needs to be bright enough to pop off the black, but dark enough to act as my darkest value color. Next I fill the entire design with the middle value of the three remaining colors. This allows me to add shadows and bright spots to the middle. That’s much easier to figure out than any other method.

Once the middle value fills the shape I do my shadows next. If you’re wondering how I decide where to place my shadows – well, nothing magical here. I look at the shape, imagine it in 3D, imagine a light source and give my best guess at how the shadows will fall across the object. If I have a reference photograph or the actual object (like the skull) then I can hold it up to a light and see exactly how the light falls on the object.

Once the shadows are done, then the highlights are fun and easy to drop on. Remember where your light source is!

The last step is to add some finishing touches. For this design I added some radial vector shapes from Go Media’s Arsenal. I use these types of stock design resources to finish off a lot of my designs. They’re another fantastic tool for saving time.

And viola! The back design is finished. Last step is to pimp out the design on a sweet t-shirt template and present it to the client. (Designer’s Note: Taking a little extra time to mock-up your designs really has a huge impact on the client. It’s one thing to see a flat design, but to see an actual t-shirt with the client’s design ON it! Wow! Now it’s REAL.) For this, of course I use the FINEST t-shirt templates ever made – Go Media’s of course. And they’re ultra fast and easy to use because the shirt is already masked with the highlights and shadows on their own layer. So, you just drop in your design and poof! It looks like a real printed shirt! (Ok, gratuitous product plugs are done.)

Now for the really good stuff.

At this point Paul was ecstatic with the design (correct me if I’m over-stating your satisfaction level here Paul.) But he wanted a little something for the front of the t-shirt as well. Since he liked the sketch #2 that I had done, he asked me to make that one as well.

This front design was intended to be printed smaller and was also on a very tight budget (since the back had taken so much time/money.) I needed an illustration short-cut. I needed a trick. I needed Go Media’s Rapid-Fire Illustration Technique!

So, here is the way to really speed up an illustration project: just rough-cut together a bunch of photographs into your intended illustration. This will be easier if I just show you.

Rough Sketch

Here is the original sketch.

Rough Photo Collage

Now, obviously, this technique doesn’t work for all things. If Paul had asked me to illustrate a superhero flying with a dog under his arm, well, the likelihood of me finding that photograph would be remote. But this design had mostly common objects – roses, a skull, rib cage, bones and a banner (I couldn’t find a banner in the right pose, so I just left a spot open based on my original sketch.) Also, this is a fairly clean assembling of photos. In truth, it can be way rougher than this. This image is just to be used as a guide to help you get your illustration going. You can clean up and fix all the little details while you’re drawing.

Collage To Sketch

So, the next step is turning this photo montage into an illustration! Start by printing your photo montage at the appropriate size. In this case, I wanted it about 8 inches across. This is approximately twice the size the final design will get printed on the shirt. (Illustrator’s tip: Whenever working on an illustration – create it at about twice the size you’re going to print it. This allows you to be a little sloppy. Once it’s shrunk down to the final size it will look super tight! People will wonder how you got so much detail into it.) Ok, where was I? Oh yeah – turning our montage into an illustration. Now that you’ve printed out your photo montage, you want to tape it to a sheet of your Bristol paper. Make sure the printed side of your montage paper is facing the Bristol that you’ve taped it to.

Now take out your trusty-rusty light box and place your paper on top of it, Bristol paper up! Next, you’re going to draw your illustration using your photo montage like a draw-by-numbers guide.

If you need to change, exaggerate, or edit the photo montage, you can make corrections now. On this design, for instance, I thought the skull’s bottom jaw was waaaay too large. So, no problem, I just ignored the photo and drew it a little smaller.

If you don’t have a light box, you can always use a window during the day! But make sure not to push too hard! I don’t want you falling through your window.

This phase of the drawing doesn’t have to be perfect. The photomontage is there to help act as a guide. While on your light box just get all the major shapes in place. Then you can turn your light box off and finish the drawing using your innate drawing ability (if you have that). You can strengthen your lines, add shading, details, etc.

In this case time was at a premium and I knew I would be inking this myself, so I really just hammered the drawing out quick. I trust my ability to do a sweet job during the inking phase. Here is the finished pencil drawing I did using the photo montage as my guide.

You can see that I invented a lot – particularly the banner. Now, obviously I have years of drawing experience, so it may be a bit easier for me to “invent” details that are not actually in the photomontage.

So, that’s really the end of the “shortcut.” While this shortcut may still seem labor intensive, I can assure you that this will save you some serious time. The photos give you all those little details that you would otherwise have to invent. Also, having the photomontage as a guide completely eliminates the possibility of total failure. If you’ve spent any time drawing you certainly know this is a real possibility. I’ve personally had plenty of days when I simply cannot draw what’s in my head. After several frustrating hours and a waste paper basket full of failed drawings, I’ll usually just quit for the day and start again the next. Using this photomontage technique will leap frog you right over any of these types of problems.

Inking

Now we proceed as we did with the back design. Using Higgins Calligraphy ink and a #1 paint brush, we ink our illustration. Here are a few inking tips. First, your lines should be thinner on the side of your light source. If you have no light source, assume it’s coming from the top. So, if it’s a bald head you’re drawing, the line beneath the chin should be thick and the line on top of the head should be thin. Also, objects in the distance should be drawn with thinner lines. Objects in the foreground should be drawn with thicker lines. Using these techniques will give your drawings a sense of depth and character.

Here is the finished Inking of this drawing:

I was always a big fan of the comic strip Calvin and Hobbes, of course, who wasn’t. But it wasn’t just the brilliant writing. You could see that Calvin and Hobbes had been painted with a brush. Just look at all the character in the line art. You can see the thickness of the line weight varying dramatically.

Compare that to another comic I love: Foxtrot. The writing is still great. The characters are hilarious. But the line art is kind of flat and boring in my opinion. This is the difference between using a brush (or crow quill pen) and using a regular felt tip pen when inking your illustration.

Now we go through the same process that we did for the back design. I’ll break it down into numbered steps for you here. Sometimes that’s easier to follow:

1. Scan the art at 500dpi – save as jpeg.

2. Place the art into Adobe Illustrator.

3. Select the image.

4. Convert the line art to vector: Object>Live Trace>Make and Expand

5. Get rid of all the white shapes that the Live Trace function creates. Using your open arrow tool, click on any one of the white areas of your art. Then select the rest by clicking: Select>Same>Fill and Stroke. Warning! In illustrator this function grabs EVERYTHING that has the same fill and stroke, so if you have other white objects with no stroke in your document, it will erase them too! Once all the white shapes have been selected, hit delete.

6. Make a copy of your line art. Either select it then Edit>Copy, Edit>paste. Or select it and hit control+C, then Control+v. Or, while using your arrow tool, hold down the alt key, grab your line art and drag it to a new location. All three of these methods will make a copy.

7. Create your primary color fill object. Select the copy of your line art and use function: Object>Compound Path>Release. Then Object>Ungroup, then Pathfinder>Add to shape area.

Ok, now at this point you should have your line art and a single shape “fill.”

8. Add your copy. Now, just like on the back we’re going to use Adobe Illustrator to add our copy. It’s a simple text box with an effect>Warp>Arch applied to get it to fill our banner.

9. Color your design. The coloring on this side of the shirt is even simpler than the back. Paul asked for a simple 3-color design, so – that’s what I gave him. I’m going to be using the same colors I selected from the back. So, the line art is a dark purple and the primary fill color is a yellowish bone color.

The one additional color I’ll add will be the shadows.

After an initial proofing Paul felt that the rib cage was not working in the design. No problem! I just created a shape to remove the ribs and then used the Pathfinder>Subtract from shape area. I did this twice – once for the line art and once for the color fill.

And that’s it. Here is the final design for the front of the shirt. I got this entire piece done in about 5 hrs. 1 hr. to find these pics, 30 minutes to piece them together, 1 hr. to do the pencil drawing, 2 hrs. to ink, and 1 hr. to scan, vectorize and color!

I want to give a big shout-out and thank you to Paul and Howard Davis for being such cool clients and allowing me to write this tutorial! For some reason a lot of our clients are overly protective of their assets and don’t let us show off our work! This shirt is NOW available for pre-order at BlackAceClothing.com or click here to get directly to this product.