l'atelier

This turned out to be a l-o-n-g post. The first part is a long-winded explanation of some sources of my inspiration for the technique that follows. If you are simply interested in the tutorial, use this shortcut to get there. It took several days, between interruptions and ‘real work’, to write down all of the steps, test them, revise, test again… Please leave a comment if something doesn’t make sense and I will fix it.

The inspiration

For as long as I can remember, my grandparents had saved back issues of Sunset magazine. Among the oldest in their collection were those with highly graphic cover illustrations of scenes of the Southwestern U.S. My favorites were portraits of Indians in the high-contrast lighting of the sinking sun at the very end of the day. (I later learned that these were illustrations by Maynard Dixon, one of the California impressionist painters.)

The same characteristics of semi-realistic, highly stylized images with strong colors and clean lines are in vintage travel posters and fruit box labeling.

In the early 1970s, on the way to the UC Berkeley campus, a poster caught my eye not only for the metaphor, but because it was unlike the ubiquitous psychedelic concert posters that adorned every window and utility pole. This Velo Sport poster captured the graphic style of pochoir prints, which I learned to recognize and admire. It was the work of David Lance Goines and the Saint Hieronymus Press. Through the ’70s, his posters started appearing all over Berkeley: Chez Panisse, The International House, Cody’s bookstore. To this basic style, Goines would introduce graphic embellishment, such as bold outlines and close cropping. The posters were printed as solid color lithographs, midway in difficulty between modern 4-color and pochoir (essentially hand-printing using stencils). Consequently, his palette has to be simplified to only those colors that were necessary to convey the message. I regret not being more of a collector.

Fast-forward about 20 years. Thumbing through Step-By-Step magazine for digital graphic artists, the work of Nancy Stahl caught my attention for the same strong graphic quality and high coloration. To graphic artists, her work is now considered to be iconic. These were digitally produced with Illustrator. What looks like it should be a simple technique is not. It’s worthwhile to take a trip through her portfolio.

The first attempt

My early efforts were pretty time-consuming even though I used Photoshop to increase the contrast and simplify the color range before passing the image to Illustrator to complete the project as a re-scalable vector illustration. Using a graphic tablet and stylus I hand-traced the outlines of the illustration with the Photoshop image as a (locked Layer 1) guide. I used the Paint Bucket tool to flow “paint” within the outlined areas. It felt (and looked) like color-by-numbers. It just didn’t seem feasible on a production basis unless I could streamline the process.

It took me several tries to develop a technique and even more attempts to find a method to apply this style to more complex images. A recent real-world example of this technique was a commissioned poster for the (Columbia River) Gorge Music Series. I used Mutlnomah Falls as the “metaphor” with the fingerboard of a violin in place of the waterfall. The intracacy of the leaves of the trees bordering the “waterfall” were the challenge. To hand-trace the patterns would be prohibitively time-consuming (I was on a deadline) and I didn’t like the result from using the Pattern Stamp (Photoshop) or Symbol Sprayer (Illustrator) tools to scatter identical leaves. I’m not a huge fan of Live Trace, but it was time to give it a try.

Several tried were needed to see how Live Trace worked and to get just the right look. I was only interested applying Live Trace to the vegetation. I had already drawn the violin and the foot-bridge on separate layers. The color count ended up being 37 or 38 colors which only one reason why it was printed on a 4-color press. The other was simply that this was a production piece for a client who had placed me on a budget. I would love to re-work it as an art piece for some old letterpress or lithograph press lying dormant somewhere. Nevertheless, I count this as successful. The client was delighted with the design.

The technique

Not to be consigned to the Journal of Irreproduceable Results, I tried to develop a production technique and practice with various base images. The following is the method that I use as a good starting point and employs both Photoshop and Illustrator CS4 (with Live Trace) or, ideally, CS5 (with the Blob Brush). A graphic tablet is not necessary, though it may be an asset when using the Blob Brush, which I have found to be invaluable in the final “by eye” cleanup. The final image will be a re-scalable vector illustration.

