In the past year I’ve learned quite a few things that I didn’t know about t-shirts, and t-shirt printing that I thought I would share with anyone who’s either already designing their own shirts, or just getting started.

If you’re printing your shirts using a direct to garment type of solution you need not worry about many of these tips such as reducing the colors, but for those of you using screen printing, like we are at Assault Shirts, I think you’ll find most of these tips and resources very helpful.

Reducing image colors in preparation for a screen printing in Photoshop

Throughout many of our t-shirt designs we’ve had to reduce the amount of colors in an image in order to make it fit into the color scheme of our design.

Reducing the amount of colors also makes it cheaper to print, and it gives you a better idea of what your design is going to look like once it’s been screen printed. We used this technique in our 1984 T-Shirt design as well as our One Year As A Lion T-Shirt.  The key to reducing an image’s amount of colors for screen printing is the Posterize image adjustment. To demonstrate, I’ll use this image of Johnny Depp as the iconic Chicago gangster, John Dillinger.

Image > Adjustments > Posterize…

Posterize reduces the amount of colors in your image to the number of levels you specify. Depending on what kind of a look you are going for you can reduce the amount of colors once, or sometimes twice to get the desired look for your image. I’m sure you can even reduce it further, but I generally use 3 or 4 levels.

To posterize your image, first make sure you are on the selected layer you want to posterize. Then, go to Image> Adjustments> Posterize…

After posterizing your image, you can either desaturate it or try varying the amount of levels within the Posterize settings to get the desired effect. Here’s a few other options I managed to come up with:

You can also bring your image into Illustrator, and start to trace the image so it doesn’t look so crispy which you’ll find  may have a better effect than what I’ve outlined above. I personally am all-Photoshop guy so I prefer to keep everything in Photoshop, but Live Trace in Illustrator is another popular method for vectorizing an image.

New Document Presets for Screen Printing T-Shirts

The two document presets for the two sizes of screens that we use are:

18x23 canvas with 300 dpi resolution in CMYK color mode

With the large image sizes it may make sense to start at a resolution of 150dpi if the computer you are working on is a bit older. You can also use a Fill Layer for a background rather than a raster background layer to reduce your document file size. I do this with all my designs so my working file isn’t a 2gb fail whale waiting to happen.

Getting Pantone color codes for exact color matches with your printer

In order to guarantee your designs colors are matching and actually printable you need to send your pantone colors for every color in your design to your printer. Rather than let them do the color work for you, you should send the colors pantone codes.

To do this,  use the eye-dropper tool by selecting it in the tool palette or by hitting the “i” key and then clicking on the color in the design.

After you have the color selected, in your tool palette double click the color, and your color picker will open with the color you just eye dropped. Generally, this color will still be an RGB or CMYK color and isn’t the pantone color code we want. To get the approximate pantone color code, click on the “color libraries” button.

This will open up your color libraries window and the eye dropped color should be selected. The P542 C is what you want to send to the printer along with every other color code associated with your design.

2 minute color separation in Photoshop

Our printers have always done the color separation for us after we send them the high resolution images, but in case you need to do color separation on your own here’s the easiest and quickest way to accomplish that:

• Select the Magic Wand Tool in the tool palette (or hit the “w” key”)
• Uncheck “Contiguous” in the tool options area

• Click a color on your design
  

• Create a new layer and fill it by hitting cntrl + backspace or alt + backspace (depending on what color you want to fill it with the foreground or background)
• Repeat this for each color in your design and you should have each color separated on it’s own layer! (Here’s my design with new colors all separated on their own layers below)

I also found several detailed step by step Youtube videos which outline the above process using similar techniques:

www.youtube.com/watch?v=lmspWZqbc2Q

www.youtube.com/watch?v=4uydc2VmfvQ

T-Shirt placement templates and mock ups

To ensure your printer gets your shirt printed with the correct shirt placement you should place your design on an actual shirt. This should be included with your high resolution shirt files that you send to your printer.

In the past we’ve used a combination of the below sources for t-shirt templates and mockups:

• Photoshop T-Shirt Custom Shape -- Download Use this custom shape as a background and place your shirt design atop it and mask out the outside area.
• Go Media’s Arsenal T-Shirt Templates are a the best way to get a photo realistic idea of what your designs will look like. They’re worth every penny.
• Color Overload’s Men’s T-Shirt Templates Another PSD with an assortment of color t-shirt templates to use for creating mockups from Color Overload
• Assault Shirts Product Page Photoshop Mockups This is our T-Shirt mock-up that we use on our product pages at Assault Shirts. It’s my personal favorite and can be used for shirts of all colors in the American Apparel style.

Related Links & Resources

• T-Shirt Forums Graphics & Design Help
• Designer’s Guide to Apparel Printing from Go Media
• Emptees T-Shirt Resources -- Great assortment of downloads and resources

I knew, from the vision I had in mind, that I wanted a nearly symmetrical design radiating from a central focus. In this case I found an image of the face of “Big Brother” from the movie 1984 to be the focus. Feeling that this imposing figure had all control over the populus (and viewer) through methods of fear, propagation, and surveillance I knew I wanted everything to stem from his mind and to point, visually, to his face as the central focal point.

