Expert: Scott Valentine - 10/4/2007

Question
Hi Scott,

I have a logo that was given to me as a JPG file, so it defaults to having a white background. Previously this logo has needed a white background so it hasn't been an issue till now.

I am trying to isolate the logo so I can use it on a new site that has a dark blue background.

I can think of several ways to pull the white out, but my problem comes from the 'feathering' or the lighter areas of the logo- when up against the darker background it looks strange and not clean/natural.

I'm sure there must be an easy way to isolate the logo from the white (there is no white at all in the final logo, just in the forced jpg background)

I am currently using CS2. Thanks in advance for your help, I hope I've been clear with what my problem is :)

Answer
Hi Michelle,

Thanks for your question. I previously answered a very similar question on Oct 3, 2007. In addition to that answer, please note that JPG does not support transparency. Here is the relevant portion of the previous answer as a quote.
---
There are a couple of ways to deal with the background. But before you get started, duplicate your background layer so you are not working on the original. This gives you a safe way to try different techniques. Also, be sure your logo is in RGB so you have access to the tools you'll need (Image > Mode > 8-bit RGB).

A simple first-pass approach is to try the Magic Wand tool, and enhance the selection using the new Refine Edge tool. Both of these tools are covered in the help files, and are worth reading about. The important thing to note about the Magic Wand tool is that it can select either *all* pixels in the color range, or it can select *contiguous* pixels (pixels that are touching eachother and are of the same color). Using the 2nd option, you can CTRL/CMD + Click in additional areas or colors to add to your selection.

Once you have your selection, I recommend creating a layer mask, rather than deleting the white areas. This allows you to make detailed adjustments and tweaks to the outline by working on the mask. It's also nondestructive, so you can try new things without fear of damaging the image.

Another tool you should consider is the Pen Tool. This creates a vector outline you can also store in a vector mask. This has the advantage of giving very clean edges, and great control over curves. It will also feel similar to Illustrator, though greatly reduced in features. Simply create a Bezier outline using a vector mask (again, help files will give you everything you need to know).

Depending on the detail and edges in your logos, there are additional techniques that may be more helpful, but they get more specific and would take too long to present here. They typically involved blending, channel operations, and some advanced trickery.
---

For transparency, you'll need to use either GIF or PNG. If you have Fireworks, you can use PNG-8 and make use of the indexed transparency to create a transparent background. Otherwise, you'll have to use PNG-24, which will give a larger file size. I think the easiest solution will be to use Save For Web... and then choose GIF. Play with the settings to get the right combination for your logo.

There is also a feature called 'Defringe' in Photoshop. Check the help files to see if it will help with the feathering you see. You can play with matte settings when you save as a GIF to help make the transition more smooth.

If you need additional information, or have other questions, please feel free to ask!

-Scott