So here is the final part of the tutorial/walk-through of the design process I use. I am feeling like crap today so this post promises to be extra cranky. The whole tutorial is here.

I’ll be honest I’m not super happy with the final design, but I never like my own work, so I guess that will be up to the t-shirt buyers to decide if it is worthy. But after several hours of print-screening every inane step I took, I am not about to start over on a funnier or more intelligent design. Besides this tutorial is not so much about how to make a funny shirt but rather the process I use to create the artwork for a shirt. So if you think the design sucks by all means post a comment to that effect and I will be sure to kill myself because of I have not received the adulation of some random 12 year old on the internet.

So without further griping let’s get on with it, my carpal tunnel is kicking in already. So when we last left off I had finished inking the artwork in Photoshop through a tedious process of retracing my original pencil sketch.

Thankfully this next bit is a lot less tedious and after years of doing it the whole thing only takes a few minutes to complete.

So the first step is to save the original picture as a JPEG somewhere. I keep the resolution fairly high, but not retarded. Because the final will be vector it is not all that important that the resolution be better than 800 pixels at it’s widest side. It just needs to be high enough to keep the shape and undulations of the lines that give it the organic hand made feel.

As well you must ensure that your final save of the JPEG is strictly black and white. No part of the image that is supposed to be black should be left unfilled. This must be a two tone image only or illustrator will do some crazy shit with the mistakes you make. So be sure, especially if you did the last bit with a pen, you clean your image up so it is flawless tone wise.

So once your image is saved go ahead and open up Illustrator. We are going to use the Live Trace plug in so hopefully your version of Illustrator has it.  I am fairly sure that Inkscape or whatever you Linux lovers use has some sort of tracing plug in, so the basic ideas here should apply. Once Illustrator finishes taking the hour or so it needs to get it’s act together and start, you are going to import the JPEG into the program. In Illustrator they have decided to call this “Place” just to confuse the shit out of you so you have to buy the Adobe courses and books. It is found under the File menu.

Once the file is placed you will see the image you created smack dab in the center of the canvas just waiting for you to ruin it.You’ll notice along the top of the screen you have the “Live Trace” button. We’ll use that function to make our trace.

Next to the live trace button there is a small arrow button pointing down. Hidden in here are presets that you can use to create the style of trace you want.  Adobe hides all the good stuff  in spots like this so when you are fiddling around with stuff be sure to see what these drop down menus do. Anyways we are going to select the “Comic Art” preset because ….that’s what it is….and then sit back and wait while your piece of crap dell computer tries not to have aneurysm.

Usually on a good computer this takes a few seconds, and on a crappy one it causes the program to hang or have  a BSOD all over itself (Google it if you’re a newb and don’t know what BSOD means). The result often doesn’t look any different, but that is only to the untrained eye, which is a stupid expression, but if you zoom in you will see all the pixels are gone and you now have a vectorization of your rasterbatory exploits. That also would make a great domain name, www.rasterbation.com….I might have to think about buying that one. But I digress.

Okay so it’s confession time, I am really good at a lot of things. I am a rock star with Photoshop, Drawing, Photography, web design, and apparently good in the sack, but I am at best a roadie when it comes to Illustrator.  So what happens next is kind of confusing to me, but Illustrator takes your vectorized version of the image and does something in the trace process with the image that groups in a way that isolates it and frankly I haven’t a clue how to edit it in it’s present form. So I have, after years of smashing my face against a brick wall, come up with a way to make the image it has created usable for me. All the Illustrator snobs out there by all means rip me apart for this next step, but this works for me and I can kill you with a spoon because I am also a ninja, so shut your gob. All kidding aside if you can explain this please enlighten me, I want to learn.

Basically the step, that I know is not right but I do anyways, is to flatten the transparency.This is usually done to get rid of extra shapes and convert text to outlines but it seems to have the side effect of getting rid of all the superfluous Illustrator noz that usually stumps me. To do this I go under Object -> Flatten Transparency:

I basically check everything in this box, I know there isn’t any text but I like the uniformity of the check boxes all being checked. What can I say, I’m weird that way.

Once that bit of image hackery is done we are ready to move on to the next part of this process. Now we need to “ungroup” the parts of the image we have made. Basically in vector programs the parts that make up the file are called objects. These various objects are “grouped” and stacked in a way to make our picture and to make them into one unit. So any changes to one object affect all objects in the group.

This is usually very handy, but not in this case. For us to edit our image we must first ungroup all the objects. To do this right click on the center of the picture and select “Ungroup”.

Once the image is ungrouped we need to remove the background. Now this might prove a bit confusing, but when you imported and trace the image in illustrator it treats the white background or your raster file as an object unto itself. Because our artboard has a white background it is invisible but trust me it is there.  To remove it we click on the white space outside our main drawing and you will see that it creates a blue border around all the selected objects. In this case there should only be one selected object and it should trace around the outside of our drawing on the interior and be a rectangle around the exterior like below.

In the image below you will see that I have placed a green rectangle behind our object to demonstrate the effect of removing the background object. Objects in Illustrator have an order they are stacked in, in this case I have placed the green rectangle at the very back, or behind the other objects. As a bit of UFI you can order objects in a vector file by right clicking them and changing their order.

Now comes the fun part, color! For the next series of images I select each object that comprises the rabbits core (not the black lines) and color them individually.  For the more astute of you out there you can select multiple objects by holding shift and selecting them. But if you are new to this take it slow, you don’t want this to be as awkward as the first time you had sex.

Once the object is selected you pick a color by double clicking on the color option at the bottom of  the toolbox (that’s the rectangular list of buttons you don’t know how to use on the left). There are two types of color boxes there, one is for the “stroke” (an outline you can create around the object) and the other is for the core color of the object.

You want to double click the core one (it is the solid square without the red line through it in the images below). This will open the color picker. From here you select your color and hit okay. Magically the object changes to that color, and you rinse and repeat picking different colors until you are done.

So that is basically it for the coloring. If you are just following along in this tutorial to see how to trace and color your drawings you can stop now.  Sure I will feel used and betrayed that you didn’t read the whole thing, but eventually after some heavy drinking I should be able to get over it.

For those of you still with me, now comes the fun part, we get to take our cutesy Disneyesque hare and turn it into a filthy visual pun that will find it’s way onto a shirt for some disenchanted teenager to wear to school and get in shit when a teacher smart enough to figure out what it references sees it.

First I save this file as an EPS and AI file to be put aside for future use in stock imagery catalogs or somebody else’s cutesy store to sell. I always keep components of my work because I never know when I can use them again or make a few bucks here and there with it.

So once that is done I get ready to add the hair to our hare. See what I did there, that’s funny. Anyways I select the brush tool in Illustrator (fifth from the top on the left) an pick a brush from the brushes pallete that is small and the right size.

Once that is selected I simply draw the pubes on the hare, magically corrupting our cute little bunny into a pubic hare t-shirt design. I used the same color as I did for the interior of the ears.  Because spreadshirt has a gay 3 color rule (black is a color) this is necessary to keep the image suitable for flock printing. I add the hares one by one making sure that they look as pubesque as possible.

Unfortunately because the minimum object size restrictions of spreadshirt would make the pubic hairs too big to look good, I am going to have to relegate this one to the digital print bin. Which is fine, it’s just a different print process. I add some clever text giving our pubic hare it’s own scientific name and we are done:

Hope you enjoyed this tutorial/walk-through and now sod off.

Cheers,

Shawn