Extracting Logos Using Levels In Adobe Fireworks

Advertisement

In all the years that I’ve been using Adobe Fireworks, I have always had to perform one task in every project: remove the background from a logo. Most of the time, it’s because the client doesn’t have the original raw file that their previous designer used to create their company’s logo, or because I need to work with a bunch of affiliate logos that I downloaded from the Web and not all of them have transparency information.

With a rectangular or elliptical logo, I just trace over it with a shape and turn it into a mask. But when tracing a mask is impractical (as with complex shapes or text-based logos), I used to follow a method that I devised for extracting logos1 in Adobe Fireworks that doesn’t rely on the dreaded Magic Wand tool. This method took advantage of a few Live Effects to remove the background and retain the logo form. It was simple, but also primitive: it worked perfectly only when the contrast between the logo and background was already ideal and the logo form had only one color. Otherwise, I ended up with jagged edges.

I have since much improved the process of handling multi-colored logos and non-white backgrounds; it works best on solid-colored text and shapes with clear outlines. Because it involves Fireworks’ awesome features and tools, this method is a quick and easy solution that you can incorporate in your Web and interface design workflows.

And yes, still no Magic Wand tool.

Let’s Begin!

To start off, fire up Adobe Fireworks and load your logo image on the canvas. In the example below, I created a three-color logo text, surrounded by a blu-ish hue, on a canvas with a transparent background.

Create a back-up of the image by selecting it using the Pointer tool (V on the keyboard), cloning it (Shift + D, or in the menu Edit → Clone) and hiding it (L, or View → Hide Selection). You will need this back-up near the end of the process, but for now, keep it hidden.

Logo image on canvas
Place the logo image on the Fireworks canvas.

Tip: You can also use Duplicate (Ctrl/Cmd + Alt/Opt + D, or Edit → Duplicate) instead of Clone to copy the image. The difference is that Duplicate offsets the position of the copied object by 10 pixels down and 10 pixels to the right, whereas Clone creates the copy in the same exact position as the original object.

Original image and hidden backup in the Layers panel
The original image and hidden back-up in the Layers panel.

Step 1: Breakdown

To be able to deal with the different colors of the logo separately, we first need to break the logo down into “pieces,” one foreground color per piece. Use the Pointer tool to select the logo image, and use one or more bitmap selection tools (Marquee or Oval Marquee (M), Lasso or Polygon Lasso (L) — set the Edge to “Hard” in the Properties panel) to select a piece of the logo. Make sure the piece you select has only one color (not counting the image’s background). Cut and paste the selected piece (Ctrl/Cmd + X, and then Ctrl/Cmd + V) to separate it from the rest. Do this for each piece; cancel the Marquee selection (Ctrl/Cmd + D or Esc, or in the menu Select → Deselect) and switch back to the Pointer tool (V) if you need to select the logo image again.

Tip: Double-click on an image object to quickly switch from Pointer tool to Marquee tool.


Select a piece of the logo.

In our example, I’ve used a (rectangular) Marquee, but you can use the Oval Marquee for circular or elliptical selections, and the Lasso or Polygon Lasso for irregular shapes.

Cut up the logo into pieces
Cut up the logo into pieces.

If your logo has only one color, skip this step and treat the whole image as your only piece.

Step 2: Desaturate

Select all of the pieces of the logo image using the Pointer tool, and apply a Hue/Saturation filter (in the Properties panel, go to Filters: [+] → Adjust Color → Hue/Saturation…). Drag the Saturation slider all the way to the left (-100) to reduce the logo to grayscale. Make sure that Lightness is set to 0 and that Colorize is unchecked before clicking “OK.”

Desaturate all pieces
Desaturate all pieces.

A Note on Filters

Adobe Fireworks features two almost identical sets of filters: one in the application menu and another in the Properties panel (the Live Filters2).

Filters menu vs. Live Filters
Filters menu vs. Live Filters in the Properties panel

Filters applied using the application menu are “destructive,” in that they can’t be undone by any other means except Undo (Ctrl/Cmd + Z, or in the menu Edit → Undo). Furthermore, target vector objects (shapes and text) need to be converted into bitmap objects before they can work their magic, which makes editing the original object harder. To adjust the effect of the filter that you just applied, you will need to undo that step and reapply the filter.

To maintain the ability to easily edit an object and its filters’ properties, always use the Live Filters in the Properties panel. This way, you can make changes to the original object, and the filters will adjust automatically. You will also be able to change a filter’s settings at any time, or disable or remove the filter, without adversely affecting the other filters.

