When designing for apparel, presentation of your proofs is very important. A detailed image of a piece simply will not suffice as an adequate proof. You want to hit the design home, and mocking it up on a t-shirt is what’s going to do the job. Apparel designs are much different than regular print jobs because you can potentially design around every nook and cranny of the garment, this is something you won’t be able to illustrate to your client with some large .jpeg. They hired you for your creative knack, and that’s what you’re going to need to bring to the table.

Now here at Go Media, we’re always mocking up something - many of them tees – and after a while we realized that providing a pack of tees geared towards designers for presentation purposes would be very cool. And we did just that… a twenty piece pack of tees that comes separated in five colors with four variations of each. Fronts and backs, clipping masks to isolate your artwork onto the appropriate areas, and even a shadow layer to placed conveniently on top to give it that authentic printed look! We took a lot of time and pride out on these to make sure they came out just right, because bringing the best to our clients is a goal we all share as designers.

In this tutorial, I’ll be using a design that I created for Kick Rocks – an up and coming apparel company.

Author’s note: This process will also cover how I mocked up the “Designing on a Budget” tutorial’s end result (Vomit Whistle) onto a tee – which is the very thing that helped spark the idea to make the pack and this accompanying tutorial (thanks “nobahdi” who asked the initial question of how the shadows were applied to the tee, and everyone else who commented on the tutorial!).

Now we’re going to take our tee from the pack (Blue Front Wrinkled.tiff file) and open it up in Photoshop.

Now focus on your layer panel. This is the structure we came up with for these files.

Since the design that we’ll be using is intended for a white shirt, we’ll need to change the shirt layer that’s currently blue, to white. Before hand, I make the background layer a dull grey so we can distinguish the white shirt completely from the background. I then use the following settings using the Hue/Saturation tool to achieve the desired look.

Automatically you’ll notice that the shadow layers look way too dark. So we’re going to bump the opacity down to 50%.

Now we import our art. Open the file in Photoshop (and make sure it’s a hi-res export) and place it in the Your Art layer. Dragging it will work, copy and pasting, etcetera, etcetera.

Now we’re going to use the mask layer to make our printable area the only visible spot on the design. Grab the actual mask from the “Mask” layer (not the whole layer), and drag and drop it right onto the “Your Art” layer. You should now have no excess left around your shirt, and all wrinkles, the collar, and overlaps are preserved as if the shirt were truly printed. The best part is that you can still edit and move around your design. Make it bigger - move it off the edge - whatever - it will stay within the bounds of the shirt because of the mask. Check out the following image to get a better idea of what I mean here.

Now your mockup is done. If you feel you need more shadow now that the design has been placed in… then bump up the opacity of the shadow layer and you’re good to go.

Author’s note: I like to get snazzy so I’ll place some crazy texture on the background and fidget with it to make look all dark and complimenting to the garment. These additional presentation doo-dads often get the client very excited and way more interested in your work, versus a dull and boring round of proofs. And nobody wants to be stuck re-illustrating 3 to 5 times because of a half-assed proof’s inability to wow the client.

We’ve also got a quick video of how to set up the layers on vimeo.

I hope you enjoyed this tutorial and got to learn a little about the functionality of our new Apparel Template pack. Taking a progressive approach to the mock-up phase of apparel design is something that should be taken very seriously. As always, we provide (and use) the necessary tools to do so. Thanks for reading everybody, take care.

Ok, I lied. We’re not entering the Food Service industry. But a tutorial on how to make some chicken wings would be pretty cool, none the less. This tutorial is all about how to make those really cool hyper detailed wings that all those bro-dawg brands are rocking.

First things first, we’re gonna need to find a reference photo of a feather. After some searching on the information superhighway, I found one that I liked. The reason I chose it is because it had good curvature and a good amount of disheveled strands. Check it out below.

So I placed it into a new Illustrator file (by going to File > Place). Once in there, like a lot of the other tutorials on here that require tracing from a photo reference - I’ll be turning down the opacity of the image and locking it’s sub-layer.

So we’re gonna start tracing the feather out. We don’t need the plume on it, just the feathery part. I put enough crazy ridges and stray strands to keep it as a good base. I didn’t go too hyper on the first one because we’ll be duplicating the base shape and adding further detail to prevent the feathers from being so repetitive. We can’t have a boring wing, you know?

So I duplicated the feather base once and dragged it off to the side. I made a couple of my own tapered brushes for the detail. If you’re unfamiliar with making tapered brushes, we have more than a couple tutorials that touch on how to achieve this effect. It’s a whole tutorial in itself, so like last time, I’m omitting it from this one too. I added a ton of detailed strands all around both base shapes. I expanded the appearance on the brush strokes, deleted the invisible stroke marks (by making a transparent box, using the magic wand to select all the invisible lines, and hit the delete key) then added the shape of the details and the corresponding base feather together with the pathfinder. And we’ve got two feathers.