I then began to layer in the imagery I thought were either directly available to work towards the theme or that linked to subjects indirectly corresponding with the theme. So, for this design I focused on this idea of “Big Brother”, of being watched, controlled, enforced, manipulated, opressed, etc… Here, I have an an atomic bomb’s mushroom cloud rising from his destructive mind, and guns like crossbones on a pirate’s flag flanking his left and right.

Remember the central theme of the design at all times

During this particular design process, I thought of the current state of surveillance I thought of tools of oppression and fear propagation; televisions, loud speakers, and weapons. I wanted this endless  barrage of surveillance equipment to be erupting from behind his face.

Here, I’ve added elements such as CCTV cameras, some loud speakers and a couple TV’s.

At this point most elements are only made on one side and then copied over, flipped horizontally and added to the other side of the design.  This is only done for the sake of speeding up the production process. Once the design is filled out a bit more I will add/subtract elements to make the design asymmetrical.

Here, I’ve continued to fill the design out more, adding more TV’s, speakers and cameras. At the top and bottom I’ve added different antennae elements to elongate the design and begin to break up the symmetry.

View the design in different sizes

When doing a design with so many various elements all working together in a relatively tight space, it is important to take breaks to look at the image at different sizes.

The reason I do this is to remain focused on whether the design still works, whether it is balanced, i.e. are there so many elements that the design now feels overwhelmed and cluttered or is there still room for additional elements. I felt at this stage, there were enough primary elements, and only smaller tweaks and touches were needed. So here you can see, I’ve added static and eye elements.

Once these final tweaks were completed the design was ready for the addition of color, and more abstract complimentary design to aid in grounding the existing design elements. For this, I passed the design along to Tim.

The finishing touches – done by “third world Timmy”

Finalizing this design from Stani boils down to two steps:

1. Breaking up the symmetry as much as possible by adding “Victory” text elements. (The brand of cigarettes from the book, 1984) and moving megaphones, microphones, tentacles, and antennas. This is mostly accomplished by using custom shape tools and graphing things together the way I want them to display. I’ve also added some custom brush splats in the background to give the design more volume.

2. Adding an intense blue color palette. I accomplished this by placing duplicates of the design on top of itself and masking/cloning different color blues to get the exact colors I wanted. I also used custom adjustment layers (levels) and several layer modes (color burn, and color dodges)

The final image:

Related Links:

• The artist statement and inspiration that went into this t-shirt is discussed in full detail in the 1984 T-Shirt blog post
• Assault Custom Photoshop Brushes tutorial
• Photoshop Brush Dynamics Tutorial

In my earlier tutorial I went over how to use brush dynamics from a preset brush, but what I didn’t show you was how to actually create your own brushes. If you’re not using custom Photoshop brushes then you’re missing out on one of the best features of Photoshop that will save you a ton of time and bring some new flare to your designs. The first step is selecting what you want to make into a custom brush…

I will be creating two brushes in this tutorial. One is a cement face and  one is an image of Beelzebub from the Public Domain:

Step 1 – Adjusting your image for creating a brush

Make sure when selecting an image to make into a brush you’re using one that isn’t going to get you sued. A good place to start is images in the Public Domain that you can do what you want with! After you have the image open in Photoshop you may want to adjust the levels (cntrl + L or command + L) so that it gets the right amount of contrast you want. The way that brush samples work is very similar to that of a mask except that the darker the tone the less translucent the brush will be.

What’s that mean? What this translates to is that if something in your image that is completely black will be 100% of the brush color you select, and something that is 100% white will not put down any paint at all.

This is an important concept to grasp in regards to creating brushes because you can create brushes of ANYTHING. If you have a wispy image of hair it’ll actually create the same translucency of hair via the brush. In the image below I did 4 things to prep it for being a brush:

• 1. Normal Image cropped to a square
• 2. Bumped up the contrast with levels (cntrl + L or command + L)
• 3. Desaturated (Image>Adjustments>Desaturate) and inverted the image (cntrl + I)  because we want the black information (the only color used to make a brush)
• 4. Painted out parts of image I didn’t want to have in my brush.

This is a great way to bring texture and different variations of  smoothness to whatever project you may be working on. As you can see I’m only going to be getting the black part of the image as the brush face.

Step 2 – Select a square area around create the brush preset

Beelzebub is already prepped for brush sampling because he is black and white, so now all you have to do is select the marquee tool by hitting the m key or by selecting it on the tool palette. Hold down shift to make it a perfect square selection, and drag around the item you want to make into a brush. When you’re ready to create the actual  brush go to Edit>Define Brush Preset… A dialog will pop up asking you to name the brush. Click ok. (screenshot below)

You should now have the brush of Beelzebub selected, if not hit the b key (shortcut to select the brush tool) and it should be selected. If is still not, right click and your brush palette will open up and you can scroll to the bottom of your brushes and you should see Beelzebub there.

Step 3 – Adjusting Custom Brush size and settings