I found it easiest to use a base photograph without fussy detail or a wide range of colors. Better results are achived using low-resolution images (72 ppi). This sample image can be downloaded and used to follow along.

Start by opening the JPEG image in Illustrator, or Place (File > Place…) it on a blank artboard.

Click on the image with the Selection tool to make it active.

Open the Tracing Options dialogue box (Object > Live Trace > Tracing Options…)

Start with the Photo High Fidelity preset and check Preview so you can see the results of each step. The settings used for this image will most likely not be the same for other images. Some experimentation is necessary but I’ll try to point out what I look for when adjusting each perameter. Generally you want to find the settings that a) simplify the colors and b) smooth the edges of the color patches.

Color: At this point, it’s not necessary to achieve the final look, but try to capture individual color patches that will be important to preserve for the final version. For instance, I wanted to keep the yellow bands along the frog’s side from blending with the adjacent colors. To do this, I nudged Max Colors up (by 8) until they reappeared. Note that we’re up to 172 colors!

Smoothing edges: Start by bumping up the default Blur until the edges softened. Too much of a blur introduces intermediate colors so try not to overdo this step.

Next, increase the Minimum Area 10 steps, alternating with increasing Path Fitting 1 step at a time until the edges lose their remaining roughness and the patches of color blended a bit further. Now note that I ended up ith 116 colors.

Click the Trace button, Expand the selection, and Save the result as an Illustrator (AI) file.

Open the AI file in Photoshop.

To blend colors, Posterize the image (Image > Adjustments > Posterize…) and increase the Levels to the point where no further change can be detected (at 100% magnification) and then reduce the Levels until good blending is achieved while still preserving the yellow bands.

Sample the yellow bands with the Eyedropper tool with Sample Area set to 3 by 3 Average.

Open the Color Range dialogue box (Select > Color Range…) and increase or reduce the Fuzziness until only the target area is selected. You might have to change the Mask to be able to see what you are doing.

Click OK.

Increase the Saturation or Vibrance (Image > Adjustments > Vibrance).

Select the dark green leaf color with the Quick Selection tool (CS5) or the Magic Wand tool. Don’t include the lighter colored rib of the leaf.

Apply the Gaussian Blur filter (Filter > Blur > Gaussian Blur…) to reduce the color imperfections in the foreground portion of the leaf. This will also help to reduce the range of colors.

Save this as a Photoshop (PSD) file.

Back to Illustrator… Open the PSD file, Select the image and invoke the Live Trace Options, starting with the Photo High Fidelity preset again.

This time, use the default Colors setting of 64. If necessary, adjust up or down to capture the colors you want to preserve (yellow bands).

Alternating between Path Fitting and Minimum Area, find the “sweet spot” where the edges of the colors are the cleanest and with a minimum amount of distortion. Also, still try to preserve the yellow banding on the side of the frog. This should be easier if you increased the saturation/vibrance in Photoshop.

Click Trace, then Expand.

With the drawing still selected, Ungroup (Object > Ungroup) until you can select individual color patches.

Some color boundaries will remain rough so utilize the Blob Brush (introduced in CS5) to smooth the edges. (If you are using CS4 or lower, you might try revising the Anchor Points.)

First, make sure that the Fill color is topmost of the color squares at the bottom of the toolbar. If not, press the ‘x’ key to exchange them.

Then, with the Eyedropper tool, sample the fill color of the area that you want to correct.

Select the Blob Brush and ‘paint’ the margin of the color patch to cover the irregular edges. Use the bracket keys ( [ and ] ) to set the brush size on the fly.

Repeat color sampling and painting the edges of any areas that need correction, for example, the leaf rib.

Save the file in Illustrator (AI) format.

At this point, you could simplify the color range even further. Open the AI file in Photoshop.