Now I start building the wing. The curvature comes into play here, because it’s what is going to give our wing a legit look. I duplicated each feather, and switched off each style to keep it different, while decreasing the size little by little. I know I reached a good stopping point when the detail in the wing begins to get lossy with the naked eye.

Now we need to add the secondary part of the wing. I duplicated the wing we have so far and added it with the pathfinder. I turned down the opacity (locking it’s sub-layer is up to you, but not necessary) and got to work with the additional part. I added the detail strands much like I did in the feather. I also added some more smaller feathers to give it some more character and kill off a little of the negative space.

Now I repeated the expanding of the brush strokes, deleted stray transparent lines, and merged the wing all together with the pathfinder tool. We have a wing! Now let’s duplicate it and mirror it like it’s shown below.

So let’s align this bad boy properly, and group it together.

You’re now equipped with a pretty nice set of wings to put behind your logo or graphic. I used a skull here from the Arsenal, well, because I can… and there you have it.

Now I’m gonna go look up some Hot Wing recipes and throw down in the kitchen. Adios!

-Dave

The feather used as the photo reference was aquired by using Google’s image search, from the website Owl Prowl. Just giving them credit where it’s due.

I say mostly because it went through a series of transformations - one of which was an export to photoshop (for some wacom-esque highlighting) followed by a hi-res auto trace in Illustrator. So, some edges are slightly off, but the overall seamless effect is there. Go ahead and download it, but stick around for some behind the scene paparazzi shots of how it was made.

I’ll admit it - I had never made a seamless pattern before. I knew I wanted it to be swirly, so I pen-tooled some reference photos for ingredients as I brainstormed just how this was going to work.

By the time these ingredients were ready I had a plan for a workable but really laborious process to make a seamless pattern. In the screenshots below you’ll find an explanation of how it was done, but really, if you know of a better way please share in the comments!

EDITED: Track6 knows a much more accurate and quick way to accomplish these steps and was nice enough to share it with everybody in the comments. The idea is the same, but the process better. Thanks!

As you can see from the last screenshot, the pattern was still quite a mess at this stage. Filling out the middle took a little while of puzzle piecing everything together. By the end of the workday last Friday I had spent a little too much time on this thing, and still wasn’t happy. So over the weekend curves were smoothed and highlights added, and finally it was starting to look right. An anxious face showed up in the curves so I made a little preview image just for fun.

So that’s the story of this freebie! I hope if you embark on making your own custom seamless pattern you’ll share some shortcuts with me in the comments.

Catch up on the first four rules here

First, let me apologize for the long hiatus I took from this particular series of articles. It’s been really busy around here. I have to squeeze these articles into my spare time (and I don’t have much of that.) So, without further ado, let’s chat about depth.

Depth, ok, we’re not talking about pop-up books or holograms here. We’re talking about simulating depth (or dimension) in your 2D illustrations and designs. The first four principles in this series dealt mostly with what I would consider to be usability basics. Depth is the first design principle that I think gets into the “cool factor” – basically, what makes something look bad-ass. Adding depth to your art will help it bust off the page, or conversely, pull the viewer in.

There are a great number of techniques for adding some dimensionality to your designs. I’ll cover my favorites starting with the most obvious ones and then work my way to the more sophisticated ones.

Overlapping objects

Ok. This is just plain obvious. You probably learned this in kindergarten. If you made a nice crayon drawing of a bus and a house, and the bus overlaps the house, then it’s obviously in front of the house. But if the house overlaps the bus, then the house is in front. Duh.

So, why even discuss this? Well… just to remind you – you can overlap your design elements. It’s easy to get into a habit of just spacing out all of your design elements. If you put a nice thick margin of space between all your photos and all of your design elements, you’ll certainly have a clean design, but it may look a little flat. Sometimes I will even add in design elements just so I have something to put other elements on top of.

Let’s look at an example of how a simple overlap can add some depth to a design.

Here is a gig poster that Dave Tevenal and I are working on. Dave did the initial pencil sketch of the guy, then I added the water splashes around his feet, the koi on the wall behind him and inked it.

You’ll notice that in the lower right corner I have the venue’s logo (the Grog Shop) over top of a black bar. Now, I really didn’t even need a black bar there. All the copy in the bar could have been black and the logo could have just sat on the drawing. But I wanted to draw some attention to the copy on the bottom of the poster.

Here is the same poster without the black bar along the bottom.