Step 3: Levels

What makes this newer method different is the use of the Levels filter (as opposed to the Brightness/Contrast filter of the older method) to push the dark grays into pure black and the light grays into white, while maintaining the smooth edges of the logo’s curves.

Select one piece of the logo image using the Pointer tool, and apply a Levels filter (in the Properties panel, go to Filters: [+] → Adjust Color → Levels…). In the Levels dialog, set the Channel drop-down to “RGB” (which is the default). Below the histogram under Input Levels, move the left and right arrow sliders to change the intensity of the dark and light areas of the image piece, respectively. Make sure that the Preview checkbox is checked, so that you can see your changes in real time. Move the left arrow slider just enough to the left to get the logo part to show up completely black, but not so far left that the edges of the logo become jagged. The same goes for the right arrow slider: move it right to get a pure white background. You can leave the center slider untouched. Click “OK” to apply the filter.

Levels filter applied to first piece
Apply the Levels filter to each piece.

You can check the accuracy of your filter values by bringing up the Info panel (Shift + Alt/Opt + F12, or in the menu Window → Info) and hovering over the black area to obtain its RGB color value. The RGB values should all be set to 00; otherwise, go back to the Levels dialog and readjust the slider.


Use the Info panel’s RGBA reading to check the color values.

Do the same for the white area, this time setting all three RGB values to FF in the color reading.

You can further fine-tune the levels by changing the number values in the left and right text boxes in the Input Levels dialog, which correspond to the left and right sliders in the visual graph. Increase the value of the left text box to darken the dark-gray areas until all three RGB values are set to 00 in the Info panel; decrease the values if the edges of the logo become too jagged. The inverse is true for the right text box. This allows you to get pure black and white colors, while keeping the edges of the logo as smooth as possible.

Repeat the whole process in step 3 for all other image pieces.

Pieces with different Levels settings
Pieces with different settings in the Levels filter. Notice the same rightmost value across all instances, corresponding to the same background color.

Bonus side effect: If your original logo image has compression artifacts3, this step could greatly reduce them.

Step 4: Alpha Transparency

Once all of your image’s pieces have been “leveled” into black and white, use the Pointer tool to select an image piece and apply a “Convert to Alpha” filter (in the Properties panel, go to Filters: [+] → Other → Convert to Alpha). Doing this step separately per piece is important because each piece has a different setting in the Levels filter. If you were to apply a new filter to all pieces at once, Fireworks would equalize the settings for all of the other filters present.

Convert to Alpha filter
Apply a “Convert to Alpha” filter to each piece.

In this step, you will again be able to check for the accuracy of your settings for the Levels filter; if the black area of an image piece is not completely black, it will show up as slightly transparent once the Alpha filter is applied. (This is where the checkerboard background of the canvas comes in handy.) Also, if the background is not completely white, you’ll see it faintly after converting the image piece to alpha.


Applying the “Convert to Alpha” filter to all pieces.

Step 5: Recolor

At this point, you have successfully extracted the logo form from its background. The next step is to bring back the original colors. To do this, open the Layers panel (F2, or in the menu Window → Layers), and look for the object that you hid at the beginning of this tutorial. Click on the visibility box at the left end of that object to make it visible again. Nudge it down so that it’s below the processed logo pieces and in clear view. Use the Pointer tool to select an image piece and apply a Color Fill filter (in the Properties panel, go to Filters: [+] → Adjust Color → Color Fill). In the Color Fill settings, click on the color swatch, and sample the corresponding color from the original logo image. Do the same for all other image pieces.

Color Fill filter applied to first piece
Apply a Color Fill filter to the first piece, picking the color from the original logo image.


To sample a color for the Color Fill filter: 1. Click on the color swatch in the filter dialog, 2. Click on the part of the image whose color you want to sample, 3. The color swatch will update with the new color.

Step 6: Convert To Symbol

Once you have recolored all of the pieces, select the original logo image with the Pointer tool and hide it (Ctrl/Cmd + L, or in the menu View → Hide Selection). You can also click on the eye icon of that object in the Layers panel to hide it. Select all of the image pieces using the Pointer tool, and convert them into a symbol (F8, or Modify → Symbol → Convert to Symbol…) before using it in your layout, so that new filter changes affect the new logo as a whole.

4
The Convert to Symbol dialog.

If you wish to make changes to the objects inside the symbol, you can do one of the following:

  • With the instance of the symbol selected, go to Modify → Symbol → Edit Symbol;
  • Right-click on the instance of the symbol, and select Symbol → Edit Symbol;
  • Double-click on the instance of the symbol.