Now you should see the brush overlay and if you click you’ll see that the item you selected as your custom brush appear. If you hit the [ key the brush will increase in size. If you hit the ] key then the brush will get smaller. In this particular example I’ve used my two brushes, Beelzebub and the cement face and set their color blend mode to color dodge to get some cool color effects if I click in the same place twice.

It’s at this point that I recommend you read the Photoshop Brush Dynamics tutorial that I wrote because you can take your custom brush and scatter it around, rotate it, and have it change colors and opacity dynamically as you drag the brush around. (It can even interact with a drawing tablet)

Step 4 – Creating Brush Sets

Something I like to do after I’ve made a nice selection of brushes is to export them into a .abr file so I can access them on all of my computers as well as provide them for downloads to people who frequent the Assault T-Shirts website. To save a custom brush set you need to be using the brush tool. (at least the way I make sets you have to have brush tool selected or you can go into the brush window)

Hit the b key and then right click to bring up your brushes. Then click on the triangle in the upper right hand portion of the window and select Preset Manager…

Then use select all the brushes you’ve made that you want to go into a set by either using cntrl + click or command + clicking if you’re on a Mac like I am and then  click “Save Set..” and save the brush set somewhere on your computer.

Conclusion

This is just meant to get you going on creating brush sets. If you’d like to skip the step of making all your own brushes you can go to some of the resources below and download brush sets for free! I highly recommend giving credit to these people who made the brushes though, and if you’re selling something that uses custom brushes like we are at Assault, then I recommend you make your own brushes from your own images so you don’t get sued.

Photoshop Brush Resources:

• T-Shirts made with Custom Photoshop Brushes @ Assault
• Assault Custom Brushes from this tutorial and a few others I’ve made
• Deviantart Photoshop Brushes – Where I download the majority of my brushes
• Brusheezy – another great brush set resource
• Public Domain Image Resources – Wikipedia page with free public domain image resources
• Custom Photoshop Brush Video – If you can handle the guy’s weird voice, here’s a video that outlines the same topic.
• Another Custom Photoshop Brush Tutorial Video – if you don’t fall asleep this will work for you.

One of the staples of our t-shirt designs featured at the Assault T-Shirts website is the use of randomization and intense brush dynamics. I use plenty of other techniques in conjunction with brush dynamics, but needless to say, if it weren’t for Adobe’s incredible dynamics engine, our designs would have taken twice as long to make, and they’d be only half as tough looking. If you’d like to learn to create interesting textures, highly dynamic imagery in a short amount of time, or something similiar to what we have done with several of our t-shirts, this tutorial is for you.

Step 1 – Select a Brush Shape

The first step to getting brush dynamics going is to either use an existing brush or to create a new Photoshop brush shape based on a selection. For this tutorial we will use a simple star brush and turn it into a dynamically generated brush that changes color/size/format without doing anything other than using the tool as you normally would (by clicking and dragging) Here is what the brush stroke looks like by default when clicking and dragging

As you can see the brush is evenly spaced out and has no dynamics assigned to it whatsoever. If you’re using Adobe Photoshop CS3 then your brush dynamics are located on the brush window which you can view by going to Window>Brushes or by hitting the F5 key. Click on the label “Brush Tip Shape” to bring up the brush dynamics window. Here is what my current brush dynamics window looks like by default:

Step 2 – Shape Dynamics

Here’s where all the magic happens… In each different window there are settings for you to tweak and play with to get the desired scatter amount as well as variations in opacity, colors, (foreground and background) brightness, scaling, flow, and hue/saturation. Here’s a shot of my settings with just the shape dynamics turned on and the result that comes out of it:

Step 3 – Select a Brush Shape

If you want to scatter the stars a bit you can adjust the scatter dynamics by checking off the box and playing with the settings in that area. Here are my settings from that and their results:

Step 4 – Color Dynamics

If you want to vary the color of the brush you can do this by adjusting your foreground/background colors and then you can adjust the color dynamics. Here are my results with that:

Step 5 – Dual Brushes

My final brush dynamic that I like to use alot is the dual brush dynamic which combines the use of two brushes as if they are being used two at a time (with a layer mode specified by you) Think of it as using a marker and a paintbrush in the same hand like when you were a little kid. I’ve selected the sparkle brush and adjusted the settings on that brush to give my brush a light textured look:

My brush is begining to look alot like the Barack Obama website branding at this point, and it only took me a few minutes of experimenting with the settings to get an effect that used to take ages to complete. (You won’t find anything like this in illustrator–as of now at least)

Step 6 – Save Brush Preset

The only thing left to do now is to create a new preset for your brush and by clicking on the create new button on the brush window.

Conclusion

This is just meant to be an introduction to brush dynamics. There are limitless possibilities to what you can do with brush dynamics including using it to create randomized variations of logos like I did with the Lex & Terry T-Shirt designs as well as on the Skull Spartan Warrior Shirt. There are also other methods of dynamics that you can use such as texture, opacity, and flow. (Opacity and Flow are covered in the “Other Dynamics” Section of the Brush Window)