Extracting Logos
After a short hiatus, I’m back with a tutorial that shows you how to extract a logo and/or logotype from a raster image, using only Adobe® Fireworks®‘ Live Filters. With this method, you also have the option to re-color the lifted logo in anyway you want: solid, gradient, or textured. All of this, while avoiding the temptations of the quick-and-dirty Wand Tool 
.
Note: This method works best with images of dark, one-color logos (or any other solid shape, for that matter) set against a white or light-colored background.
Prepare by loading the image of the logo onto a new canvas, or into the canvas of an existing project. For this tutorial, we use an image of a fictional wordmark (which I might just go ahead and use to brand my blog), imported onto a canvas with an initial background layer of a nice meadow, courtesy of trelin over at stock.xchng. (See Figure 1.)
Figure 1. Logo image loaded onto target background.
Tip: If you’re working with an image of a light-colored logo set against a dark background, simply apply an Invert filter before proceeding with the rest of the steps.
Step One: Desaturate
With the logo image selected, apply a Hue/Saturation… filter with the Saturation slider set all the way to the right (Saturation: -100). (See Figure 2.) This will reduce your logo’s colors down to shades of gray.
Figure 2. Image colors desaturated.
Step Two: Full Contrast
Next, apply a Brightness/Contrast… filter to the logo image, bumping up the Brightness and Contrast sliders such that the background becomes absolutely white (#FFFFFF), and the logo itself becomes absolutely black (#000000). (See Figure 3.) Keep an eye out for the edges of the logo becoming jagged, and tweak the values as necessary to keep those edges smooth.
Figure 3. Image colors reduced to black and white.
Step Three: Convert To Alpha
Next, apply a Convert to Alpha filter to the logo image. (See Figure 4.) This will effectively remove the white background and leave you with a clean, solid logoform. The neatness of the edges and the holes of the logo puts the Wand Tool to shame.
Figure 4. Background removed.
Step Four: Re-color
Finally, apply a Color Fill filter to the logo image. (See Figure 5.) This will allow you to revert the color of your logo back to the original, or give it a different color.
Figure 5. Logo re-colored.
Tip: Save the set of filters as a style (Properties Panel → Filters: → (+ button) → Options → Save as Style), so you can re-use it on other projects and save time.
Bonus: Applying Gradients And/Or Textures
If you want to give your logo a little more kick, you can fill it with a gradient or texture, instead. To do this, go back to Step Four and pick white (#FFFFFF) as the color fill of your logo. (See Figure 6.) Once you’ve changed the fill color, flatten the logo image (Ctrl+Shift+Alt+Z). This will create a bitmap mask in the shape of the logo.
Figure 6. Logo converted to bitmap mask.
Then, draw a rectangle on top of and covering the logo. For demonstration purposes, let’s give it a gradient fill going from top to bottom (#C88F1A:100 → #46220B:100)*. (See Figure 7.) This will be the fill that goes into our logo.
Figure 7. Rectangle with gradient fill.
Finally, Cut the rectangle (Ctrl+X), select the logo image, and perform a Paste Inside command (Ctrl+Shift+V). (See Figure 8.) Now your gradient is applied to the logo! Just give it an additional filter or two for added effect, and you’re done!
Figure 8. Logo with gradient fill (and optional outer glow).