All logo pieces recolored and converted into a Symbol.

Taking It Further

You now have a version of the logo that you can set against any type of background: solid, gradient, textured or tiled. You can even use it as a bitmap mask5 over a photo, pattern or gradient if you want a different look. To do this, you’ll need to flatten the logo symbol first (Ctrl/Cmd + Alt/Opt + Shift + Z, or in the menu Modify → Flatten Selection), but you can always bring back your final logo by dragging an instance of the symbol from the Document Library panel (F11, or Window → Document Library) onto the canvas.

Extracting Logos Using Levels in Adobe Fireworks: the final result
The final result.

If you are feeling adventurous, you could try turning it into a vector object using the Magic Wand tool first (W) and then running the “Convert Marquee to Path” command (Select → Convert Marquee to Path). Your mileage may vary, though: “Convert Marquee to Path” doesn’t always play well with complex shapes, but you can always tweak the vector paths that are created by that command until they match the logo.

(al) (mb) (vf)

Downloads

Need a sample to study? Download the sample archive6 for this tutorial (ZIP file, 57.6 KB), containing the Fireworks PNG (created in Adobe Fw CS5).

Further Reading

Smashing Is Looking For Experts On Fireworks, Photoshop & Illustrator

As our crafts mature, so do our tools. Fireworks, Photoshop and Illustrator are powerful tools that we, as designers, use on a regular basis. Fireworks is surely more flexible for Web at times (and UI/screen design in general), since it is dedicated specifically to the Web designer’s needs. And yet, it is underrated by many. We should all indeed be more open to try out new and different tools and share the techniques and our experiences with the community.

We look forward to hearing from you!12

We’d love to cover more articles on Fireworks, Photoshop and Illustrator explaining useful techniques, tips and “lessons learned” from professional designers. So, if you:

  • Have a solid knowledge of at least one of these tools,
  • Have a solid experience in design (especially Web/screen/mobile),
  • Have a couple of articles published on any of the tools mentioned,
  • Or perhaps have even released some extensions or tools for Fireworks, Photoshop or Illustrator…

Then please drop us an email at ideas@smashingmagazine.com. Please include details about your experience, examples of your work, links to your articles and your article ideas (at least two). Of course, all authors get paid :-)

We look forward to hearing from you!

— Smashing Editorial Team

Further Reading

Footnotes

  1. 1 http://www.brownbatterystudios.com/sixthings/2007/09/20/rapid-fire-8-extracting-logos/
  2. 2 http://help.adobe.com/en_US/fireworks/cs/using/WSBFD1EA57-0750-4ca6-BEB4-4D66917CD996.html
  3. 3 http://en.wikipedia.org/wiki/Compression_artifact
  4. 4 http://fireworks.smashingmagazine.com/wp-content/uploads/2011/11/elul-05n.png
  5. 5 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7f7f.html
  6. 6 http://provide.smashingmagazine.com/extracting-logos-using-levels.zip
  7. 7 http://www.brownbatterystudios.com/sixthings/2007/09/20/rapid-fire-8-extracting-logos/
  8. 8 http://help.adobe.com/en_US/fireworks/cs/using/WSBFD1EA57-0750-4ca6-BEB4-4D66917CD996.html
  9. 9 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd4.html
  10. 10 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00cbdc-7ffb.html
  11. 11 https://www.adobe.com/devnet/fireworks/articles/masking_preso.html
  12. 12 http://www.smashingmagazine.com/contact/
  13. 13 http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/
  14. 14 http://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/
  15. 15 http://www.smashingmagazine.com/2010/09/17/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/

↑ Back to topShare on Twitter

Jose is a graphic designer and photographer from Baguio City, Philippines. He is an advocate of using Adobe Fireworks for designing application interfaces for Web, desktop, and mobile platforms. He has written several other tutorials for Adobe Fireworks on his blog. Follow him on Twitter to see what he's been up to lately.