Apply Posterization again (Image > Adjustments > Posterization). This time, I used a value of 16 levels.

Save the file as in Photoshop PSD format.

Once again, Open the PSD file in Illustrator.

Select the image and open the Tracing Options dialogue box.

Again, use the Photo High Fidelity preset and and start by determining the Max Colors. For this example, I used 36.

The Blur should be set to 0 and set Path Fitting to the highest setting (10).

Increase the Minimum Area by about 50 pixels at a time until the color patches begin to fall apart, then back down until you are satisfied with the result. You can always “touch up” with the Blob Brush.

Click Trace, then Expand.

With the drawing still selected, Ungroup (Object > Ungroup) until you can select individual color patches.

Compare the last iteration with the original photo, to check for missing details or areas that need enhancement. For this image, I noticed that the catchlights in the eyes and the nostrils were missing. Adding them back would make the frog appear much more “alive.”

For this, I set the Fill color to white and drew a couple of very small squares with the Rectangle tool.

I also drew in the nostrils using the Blob Brush.

Then, I made the red color of the rings around the eye more vivid by Selecting just the objects with that color and increasing the R value in the Color panel. Selecting the shades of green in the upper body I increased the G value.

Finally, in a similar manner, I increased the yellow in the bands along the frog’s side by increasing the G value.

The final result…

…compared to the original.

This is about 6 months late. Each year in about May or June I start to research color forecasts for the following year. I want to get an idea of the color trends for the year and use this as a springboard for designing for both web and print. For my source, I use projections for home and fashions which usually reference Pantone textile colors. I can’t afford yet another Pantone color fan so I have started to sample colors from the websites of various fashion design houses (Le Cuir, Lenzing, Prada) as well as the combined color forecasts from Pantone. I am not trying to get an exact match, just an RGB approximation.

To find out more than you wanted to know about fashion trends, including color, visit the Fashion Trendsetter website. Links to the various sources for color trends are all under one roof.

From these sources, I construct a simple color table, as shown below, and begin to build a swatch library in Illustrator.

By sampling colors from the website to get the RGB formula and converting to the closest CMYK equivalent yields color specifications that are usually sufficient for my needs. I start with RGB for the widest gamut and convert to the more restrictive CMYK. For a more exact match, these sources often provide the Pantone color code. You could use a conversion algorithm for the RGB and CMYK equivalents, such as Per Bang has provided on his very useful website.

Various color pairings and combinations can also found by exploring the Fashion Trendsetter website. More often however, I look at an expanded palette starting with the compliments of each color. Using the basic color table as a start, I’ll expand it by adding a layer that defines the compliments to visualize some potentially useful color pairings.

And similarly, add another layer for the inverted colors to yield more interesting ideas.

What is the difference between a color compliment and the inverse of the color? Adobe defines the color invert as the opposite value for each component in RGB colors. For instance, where R=100, the inverse would be where R = 155 (or, 255 – 100 = 155) and etc. for the values of G and B.

The compliment changes each component of a color to a new value based on the sum of the highest and lowest RGB values in the selected color, subtracted from the value of each component to create new RGB values. For example, for a color with an RGB value of 102 for red, 153 for green, and 51 for blue, Illustrator adds the high (153) and low (51) values, to end up with a new value (204). Each of the RGB values in the existing color is subtracted from the new value to create new complementary RGB values: 204 – 102 (the current red value) = 102 for the new red value, 204 – 153 (the current green value) = 51 for the new green value, and 204 – 51 (the current blue value) = 153 for the new blue value.

No, I didn’t sit there and do the math for each color. Illustrator does it from the Options menu of the Color panel (click in the upper right corner of the Color panel to open the Color panel Options). You can explore other combinations using a color from your color table as the base color by opening the Color Editor. A previous post is devoted to a basic explanation of how the Color Editor works.

The reward for wading through this post is free download of the 2011 color chart for Illustrator, including the swatch library and complimentary/inverted color layers.