Antialiasing with transparent background, gif optimiser

[ioannes]

I have text to show in a logo. I use a solid background so I can make it transparent in the gif optimiser. I also set antialias in the text tool, when writing the words. However, the edges of the letters are jagged when I set the solid colour to transparent in the gif optimiser/export wizard. How do I get smooth edges in the letters and a transparent background?

ioannes

 

[mThomas]

If you have the antialias option checked, then you are probably getting the best results you can with the text you are using. Some fonts work better in a transparent gif than others.

One thing is make sure that the color of the solid background is similar to the color of the page on which you will display the transparent gif. That will help a lot.

mike

 

[ioannes]

When I just save as gif, then I have smooth text. I am using Arial Narrow 26-36 pixels white to show against a coloured background table cell. I find that if I saved the colour in the gif image, it rendered differently on different machines depending on the quality I suppose of the video driver. The image colour degrades whereas the cell background is solid. So I thought I would use a transparent background, but that is only available, as I have read, using the Export function, because transparent in Photoshop doesn't mean transparent in the end product unless you Export it, rather than just save it. But doing that leaves me with jagged edged text. I don't find Photoshop that easy to use.

ioannes

 

[mThomas]

Are you using PhotoShop? This is a Paint Shop Pro fourm. In any event, another factor is the number of colors you use when exporting as a gif. That can have an effect on the edges, leaving jaggies, and also affect the amount of pixelation.

mike

 

[ioannes]

Sorry, I did mean Pain Shop Pro. It's the following simple logo:

http://www.shortstay-london.com/logo.gif

on

http://www.shortstay-london.com

I'm trying to match the solid colour top right.

Thing is you don't get pixelation with a background colour in a table cell, which I'm trying to match. Don't see why I can't save as a gif, keep the nice edges and have a transparent background...

ioannes

 

[mThomas]

I grabed your logo and saved it as a transparent gif with the background color as the color to be read as transparent. I then placed it on a black background. Here is the link.

http://www.udraw2.com/london.html

Is this what you wanted?

mike

 

[ioannes]

Yes, but (and this PSP application makes me feel embarrasingly thick) I don't have a save_as_transparent gif option under the file menu. When I go through File_Export_Gif Optimiser I'm into:

Transparency
Existing image or layer transparency
Areas that match this colour_ Tolerance.

Did you go though this?

ioannes

 

[mThomas]

You can do it that way, but no I did the following:

1. I opened the image
2. Colors > Set Palette Transparency
3. I choose the "set the transparency to the current background color" option from the Set Palette Transparency dialog box.
4. Click on Ok.

You can view the transparency by choose, from the colors menu, View Palette Transparency.

Then you can save the image as a gif. If you use the gif optimizer, then by default the optimser will have the transparency option selected, and all you have to do is choose the color depth.

mike

 

[ioannes]

Thanks for your patient help. This is better - going back to your first advice, the background colour on the web page must be the same as that on the gif in PSP, but this is only true if you don't reduce the number of colours when optimising the gif, as you end up with a border of simplified colour pixels around the letters. When optimising I was also taking all the colours out of the image rather than leaving some coloured pixels around the edges to match the web page background. It seems safer not to optimise if you want to match colours like this, but to use Colors>Set_palette_transparency, as you did.

This is better:

http://www.shortstay-london.com

Thank you.

ioannes

 

[mThomas]

The background color doesn't have to be the same as the color to be read as transparent, it helps to have it similar. The reason being is that when you choose a color to be read as transparent and the objects in the image have been antialiased, there are some pixels in the alias that are no longer the same as the background color. They may appear to be the same, but are in fact different in tonal value. When you create a transparent gif, those antialiased pixels will show up as a sort of halo around your objects. If you use a background color in your gif similar to the color of you web document's background color, then the halo is minimized.

mike