Advertising
  1. 1

    What about just using the Background eraser of PS? One click job.

    0
    • 2

      This is (obviously) a tutorial about Fireworks, not Photoshop, so I guess, that’s why… ;)

      0
      • 3

        Then this tutorial is similar to explaining a carpenter, who wants to saw a piece of wood in half, to use a cutlery knife instead of a saw.

        0
        • 4

          sadly but true, i agree w/ jquest. – sorry for being some kind of cruel, but there’s neither rhyme nor reason for using fw for getting this job done…

          well, in terms of the content of articles about fw, a tutorial on the advanced export functionalities would be nice to read… or how it is integrated in the daily designing/developing workflow.

          0
          • 5

            I do agree with you Jan J. that there would be no reason to use Fireworks for something like this. However, that applies only if you have the choice to use Photoshop. In the rare case where someone doesn’t have Photoshop, but does have Fireworks, this would really come in handy. In my early design days, I had weird instances where I didn’t have certain tools that all the other designers had. That one, seemingly useless tutorial for a piece of software I had to use(but hardly a soul used) always saved the day.

            It’s always fun to learn some other way to do something anyway though. We sometimes get ourselves into a rut by doing the same thing over and over again.

            0
          • 6

            i hadn’t in mind not having access to ps….
            well, in this case, fw is the right choice. true, DB.

            i also agree:
            getting to know different techniques to solve one certain problem truly IS important, revealing and makes our work simply more efficient…

            0
        • 7

          I’m in total agreement here – using Fireworks for this is a bit odd, and the instances where someone would have Fireworks and not Photoshop would be so rare as to negate the point of writing this piece. Not that I’m against figuring out how to do things in alternative ways, but I’m a much bigger fan of efficiency, and this technique is anything but efficient. Sorry :(

          0
  2. 8

    Really nice article, pretty detailed.

    Fireworks fans want more Fw articles on Smashing Magazine!

    0
  3. 9

    Nice detailed article, maybe I should start using Fireworks sometimes. Still haven’t even opened it (on purpose). Another program to deal with logos that aren’t in your favorite .eps or .ai format but sadly in any static format is Vector Magic. It can detect edges and remove the background with a single click. And if the logo isn’t too complicated (with gradients and such) there will also be a nice vector rolling out in .ai or .eps ready to adjust if needed.

    0
  4. 10

    Love Fireworks articles/tutorials :D.

    Thanks Smashing Magazine.

    0
  5. 11

    Thanks very much for the detailed tutorial. Always good to learn how best to avoid the Magic Wand ;)

    0
    • 12

      Never, ever use the magic wand. Use the ‘Color Range’ feature instead. It will always make better selections.

      0
  6. 13

    Woop woop… nice to see a Fireworks article :) If I ever get a logo without transparency I like to recreate it and turn it into a vector as its always handy to have and doesn’t take much time if it’s a simple design. If the font can be easily identified it makes the job even easier… http://new.myfonts.com/WhatTheFont has come in handy for that on many an occasion.

    0
  7. 14

    I have been doing this in Photoshop since the early 90′s. It is a good technique. You just have to be careful to not push the levels (or curves) too hard or you will lose the blurriness on the edge. This can make each section of a logo appear more jagged than others, and of course, on a logo that would be bad. When doing color correction (which is what this is) it is always better to make a few small moves than one large move to get your image in line.

    0
  8. 15

    Thanks for the tutorial!

    Will be good if we have more Fireworks related articles. More and more people are making “The Switch!”

    Happy Saturday!

    Perko

    0
  9. 16

    Nice tutorial. Thank you.

    0
  10. 17

    Great tutorial from my co-Filipino designer!

    0
  11. 18

    Nice tutorial. There should be more Fireworks tutorials on Smashing Magazine!

    0
  12. 19

    Fireworks ftw! Sure, Photoshop is faster and ‘better’ for a lot of things but equally, so is Fireworks. It’s nice not having to switch between programs mid-workflow and this is a handy little tip — much faster in practice than it seems. Congrats!

    0
  13. 20

    Always great to see a Fireworks-focused article. Keep ‘em coming!

    0
  14. 21

    Nice : ( used this technique before in flash )

    However , would have enjoyed it more if you had explored this technique to breaking point.
    Also the comparison of the magic wand technique and others.

    Another technique ( well part of )
    I like using multiple layers and movieclip/properties/display/blending to help dismantle stuff in flash.

    Thanks for your time creating the article.

    0
  15. 22

    Not to diss the writer of this article – but this whole technique seems a little pointless and time-consuming to me. For me Illustrator is the only program to use regarding logos. I would have imported the clients logo in there and trace it with vectors. That way you/your client finaly has a ‘workable’ logo that can be used for all formats and sizes for all future projects, and all programs to use – while the technique described leaves you with a screen-logo only – in one size only (you need to do it again if the logo re-appears in different size elsewhere on the screen) …an .eps file of the logo makes so much more sense imho. Think long-term appliance, not short-term problem solving only.

    It’s a good tutorial though – but perhaps better applied to regular graphics and not logos?

    Keep up the good work and thanks for providing this information.

    0
    • 23

      I have used this (and similar) techniques in Fireworks, and I’d like to chime in into the discussion a bit.

      First, the technique is not pointless. By performing these steps, you can learn important tools and a whole new workflow in Fireworks, and everything you’ll learn may be of use to you later, when you deal with bitmaps (and vectors) in Fireworks.

      Second, as the author mentioned at the end of the tutorial, you are not limited to bitmaps only: the logo that you have successfully “extracted” from the background can be next converted to a vector object (Fireworks supports both the commands Convert Marquee to Path and Convert Path to Marquee!), then freely re-scaled, copied as a vector outline to Illustrator (or Photoshop), etc.

      So there are a lot of possibilities, and where Fireworks truly shines in this case is that it can equally well work with both bitmaps and vectors — you don’t have to switch to Photoshop to work with bitmaps, then over to Illustrator, to work with vectors. You start right in Fireworks, extract the logo from the background (as a bitmap object), then you can convert it to a vector object, fine-tune the outlines, then export it at any size, change its color, or move the vectors to Illustrator. Only, the author did not want to go into more detail, probably, since the tutorial had a very specific main topic, and the vector editing part of such a tutorial can be covered in detail separately.

      Just my $0.02 :)

      0
      • 24

        Good points – and don’t get me wrong: I do see use for this tutorial of course. I guess a lot depends on what somebody is ‘used to’. I am a front-end designer with a print-design background, so obviously I would lean towards .eps more. Also, I like the ‘hands on’ feeling, and still believe actually creating/tracing the logo in Illustrator gives better result than ‘converting pixels to vectors’ a process which has to be finetuned constantly. But, it’s never wrong to embrace new/different techniques or programs like you’ve already stated. We learn every day!

        0
        • 25

          Yes, these are just different techniques. And remember that you can do your design A-Z right in Fireworks (since you can work with both bitmaps and vectors); or you could switch between different tools (Fw Ai, or Fw Ps, or Ps Ai), this is a matter of preference… :)

          0
    • 26

      You could equally trace the artwork in Fireworks to convert it to vectors. It’s not really that much work, and is far superior.

      0
      • 27

        I agree that tracing the artwork (in Fireworks or in Illustrator, or any vector-capable editor) produces the best results, particularly if you need to enlarge the artwork later on. But in instances where the artwork requires more than a few vectors, and i’ll only need to downsize the artwork anyway, this in-a-pinch method is a timesaver!

        0
    • 28

      You can always convert the paths to vectors with one click. There are a lot of techniques to do this in Fireworks. As you might know, you can also save your Fireworks work in .ai file format.

      So, if you are working on a website design for a client, there’s no point in switching programs just to make this simple job :)

      0
  16. 29

    Very useful, and I’d love to see more Fireworks stuff here – 5 posts in nearly 4 years is just not good enough! It’s a fast, flexible & much underrated tool for web design.

    0
  17. 30

    one question: if the “master” that I start work with (say, supplied by the client’s moronic PR Dept.; or downloaded off-the-net in desperation) is available only in low-res + a really small size, will I get sharp enough edges to start off with?

    0
    • 31

      I mention in my article that applying Levels tends to remove some of the compression artifacts from the image, which could help sharpen it up. Though, you can only go so far in any direction with a low-quality image.

      If you still don’t get a reasonably sharp logo after going over the steps in the article, try to apply a Sharpen filter to the original image, before any other filters.

      Otherwise, if you have the time to spare, you’ll achieve better results with tracing over the logo to convert it into the vector, as a few others have suggested here in the comments.

      0
  18. 32

    Thanks for this tutorial! It’s looking great.

    0
  19. 33

    Sorry but it’s a waste of time. All you have to do is to use the “magic wand” and eliminate the surplus and the result is exactly the same, in a second term. It’s a very quick and simple option.

    0
    • 34

      What I want to avoid with the Magic Wand are 1) the rough edges of the resulting artwork, particularly with low-res images; and 2) the loss of image data that results from deleting pixels (you may later decide to fine-tune how close you “cut out” the background).

      Fot me, it’s a matter of balancing output quality and time spent. In a haste, I’d go with the Magic Wand (but only with very high-res images that I will downsize later). If I have spare time, I’d trace a vector over the whole thing, instead. In between, there’s the Levels method. ;)

      0
      • 35

        I think this is pointless. As it has been pointed out already, this technique is surely slightly better than the Magic Wand Tool. However, taking this into Illustrator (or any other vector bases software) is FAR FAR superior and in this case will probably take about the same time. I think this “half-way-solution” will just be a waste of time. Look at it this way:

        Two months down the line the client will get back to you, because he can still remember that you were heroic in “re-creating” his logo (as he doesn’t have any vector source files from falling out with another designer). He now thinks it will be straight forward for you to create a sign for their property or a billboard with their logo. Rather than admitting to your client that instead of being professional and WORKING with a superior software that allows you to use the edited outcome for EVERY MEDIA and EVERY RESOLUTION, you have been PLAYING with Fireworks for his previous logo, you will end up doing it all again – this time the proper way – for a lossless, scalable outcome.

        I know that especially Michel likes to fly the FW flag but I think in this case it’s just pathetic to ignore the be blatant inferiority of this software for such work. I know that FW users like to point out that is offers all bells and whistles for web design and are not scared to laugh about people using Photoshop for such things. But professional logo vector creation and editing is surely not Firework’s strongest selling point and vector based software should be used.

        But that’s just my $0.04 …

        0
        • 36

          Although this could be done easier in Photoshop, this is a good tutorial in case someone only bought Fireworks. Please post more Fireworks articles!

          0
        • 37

          Frank, it seems you didn’t read the comments carefully before posting this, have you? ;o)

          Using this method for “extracting” logos is not limiting you in any way. After one or two more steps, you’ll have a perfect vector outline of the logo, right in Fireworks, you’ll be able to re-color it, move it to Illustrator or Photoshop, re-scale it to any possible size (since you have the vectors ready in Fireworks!), etc. Yep, every media and every resolution will be available!

          Please, read more carefully next time…

          0
          • 38

            I have indeed read the article, dear Michel Bintalk. Thanks.

            Quote:
            “Convert Marquee to Path” doesn’t always play well with complex shapes, but you can always tweak the vector paths that are created by that command until they match the logo.”

            This is certainly NOT the way you would expect to work on to use this logo for all media and spend hours on a useless piece of work that could have been done much quicker with the proper tools.

            Note to yourself, there are other (free) Vector and Raster programs out there that are NOT from Adobe and will do a better job than Fireworks. But you just stay where you are, because in that place you obviously know EVERYTHING.

            0
  20. 39

    This is nice! I am going to make this tutorial and hope to learn Fireworks! Hope many Fireworks tutorials will follow ;)

    0
  21. 40

    Good idea!

    On a related note – If the company in question has a website, chances are you can find a PDF with a vector logo embedded. Just open it up in Illustrator and you can use it the way it was intended to be used.

    0
  22. 41

    interesting way.
    always did that in PS but nice to know.
    anyway, if the work requires more then 10 steps i call the client and let him know of the extar costs. original logo follows magically a few hours later.

    0
  23. 42

    Nice Article. Another way to avoid that ‘extra stress’ is to first look if the (future) company or customer you are working for, has press releases or other media as PDF. Most of the time they have their logo as vector in their PDF-Files wich you can easily extract with illustrator and then copy and paste it as a smart object into Photoshop.

    I know this Tutorial is about Fireworks but i thought that information would still be helpful for some people.

    Edit: Oh i just saw that Michael wrote about that. Sorry.

    Best Regards
    Pete

    0
  24. 44

    i don’t use fireworks but the easiest way to extract a logo from a flat image in photoshop is to use the color range command, then fill the selection with color and that’s it. no jagged edges. :)

    0
  25. 45

    I use Fireworks every day and would probably not use Step 4 onwards.

    Once you have the black on white version of the logo at the end of Step 3 I would flatten the three items together, inverse colours, then use this to ‘group as mask’ with the duplicate coloured logo kept underneath it from earlier. Saves messing about with recolouring.

    …But suppose it’s horses for courses and there are different ways and software to achieve it.

    On the subject of redrawing a small 150px wide logo in Illustrator or Fireworks, good luck seeing enough detail. As mentioned at the start of this article, the method shown above is purely for small logos from clients or off the web.

    And yes, the first thing I do when looking for a client’s logo is go to Google and type “client name” PDF. Annual Reports or Newsletters can be a Designer’s best friend!

    Keep up the good work. More articles aimed at Creatives, and not Geeks would be great too ;)

    0
  26. 46

    Sorry to bump an old post, but I just want to say thank you for such a detailed and great tutorial. I’m one of those ‘rarities’ who uses Fireworks but not Photoshop and this was huge for me! Thanks again!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top