YOUR FEEDBACK
Rapid Module Development for DotNetNuke
MICHEAL SMITH wrote: GO TO THE LINK, U HAVE EVERYTHING U WANT THERE. MICHEAL...


2007 West
GOLD SPONSORS:
Active Endpoints
Your SOA Needs BPEL for Orchestration
BEA
Virtualized SOA: Adaptive Infrastructure for Demanding Applications
Nexaweb
Overcoming Bandwidth Challenges with Nexaweb
TIBCO
What is Service Virtualization?
SILVER SPONSORS:
WSO2
Using Web Services Technologies and FOSS Solutions
Click For 2007 East
Event Webcasts

2008 East
PLATINUM SPONSORS:
Appcelerator
Think Fast: Accelerate AJAX Development with Appcelerator
GOLD SPONSORS:
DreamFace Interactive
The Ultimate Framework for Creating Personalized Web 2.0 Mashups
ICEsoft
AJAX and Social Computing for the Enterprise
Kaazing
Enterprise Comet: Real–Time, Real–Time, or Real–Time Web 2.0?
Nexaweb
Now Playing: Desktop Apps in the Browser!
Sun
jMaki as an AJAX Mashup Framework
POWER PANELS:
The Business Value
of RIAs
What Lies Beyond AJAX?
KEYNOTES:
Douglas Crockford
Can We Fix the Web?
Anthony Franco
2008: The Year of the RIA
Click For 2007 Event Webcasts
SYS-CON.TV
MXDJ TOP LINKS YOU MUST CLICK ON !


Poster Art
"Posterization" made easy

Digg This!

They just don't make posters as they used to. There was a time when posters were designed to use as few colors as possible to keep costs down. Screen printing techniques allowed for an economical print run, and artists learned to see and draw people and places in terms of basic shapes and masses of color. All that simplification became known as "posterization."

Today you can get your favorite photo printed in full color within a few days, and you don't have to worry about stylizing your artwork to keep costs down. But there are times when you want to try something different, and we'll explore how easy it is to create a posterized look in FreeHand. Always on the lookout for a means to crash either our computer or the printer, we'll go on to add special effects and add life to the poster.

I'm using a photo I took of a 1916 steam locomotive in Cumberland, Maryland a couple years ago. If you've never seen one of these old trains up close, you have missed quite an experience. They're big, loud, and totally awesome. I converted my photo to grayscale in Adobe Photoshop, and imported the TIFF document into FreeHand. You can download the image from www.brainstormer.org/loco.jpg, or use any black and white image you have handy. The more contrast you have, the more powerful the image will be.

Once in FreeHand, select the image and search the Object Panel for the Image Adjust icon. The pointer is on Image Adjust in Figure 1. Image Adjust allows you to change the lightness (brightness) and contrast in a black and white (grayscale) image. The changes you make only apply to the image as it is used in this particular FreeHand document; the original image will remain unaltered. If you reselect the image and open Image Adjust at a later time, the adjustments you've made will show in the window so you can make minor adjustments or return the image to normal.

When the panel opens, click the contrast arrows to increase the image's contrast, or you can click one of the presets at the top of the window. You can also select individual bars and move them up or down. Each bar represents 16 steps in the 256 levels of gray an image can have. Obviously you have much more control in Photoshop's Levels or Curves controls, but when you are manipulating an image such as we are in this instance, Image Adjust works very well. Figure 2 shows the adjustment I made in the locomotive's contrast. The reason I'm compressing the image is to attempt to make it more powerful and dramatic by burying some of the details.

Since the image is grayscale, we have one other change we can make to it - its color. Since I plan to print this image, I'm using CMYK colors. If the image were intended for the Web, I'd use RGB colors instead. In the Mixer panel, I created a dark blue (100C, 100M, 0Y, 26K) and added it to the swatches panel by clicking the Add to Swatches panel. I left the color's name at its CMYK breakdown. Then I selected the image and double-clicked the new color in the Swatches panel as shown in Figure 3.

I want the train to be coming out of the darkness of night, so there are more alterations to make. I started by tracing the image in a four-color breakdown to emphasize the posterization. Double-clicking the Trace tool brings up the Trace Tool dialog box; you can see the settings I used in Figure 4.

To keep everything in its proper position, I immediately group the tracing. For the record, I save after just about every step or two because you never know when something bad is going to happen to your computer.

Now the fun starts. Start by going to the Xtras menu and dragging down to Colors>Name All Colors. That places all four colors in the traced posterization into the Swatches panel. Here is where your color modes come into play. If you've chosen an RGB color to begin with, you will get a set of RGB colors in the Swatches panel. If you create your color from CMYK values, then the Name All Colors will provide CMYK breakdowns for the colors. But if you've chosen to use a PANTONE color or any other spot ink color, the breakdown will be to CMYK, not percentages of the spot color. At that point, you'd have a five-color job instead of a one-color job. If you want to have tints of spot colors, proceed as above, but then drag a swatch of the solid color onto the Tints panel. At that point you simply move the slider until you match the various RGB colors that are in the Swatches panel. When you get a match, drag the color from the color well onto the Swatches panel - it will be named something like "43% PANTONE 488," and all the tints of the spot color will separate onto a single negative for the specific spot color.

