Designing for CafePress with Adobe Illustrator

Most casual users are probably at least passingly familiar with paint programs, and many use applications like Paint Shop Pro or Photoshop Elements to edit family photos, make greeting cards for Aunt Harriet, and, of course, design stuff for CafePress. The essence of a paint program like this is that you're actually "painting" pixels of color that make up an image. The larger and more complex an image is, the more pixels it contains, and thus the larger in size it is. These pixel based images are called "raster" images.

With a drawing program like Illustrator (or Flash or Freehand or Corel Draw), the images created are "vector" images, meaning they're based on a set of mathematical points that define the shape and elements of the image. They're also scalable, meaning that the image can be enlarged or shrunk or stretched in just about any size without any loss of quality, which won't really be possible with a raster image.

Why is using a vector image for CafePress so cool? I find it to be a flexible medium for adapting a design to the varied image sizes of all CafePress' different products. The fact that images are object oriented makes for easy editing and creation of multiple design variations, too.

"Object oriented" simply means that each element of a design -- for example Mozart's wig seen selected in the picture above -- exists as its own separate element, and can be edited and changed independently of the rest of the design.

How can you put Illustrator or another vector drawing program to work for you? In the previous section I showed an image of a Mozart design where I had highlighted Mozart's wig only. So, say you wanted to change the wig color for a somewhat different design. All you do is select the wig with the direct selection tool (the black arrow) and select a new fill color. Each element, or object, can have two basic attributes: fill, which is the internal color, and stroke, which is the outline of the object that can take on various colors and thicknesses. Anyhow, with a simple click of the mouse we can change Mozart's wig from a staid gray, to a wild fluorescent lime green. Repeat as necessary to create additional variations.

Elements can also be reused. Note that the side curls on the wig are the same thing, just repositioned, resized, and tweaked a little to make them a touch different.

For another example, check out the Johann Sebastian Bach designs below, where I created both a color and monochromatic version of the drawing. The black-and-white version definitely looks better on some of the shirts, notable the light colored ones.

While I usually use Illustrator to draw the master design, I create the final variations of the design for upload to CafePress in Photoshop. Since CafePress wants raster images, in the form of PNGs, JPEGs, or even PSD (Photoshop) files, I tend to err on the side of caution and go over things in a paint program for final image preparation. You can also use Photoshop's nifty special layer effects to apply some finishing touches to your design.

In Illustrator, I'll often create new layers containing elements for multiple variations of a design, and show or hide the appropriate layers depending on what I need. I'll save the desired variation as an EPS file, and then import that into Photoshop. To do this, I'll create a new file the size of the CafePress design I'm working with (say 10 x 10 inches at 200 dpi, or 2000 x 2000 pixels for a t-shirt), and then use the "Place" command from the "File" pulldown menu to import the image. It's not really necessary to save the EPS files, but I do it to keep track of the design variations that I make.

Use the handles on the corners of the place image box to position and resize your image, if necessary. Remember, it's a vector image, so feel free to blow it up as large as you want before converting it to pixels.

When designing for white and light t-shirts, I'll use a white background, but for dark shirts, I'll import the vector graphic onto a transparent background, which works perfectly for generating that transparent PNG that's necessary for dark t-shirts. Since only the shapes of the design are imported and not the artboard, you won't have a background unless you've drawn one in in Illustrator, thus you'll get a perfect, neatly outlined image with transparency every time. Pretty nifty.

I'll post some more Illustrator CafePress tricks here in this lens as time permits. Feel free to add your own via the lens guestbook.