Dec 11 2010

using photoshop and illustrator to achieve a posterized style

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.


Jul 3 2008

Eugene Grasset

Eugene Grasset, Thistle from Plants and Their Application to OrnamentThe next series of vector reproductions is from Eugene Grasset’s Plants and Their Application to Ornament A Nineteenth-Century Design Primer which was published in 1897. Somewhat earlier than Christopher Dresser, Grasset was more of a contemporary of William Morris, Eugene Grasset was more famous in his time as a designer of French-style posters and magazine cover designs.

Plants and Their Application to Ornament begins with a study of one of the garden plants from which stylized design variations are generated. His designs are generally Art Nouveau or Art and Crafts style and quite archetypical of the period. Some are representational of how these designs would be applied as decoration to different media (wallpaper, fabric, tiles, stained glass, carved wood, metal,porcelain) or as decorative patterns, borders, and motifs. They betray his background as a decorative materials designer before turning to illustration.

thistle_000

All of the original plates were reproduced by a pochoir (literally ‘stencil’) print process, which was a precursor of silk screen printing. The originals are very graphic and lend themselves to vector illustration. As such, they can be used in period reproduction or adapted for contemporary design elements.

Below is the first in an ambitious series. The collection will eventually grow to include design variations for 33 garden plants. View completed plates here.

spacer

grasset_054d


Jun 15 2008

Christopher Dresser redux

Though later than William Morris, Christopher Dresser pre-dated the Arts and Crafts movement (see comment, below) in England and was influential in the development of the industrial arts, his designs having been featured in the Crystal Palace Exhibition. His studies in the decorative arts were immensely popular in the period but are only recently coming back into favor with the resurgence of interest in the Arts and Crafts period.

His background in botany is evident in many of his design motifs and that especially appeals to me (as a recovering botanist). Today we would categorize the body of his work variously as Arts and Crafts (though possibly not, as per comment), Art Deco, Japonaise or Aesthetic. He was a product of the Victorian design era but much too “renaissance” to be confined to the period, or to the culture of western Europe/North America. He studied the design traditions of Asia and the Middle East, influencing some of his own design.

Christopher Dresser: Studies in DesignI have started a vector reproduction of Studies in Design with the intention of getting inside of Christopher Dresser’s head a bit. View completed plates here. These are “hand traced” in Adobe Illustrator and are faithful to the original design though repeating pattern designs have been more accurately registered to permit seamless repeat. There are 134 individual motifs. Dresser rendered most in color, and those colors have been used in the vector drawings, however there are several that Dresser only drew as outlines. I am anxious to try different color combinations.