Now, go to Edit>Find & Replace>Graphics, choose Colors as the attribute, and select the darkest blue from the dropdown menu on the From side of the box. Select Black in the To menu, and click the Change button (see Figure 5). Change the next lighter blue to the darkest blue, and the lightest blue to the next darker blue. This greatly intensifies the image, but the white areas are too stark. To get the most bang for our buck, we'll use the opposite color of the medium blue. To achieve this, drag a swatch of the medium blue to the Mixer panel, and click on the HLS color mode button. The color wheel will appear with a black circle indicating where your color is in the world of HLS. Click your cursor exactly opposite that black circle - use an imaginary line going through the center of the color wheel, and click the same distance from the center. This will give you the complimentary color. Add it to your Swatches panel by clicking the Add to Swatches button or dragging a swatch to the Swatches panel.

The white areas we want to change are the background of the page. We don't want the entire page to be a different color, and trying to find each and every white area would be time consuming. So, go back to the Find & Replace window and click the Select tab. Choose Color, and select the color that surrounds most of the image. In this case, it happens to be the lighter of the blues. If you have a tough time distinguishing the different colors, just use the Eyedropper tool and drag a swatch onto the Find & Replace window. Click the Find button, then choose Modify>Combine>Union to solidify the area and absorb the white areas. Apply the complimentary color you just created, and send the object to the back. In our case, the window reflections and highlights on the train and its headlight turn yellow/gold as seen in Figure 6.

Night skies are usually dark, so now we'll create a dark gradient from black to the darkest blue. Use the Rectangle tool to drag a box that fills the sky area, and choose Add Fill in the Object panel if your rectangle doesn't have a fill. Send the rectangle to the back. Change the fill type to Gradient and put black on one end of the ramp and the dark blue on the other end. Depending on how you want to light your sky, you can place the blue end close to the ground, indicating dawn, or you can make it look like a bright moon by placing the blue color at the top - that's the route I took in Figure 7.

Okay, the mood is set, but the engine is just sitting there. To crank up the action a bit, we'll add some smoke and steam. Start by choosing the Calligraphic Pen tool (hiding under the Pencil tool) and double-clicking it. In the dialog box, fine-tune your tool by setting the minimum and maximum widths to something obscene - I used 1p0 for minimum, and 12p0. I'm fortunate enough to have one of the new Wacom Intuos 3 tablets, so drawing puffy smoke is a pretty easy task with the pressure-sensitive pen. If you don't use a graphic tablet, then you can change the width of the stroke by pressing the left and right Keyboard Arrows as you draw. The results are the same, only with the pen you can drink coffee at the same time. At any rate, draw clouds of smoke and steam as shown in Figure 8. Give them a stroke of none and a fill of the lightest blue in your Swatches panel.

I find it convenient to group objects like this to keep things simple in case I want to modify them later. If you do choose to group them, then you have to Subselect them (Edit>Select>Subselect) to make the whispy modifications you need. Click on the Add Effects button and choose Feather as shown in Figure 9. Adjust the radius and softness to your taste, and don't worry too much about hard edges at this point.

Now you can deal with the hard edges by going back to Add Effects and choosing Blur>Gaussian Blur as shown in Figure 10. It's difficult to see your true results because the paths are selected. If you deselect them to check out your progress, then you have to go back and select all those loose objects again. That's one of the main reasons to group them. One click and you're set!

To add more volume to the wisps, lower the settings in the Calligraphic Pen tool window and draw more wisps inside the first ones. Since these shapes will add more depth and detail to the smoke clouds, choose Add Effects once more and apply Roughen. Now go through the process of adding feathering and blurring as you did earlier.

The headlight needs some pop, so draw a cone shape centering on the lamp, as shown on the left side of Figure 11. Then clone that shape and shift points inward as shown on the right side of Figure 12. Since we will be modifying the results with raster effects, be sure to extend the headlight glow outside the borders of the drawing.

Blend the two shapes, and while the blend is selected, choose Add Effects and add a Gaussian blur. Add another effect, this time Basic Transparency with an opacity that looks realistic - 80% worked on the example in Figure 13.

This pretty much sums up the drawing itself. To add a semi-fancy border, start with a pair of rectangles (see Figure 14), and use the Subselect tool to create rounded corners. I made some concave corners at the bottom to suggest a train tunnel (I like subliminal messages). The corners were modified by deselecting the Uniform box in the Object panel. Once the two main shapes were designed, they were cloned and the entire drawing cut and pasted inside. To make the drawing faster to work with, the compound path containing the drawing was placed on a layer and the layer hidden.

