On 2/23/07, Sudheer Satyanarayana wrote:

Hi,

Our business logo was designed by a professional. At this point of time, the person who created the logo is not available to edit the image.

I have posted the images at the following link:

http://binaryvibes.in/test/test.php

The image has white patches around the circumference and around the alphabets BINARY. When I reduce the image to lesser size, 100x144 it looks very awkward. I have been trying to remove those white patches for two days. I haven't been successful.

Can anybody tell me how to remove those white patches and make the image neat?

I'm novice in Graphics editing. GIMP is the only graphics editing software I have on my Linux computer.

With Warm Regards, Sudheer

You could try selecting only the purple area, invert the selection, and then clear all.
Or zoom in real tight, and erase those offending pixels.

On Friday 23 February 2007 20:55, Sudheer Satyanarayana wrote:

Hi,

Our business logo was designed by a professional. At this point of time, the person who created the logo is not available to edit the image.

I have posted the images at the following link:

http://binaryvibes.in/test/test.php

The image has white patches around the circumference and around the alphabets BINARY. When I reduce the image to lesser size, 100x144 it looks very awkward. I have been trying to remove those white patches for two days. I haven't been successful.

Can anybody tell me how to remove those white patches and make the image neat?

Ok, firstly gif is evil when it comes to transparency. It only has a single bit alpha channel - ie. there is either full transparency or none. There is no in between.

The person who did the logo created it to go onto a white background and by the looks of it you're trying to make it transparent so that you can place it on any color back ground.

I'd highly recommend PNG since all the major browsers now support it and IE7 now handles the PNG alpha channel correctly without have to do browser tricks. The PNG format supports an 8 bit alpha channel which means you can have 256 levels of alpha. That means nice smooth fading to the background.

It's going to be hard to sort out those edges by hand. The best thing to do is to load the image into an vector drawing app (an open source SVG editor like Inkscape) and trace over the logo before exporting it to PNG.
That way you'll get nice clean sweeps along the edges and it will blend/fade onto any color background.

Paul

Sudheer Satyanarayana wrote:

http://binaryvibes.in/test/test.php

The image has white patches around the circumference and around the alphabets BINARY. When I reduce the image to lesser size, 100x144 it looks very awkward. I have been trying to remove those white patches for two days. I haven't been successful.

Can anybody tell me how to remove those white patches and make the image neat?

Sudheer, others may have a better method, but I was playing around with the image a little. Before I begin, remember that if you are working with a gif and if you are attempting to use transparency, only square edges will look sharp, while round edges will appear jagged, since gif only supports on/off transparency for any given pixel. .png images would look smooth on round edges but are not widely supported by all but the newest Internet Explorer version; hence roughly 70% (an estimate) of all browsers/versions will not show it correctly.

Here is what I suggest. Create a new layer and give it the color your webpage background will have. Go back to the logo layer and select ALL the black areas using the magic wand. Use "Select">>"Grow" (choose 1 pixel), then "Select">>"Feather" (choose two pixels), then hit delete. Once all black areas are removed in this manner, merge the two layers and apply "Filters">>"Enhance">>"Unsharp Mask" (make amount .1 or so, this is to sharpen the logo a bit). Save as a gif...

When I do the above sequence, I get a nice sharp logo with no visible white artifacts. Good luck.

Ben W.

On Friday 23 February 2007 21:40, Ben Walker wrote:

.png images
would look smooth on round edges but are not widely supported by all but the newest Internet Explorer version; hence roughly 70% (an estimate) of all browsers/versions will not show it correctly.

However there is a PNG hack for IE 5.5 through IE 6 which works fine. http://homepage.ntlworld.com/bobosola/pngtest.htm

Paul

On Fri, 23 Feb 2007 19:55:41 +0100, Sudheer Satyanarayana wrote:

Can anybody tell me how to remove those white patches and make the image neat?

Sure. Do this (some names may differ, my gimp is norwegian so I have to translate some things):