Now compare it against one with the bar in place.

By adding this bar with the venue’s information and then over-lapping it with the logo, the depth I’ve created is as follows: Club Logo, then bar with info, then poster artwork. It also helps set up priority. The venue logo is the most important, then the club info, and finally the specific show artwork and details.

The illustration also has a great number of overlapping objects. The guy overlaps the koi (fish), the water splashes overlap the guy’s feet, etc.

Object Size – variability

I like to use variety in the size of the object in my design. This is particularly effective when you have several similar object that are only varied by their size. A good analogy for this is varying the distance you are from a person while shooting photography. It’s typical to shoot a picture of your friends from about 3-5 feet away. You’ll either capture most of their entire body or at least from the waist up. This is a fine picture, but if you shoot 30 pictures like this – they start to get boring. And since MOST pictures are shot like this – I consider them fairly common. Now, if you want to spice things up – shoot a super close-up. Maybe you only capture half of your friend’s face. Then maybe shoot some pictures with your friends way off in the distance. Or, best of all, a combination of all three. Have someone in the foreground, have someone in the middle ground and then have someone off in the distance. This will maximize the sense of depth in the picture. Or if you’re shooting nature pictures, I would suggest trying to capture as much depth as possible. For instance, maybe you can capture some leaves from a tree that is near you in the foreground, a beautiful lake in the middle ground and a snow capped mountain in the distance. Together they form a variety of depth in the image – because the relative size of the objects in the image varies. The leaves are relatively big -because they are close to the camera, the mountains are relatively small because they are in the distance.

Let’s take a look at some examples of how the size of the objects can create depth. This first example is very simple, just a bunch of circles. This example shows how varying something as simple as size can create depth.

Each is slightly smaller than the previous. See how their change in size creates a sense of depth. Which circle looks closest to you?

This next example is a bit more complex. This is a T-shirt Jeff Finley did for Paint the Stars. There are a number of depth inducing techniques being used here, but let’s focus on the object size variability.

In this example the skulls in the design each get slightly smaller as they get higher up on the shirt. Also, the rope-like tentacle that winds through the eye sockets gets smaller and smaller. Those combined with the previous technique (overlapping objects) creates a real nice sense of depth in this design.

Line thickness (weight)

Closely related to Object Size Variation is Line Thickness (weight) Variation. This is a particularly great technique for drawing, but whether it is the thickness of the lines you’re drawing or the thickness of the strokes you’re putting on your designs; weight matters.
The rule on line weight works just like object size. The thicker the weight of the lines, the closer it feels to you. The thinner the line weight, the further it is from you.

Let’s look at a great example of this in a drawing.

This is an inked comic book page by Art Adams (one of my all time favorite comic book artists). This is an excellent example of how weight of your lines helps create depth. If you look at the gladiator in the foreground and compare how thick the lines are that make up the shape of his body with the weight of the lines that make up the buildings way off in the distance – you’ll obviously see the dramatic difference. Thin lines in the distance, thick lines close-up.

Depth of field

Depth of field is the portion of a scene that appears sharp in an image. Depth of field is actually something that happens naturally in our own human eye, not just a camera lens. If you hold your hand up and focus on it, then, without losing focus on your hand – try to see the other things in your peripheral vision. Are the things behind your hand in focus? No. We have the perception that everything we see is always in focus. But in fact, what’s happening is the human eye is constantly adjusting the focus of your eye to exactly what you’re looking at. The truth is that only the objects at that correct depth are in focus – everything else is a blur.

We see examples of depth of field in photographs and our brain knows how to interpret the information. Item out of focus are at a different depth than objects in focus.

Here is a macro photo of a spider that one of our staff members (Dave Romsey) took.

In addition to just being one bomb-ass photo of a spider, you’ll notice that only the spider’s body is in perfect focus. But everything that is in front or behind the spider, like the leaf in the lower right corner is way out of focus. Even the legs of the spider shift from in focus (near the body) to out of focus as they extend forward or backward away from the body.

Japanese animation or “japanimation” has been taking advantage of this little trick for years. They will apply a blur to objects in the distance or foreground. I think it adds a really nice touch! Here is a single frame of animation that shows this technique in use.

Color

Colors can even help represent depth. This is mostly the case with great distances. The atmosphere is made up of trillions of little particles of vapor, dust and translucent molecules. And while the “air” seems 100% clear over short distances – it is not. It’s actually a milky film that becomes more opaque the greater the distance. So, when selecting colors for an exterior scene – objects in the foreground should have strong vibrant colors. Objects way off in the distance should have less saturated colors.