Then select all the paths and use the Expand Path Xtra with a width of about 6 points. The larger two paths must be joined, filled and stroked. Use a clone of the border shape and use the Inset Path Xtra with an inset of 2 points and rounded end caps. Select points in appropriate places and choose Modify>Split. Discard the unwanted paths, but give the remaining strokes a heavy weight with a highlight (or shadow) color as shown in the detail in Figure 15.

Make the drawing layer visible again, and set the text for the poster's title. Astrid Short was used for "Cumberland" in this example. Change the text color to match the gold color from the highlights in the poster, create a clone, and hide it (View>Hide Selection). Use the Extrude tool to extrude the visible text, aligning the left edge vertically, and matching the perspective of the building's roof. Set the lighting for the first light to center, and the second light source to Bottom Right.

Choose View>Show All to bring back the text clone. Choose Modify>Join, and change the fill type to Gradient. You can change the angle of the gradient by typing 270 degrees in the Object panel, and readjusting the location of the gradient fill control handle, or you can just move the control handle and spin it to the location you want. Change the fill colors in the gradient to a range of gold to white, with white at the bottom to indicate that it's being lit from below. The finished effect is shown in Figure 16, along with more text set in Sycamore Sans. This line of text was simply cloned, sent behind the original, and shifted to leave a dark solid drop shadow beneath white letters.

Add a line of text at the bottom of the poster. At this point, you would probably think everything is done, but you could be half-right or totally wrong. If you want to use the drawing on the Web, then you're half-right. To be 100% right, choose File>Export, and select JPG, or PNG from the list of file types. You can import the resulting file into Fireworks for any type of slicing or special effects you want to use.

On the other hand, if you're going to print the drawing, you MUST change the Document Settings>Raster Effects Settings to 300ppi. Also, check the Optimal CMYK printing box. If you don't, you'll see hard edges around the smoke and headlight beam.

Just a reminder: this drawing was posterized, but CMYK colors were used to allow for the various raster effects that were going to be used. Be alert for problems if you attempt a project like this with spot colors by printing separations of small areas of your drawing before you go full-steam ahead with an illustration.

About Ron Rockwell
Illustrator, designer, author, and Team Macromedia member Ron Rockwell lives and works with his wife, Yvonne, in the Pocono Mountains of Pennsylvania. Ron is MXDJ's FreeHand editor and the author of FreeHand 10 f/x & Design, and he co-authored Studio MX Bible and the Digital Photography Bible. Ron has just introduced a "Casual FreeHand" course available at www.brainstormer.org. He has Web sites at www.nidus-corp.com and www.brainstormer.org.

LATEST FLEX STORIES & POSTS
Two great PDF creators
I like reading stuff in pdf format. But it's even better if you can easily create pdf files. By easily I mean a button click. Literally.Since I have Adobe Acrobat, my Microsoft Word and PowerPoint just have an extra menu to create it. But it's kinda boring. Let me share with you a cou
3rd International Virtualization Conference & Expo: Themes & Topics
From Application Virtualization to Xen, a round-up of the virtualization themes & topics being discussed in NYC June 23-24, 2008 by the world-class speaker faculty at the 3rd International Virtualization Conference & Expo being held by SYS-CON Events in The Roosevelt Hotel, in midtown
A Runtime Integration Approach to Application Development
This pattern is a hybrid of plug-in and event-driven architecture to integrate individual plug-ins together to come up with the Plug-in Integrator Pattern. This pattern leverages the benefits of both these well-known architectures to provide an optimal solution to build an enterprise-r
JavaOne 2008: Sun Talks Up its Late-to-the-Party AIR-Silverlight Rival
At Java One this week Sun has been selling its year -old-but-still-upcoming - and definitely late-to-the-party - Adobe AIR- and Microsoft Silverlight-competitive JavaFX Rich Client environment as a potential revenue-generator capable of putting ads on mobile applications and JavaFX Scri
Facelift Your SOA with Rich Internet Applications
We are entering an era of Rich Internet Applications (RIA) and enhancing the user experience of consumers of the services becomes an important part in designing and implementing SOA. But if you decide to develop rich clients, you'll be facing the dilemma - which way to go - remain with
Adobe Flash Player 10 Public Beta Now on Adobe Labs
Today, Adobe announced the immediate availability of Adobe Flash Player 10 beta as a free download from Adobe Labs. Adobe Flash Player 10 beta, code named 'Astro', builds on the capabilities of the world's most ubiquitous application runtime with new support for custom filters and effe
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS
SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021

SYS-CON FEATURED WHITEPAPERS

ADS BY GOOGLE