1. Load the image into the gimp. Select the color picker tool, or pen/pencil with ctrl held, and use this to catch the purplish color. 2. Convert the image from indexed to RGB format (Image -> Mode -> RGB). 3. Go to Colors -> Levels, click the third color picker button from the right at the bottom ("select black point"), click the purplish color. The logo should now be black. Hit ok.
4. In the layers window, right-click the layer and add a layer mask. Select grey scale copy of layer in the dialog and make sure "invert mask" is checked. Click add.
5. Click the leftmost of the two images of the layer in the layer window to select the image (the other is the mask). Also check the little checkbox above the layers view, to lock transparency. 6. Switch to the bucket fill tool. In the tool options, select "fill entire selection". Click the image to fill it with purplish. White patches are now gone! (But we're not quite finished yet..) 7. Right-click the layer again and select apply layer mask.

You now have an image with alpha transparency. To use the alpha transparency as is on the web, you'll have to save the image in the png format, but note that (older?) IE browsers doesn't support alpha transparency properly. Gif only supports on/off transparency. To get nice anti-aliasing with that, you'll have to add a background to your logo (add a new layer filled with your new background color, put it below the logo, and flatten the image).

Good luck!

~ Gerry

Gerry JJ wrote:

On Fri, 23 Feb 2007 19:55:41 +0100, Sudheer Satyanarayana wrote:

Can anybody tell me how to remove those white patches and make the image neat?

Sure. Do this (some names may differ, my gimp is norwegian so I have to translate some things):

1. Load the image into the gimp. Select the color picker tool, or pen/pencil with ctrl held, and use this to catch the purplish color. 2. Convert the image from indexed to RGB format (Image -> Mode -> RGB). 3. Go to Colors -> Levels, click the third color picker button from the right at the bottom ("select black point"), click the purplish color. The logo should now be black. Hit ok.
4. In the layers window, right-click the layer and add a layer mask. Select grey scale copy of layer in the dialog and make sure "invert mask" is checked. Click add.
5. Click the leftmost of the two images of the layer in the layer window to select the image (the other is the mask). Also check the little checkbox above the layers view, to lock transparency. 6. Switch to the bucket fill tool. In the tool options, select "fill entire selection". Click the image to fill it with purplish. White patches are now gone! (But we're not quite finished yet..) 7. Right-click the layer again and select apply layer mask.

You now have an image with alpha transparency. To use the alpha transparency as is on the web, you'll have to save the image in the png format, but note that (older?) IE browsers doesn't support alpha transparency properly. Gif only supports on/off transparency. To get nice anti-aliasing with that, you'll have to add a background to your logo (add a new layer filled with your new background color, put it below the logo, and flatten the image).

Good luck!

~ Gerry

This method looked very interesting to me (as a useful method for some of my own projects), but I couldn't get it to work... I tried many times... I am using a dev. version of GIMP (2.3.12) in case that makes a difference

Ben

Ben Walker wrote:

Gerry JJ wrote:

On Fri, 23 Feb 2007 19:55:41 +0100, Sudheer Satyanarayana wrote:

Can anybody tell me how to remove those white patches and make the image neat?

Sure. Do this (some names may differ, my gimp is norwegian so I have to translate some things):

1. Load the image into the gimp. Select the color picker tool, or pen/pencil with ctrl held, and use this to catch the purplish color. 2. Convert the image from indexed to RGB format (Image -> Mode -> RGB). 3. Go to Colors -> Levels, click the third color picker button from the right at the bottom ("select black point"), click the purplish color. The logo should now be black. Hit ok.
4. In the layers window, right-click the layer and add a layer mask. Select grey scale copy of layer in the dialog and make sure "invert mask" is checked. Click add.
5. Click the leftmost of the two images of the layer in the layer window to select the image (the other is the mask). Also check the little checkbox above the layers view, to lock transparency. 6. Switch to the bucket fill tool. In the tool options, select "fill entire selection". Click the image to fill it with purplish. White patches are now gone! (But we're not quite finished yet..) 7. Right-click the layer again and select apply layer mask.

You now have an image with alpha transparency. To use the alpha transparency as is on the web, you'll have to save the image in the png format, but note that (older?) IE browsers doesn't support alpha transparency properly. Gif only supports on/off transparency. To get nice anti-aliasing with that, you'll have to add a background to your logo (add a new layer filled with your new background color, put it below the logo, and flatten the image).

Good luck!

~ Gerry

This method looked very interesting to me (as a useful method for some of my own projects), but I couldn't get it to work... I tried many times... I am using a dev. version of GIMP (2.3.12) in case that makes a difference

Ben

Oops, my mistake, I had not saved the image first, I had copied it to the GIMP off the internet. Your instructions work just fine. Sudheer, please note my suggestions do not apply unless you copy the image off the website you posted.

Gerry, that's a very effective method, I am trying to analyze why it works, and I think I know, but I want to rush out this email b4 you try and figure out if you gave the wrong instructions.

Ben W.