In this photo I found online of the Blue Mountains National Park you can see how the milky haze of the atmosphere affects colors. On the left, in the foreground, the color of the rock and hikers seems clear, at full saturation. Just to the right you can see how the forest in the distance has its colors washed out by a haze.

Effects – drop shadows

Ah, the most classic of all design effects – the drop shadow! Both Photoshop and Illustrator can quickly add a drop shadow to your design. They may be cliché at this point, but I still use them, and I still love them. I think most people don’t “see” them as an added effect. When used properly, they blend right in with the design while adding a nice touch of depth. Here are two examples of a design I did, one with drop shadows and one without.

Now, this is an example of subtle drop shadows. The design on the top does not have them, the one on the bottom does. First, just look at the title on the top of the ad. See how the drop shadow makes the text pop just a little bit more off the background. Now look at the fighter’s head where it slightly overlaps the title. Each case uses just a subtle drop shadow to assist the depth. You can also see it under most of the text and under his fist.

Perspective

Perspective is defined as a technique of depicting volumes and spatial relationships on a flat surface. Ok, that really didn’t do us any good at all did it? Let me try and explain perspective in laymen’s terms. Basically, as lines head into the distance, they converge on a vanishing point. A classic example of this is the image of a road that heads straight off to the horizon. The lines on the road converge to a single point. Maybe an image will help.

Here is that classic image of that road. You’ll notice that as the lines of the road head off into the distance, they converge on a single point.

You’ll notice that all the lines: the horizon lines, the rows of grass, the flowers, even the shades on the road converge to that same vanishing point.

The road in this scenario is essentially flat – so its lines converge to a single vanishing point. But object with multiple sides will converge on two vanishing points, not one. Let’s take a look at another example.

Here is a little box with a window. You can see how it’s two sides each have their own vanishing point.

Now, perspective is not something that can be summed up in a few paragraphs. So, I won’t get into any more detail on it in this tutorial. But suffice to say that it’s important enough that you should do some research and teach yourself about perspective!

Check out the rest of the posts in this series:

Become a Master Designer: Part 1
Become a Master Designer: Part 2
Become a Master Designer: Part 3
Become a Master Designer: Part 4

In the last post, I showed you how to make 8-bit characters in Adobe Illustrator. In this post, we will animate those characters in Adobe Photoshop using the Animation Window.

1. CREATE A NEW PHOTOSHOP DOCUMENT

To Begin, open up a new document in Photoshop and make the dimensions the size you want your final animated gif to be. This will be used for on screen viewing, so set the resolution at 72 pixels per inch.

Next, transfer your vector images into Photoshop. The easiest way to do this is to use the copy command in Illustrator and paste them into Photoshop as a smart object. You may need to resize them when you move them to Photoshop, but just remember to keep the “pixels” of the different objects the same size.

2. OPEN THE ANIMATIONS WINDOW

Now that you have all of your images in Photoshop, it’s time to animate! Open up the ANIMATION window which is located under the WINDOW menu. The animation window will serve as your timeline for your animation.

There are a couple of nice features here that should be noted.

• Each box in this window serves as an individual frame of your animated gif.
• On the bottom of each of these boxes is a drop down menu that allows you to control the duration of that particular frame.
• Below the frames in the toolbar, are the add and the delete frame icons. They function in the same manner as the add and delete layer buttons on the layers palette.
• There is also another helpful button, the TWEEN ANIMATION FRAMES button, that allows you to enter frames automatically as tweens for your animation so you don’t have to animate every individual frame. Instead you can just make two frames, one where the animation should start and one where it ends. Then, you select the last frame in the animation and you press the button that looks like little boxes going in a diagonal direction. This brings up a pop-up menu that allows you to enter as many frames as you would like to control the duration of the animation.
• On the window there are also the typical video controls that will allow you to play through your animated gif.

3. BEGIN THE ANIMATION

For this tutorial, we will do a short animation of our characters fighting. To begin, make sure that all your characters are on different layers. The way the animation works is by turning on and off different layers in each frame to controll animation. So, begin with your character on one side of the screen. Then, add another frame in the animation window, and make sure it is selected, and move the character across the screen. If you click back and forth between the frames in the animation window, the character should jump from one part of the screen to the other.

This is where that handy tween animation button comes into play. Select the frame with the character where you want him to end up, and press the tween button. In the pop-up box that appears, make sure that it says “tween with previous frame” in the drop down box. Then enter the number of frames that you want to insert in between your animation and press ok. Now you should see a lot more frames in your animation window. Press the play button to see the results.

4. BRING IT ON!!!

So great, you made a little guy move across the screen, now what?! Well, how about some good old violence? This may take some more pixel pushing in Illustrator, but what you need is to create the impression of a sword swinging motion.

