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).
Need a quick sample to study? Download the source PNG (tutorial08.zip, 285KB, Adobe® Fireworks® CS3) for this tutorial.
very cool; glad to see you back
Thanks for the tutorial. I’m always pleased to see Fireworks tutorials - there’s just not enough of them. I particularly like learning a full production method, rather than just the basic stuff, which is so readily available.
BTW, in your final step you wrote “paste as mask”. Did you mean “paste inside”?
Steve: Yes, yes I did. Thanks for the eagle-eye. I’ve applied the corrections.
Have to agree with Steve, there is definitely a shortage of Fireworks tutorials, particularly ones for CS3.
Good work as always.
Very, very cool! I run into this problem quite often actually when getting raster logos from clients. This makes things loads easier!
Awesome tutorial!
I’ve been using this method for a while now too, but it’s great to see it documented and shared with the community.
that was an amazing feat who knew it could be so easy. i dont recall it being this easy in photoshop at all.
is there a similar way of doing this in illustrator cs3?
Aias: I’m not that familiar with Illustrator (or embarrassingly, Photoshop for that matter). I know that Photoshop has the equivalent filters/effects, blend modes, gradients, and masks, but i’m not sure if Illustrator has them. Do update us if you get to achieve the same effect in Illustrator.
no, not doable in illustrator.
which doesnt mean that it doesnt exist just that i couldnt find it.
and in photoshop i got as far as convert to alpha, but i could not find any such command or filter
as i said your method in fireworks is the easiest most flexible method i have come across. thanks again!
Brilliant as usual. Cheers
Nice effect, I will use something like the gradient example for my blog
I have looking for this tutorial.That’s what I need.Thnx…
Nice tutorial. Thanks!
Good work guys! Easy tutorial. I hope to see some more at your website in the future.
There is a great filter for Photoshop that will let you do this - Whitewash.
http://www.redprince.net/whitewash/
Also, once you apply this filter, you should run the command Layer > Matting > Remove White Matte. I have this setup as an action and it works very well!
hi there.i wanted u r help,if u could design a nice logo for me wit the letters PC.as i am opening a shop i wanted a logo to create a brand name.the design should be fora jewellery store so i wish u could help me out. thanx
great tutorial.thanks
Thank you, I was looking for such tips.
Great tip, nice screenshots too. Enjoy reading your tutorials.