Rapid Fire #8: Extracting Logos

Before and after

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 (Icon).

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.)

Logo image
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.

Desaturate the logo
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.

Apply a full contrast
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.

Convert to alpha
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.

Color fill
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.

Bitmap mask
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.

Gradient fill
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!

Gradient logo
Figure 8. Logo with gradient fill (and optional outer glow).

Need a quick sample to study? Download the source PNG (tutorial08.zip, 285KB, Adobe® Fireworks® CS3) for this tutorial.

38 Responses to “Rapid Fire #8: Extracting Logos”


Comments are currently closed.