The best way to do this is to have your character have two different poses. In one pose, have him stand with his sword up and in the other he should be standing with the sword in a downward slashing motion. When the two are animated together, it appears if your warrior is swinging his sword. Use the same technique to animate as you previously did, turning on and off layers in the different frames. Then all you have to do is move him towards the other character and swing away.

5. SAVE THAT MASTERPIECE

Finally, to save the animation out as a GIF, go to the FILE menu and click on the SAVE FOR WEB & DEVICES option. In the window that comes up, make sure gif is selected, and then click save and you are done. Choose a color preset like 128 colors or 32 colors depending on many you have. Remember, fewer colors mean smaller file sizes.

6. GO NUTS!

Now go crazy with it, and add some effects and some projectiles and soon it will be mass hysteria! Then, you can show it off to your friends by putting your gif’s on your web page or use them as a AIM icon. Here is the final one I created…GOOD LUCK!

If you want to, post your results in the User Showcase and show off your amazing animating skills.

Have you ever wanted to make a kick ass animation of 8-BIT characters tearing each other to shreds? Well now you can. In this tutorial, I will take you through the process of creating vectorized 8-bit characters for use in an animated GIF. I’ve also included the vector source files of the characters and objects so you can create your own animation. So start jamming to The Advantage and get started!

1. Set up your document in Illustrator

To begin, open Illustrator and create a new document. It doesn’t really matter what size, so the default 8.5 x 11 dimensions will be just fine (Since these are vectors, they can be resized later to suit your needs).

2. Turn on the Grid

Next, you want to make sure you turn on the grid in your document. You can do this by going to the VIEW menu and selecting the SHOW GRID option (or by pressing CTRL + “ for the shortcut). This grid will serve as a guide for all the pixels you will use to make your characters, backgrounds, items, etc. Also, I find it helpful to turn on the snap to grid option as well. This makes it easier to move the pixels around the grid, without having to spend time lining them up by hand. You can find this option in the VIEW menu under SNAP TO GRID (or by pressing SHIFT + CTRL + “ ).

3. Use Squares to create your Character

Now your document is set up, you are ready to make some vector 8-bit characters. First, use the square tool to make a square the exact same size as the squares of the grid. Since you have the SNAP TO GRID option on, this should be fairly easy. This square will serve as a single “pixel” that you will copy to make all of the objects in your 8-bit environment.

4. Get Creative!

Next, you’ll have to decide how you want your characters to look. You can either sketch them out and scan them into your computer or just wing it. If you are going to sketch them out, make sure that you turn the opacity down on your sketch so you can still see the grid in Illustrator. For this tutorial, I am just going to wing it using characters from the Final Fantasy series as a guide.

At this point, you need a quick way to move the pixels around to create your character. I find it works best to work with one color at a time, and then go back and add detail later. The fastest way to do this is to select the pixel you want to use, and hold ALT while pressing the arrows in the direction that you want the pixel to go. This will copy your single “pixel” and move the copy in whatever direction you choose.

5. Color your character

When you have your outline finished, it is time to fill in your character. I use the same technique as before, but I have found you also need to use the mouse to hand place pixels at times. When choosing colors, keep in mind that you need to use a limited palate like a real 8-bit game, if you are going for authenticity. If it helps, you can also keep a single pixel of each color next to your characters that you can copy or use for other elements in the 8-but world you are creating. Also, don’t forget to create a weapon for your character.

6. Create more characters

After I finished my first character, I made some other characters of a similar style so that he has someone to fight.

7. Create Your environment

Now, you need to create an environment for your characters to fight in. This can be a bit tricky, but just remember that most retro games had a block or unit of background that was usually repeated across the screen. In this background, I have created a couple of different trees and used darker shades of greens and browns to add depth. Then, I repeated them across the background using the HORIZONTAL DISTRIBUTE CENTER tool to keep them looking uniform. In the fore ground, I created a dirt road that the characters can be placed on. Also, when blocking out large areas of color in the background, it is much easier to create larger sections of color using the square tool.

8. Create Some Objects

You may also want to create other elements that the characters can interact with in the environment. For this free vector sample pack, I have made a few different things that you can add into your animation like mushrooms and torches. And now you should be ready to bring your characters to life, through the power of an animated gif!

post links to your character designs

I’m curious to see what our readers come up with. I want to see some awesome 8-bit characters, monsters, bosses, objects, etc. I’ll even post my favorites in another post!

Freebies!

Part 2 - ANIMATION

In Part 2, I will take you through the process of animating your 8-bit characters using Photoshop CS3’s animation panel.

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.