Converting png to gif problem

[FragaCampos]

Hello everyone.

 

I'm, trying to make an animated gif from a png image. I managed to do it, but there's a small problem... when I convert the png to gif (to make the animated gif afterwards) the image gets a strange white border around the edges. I tried to play with the Dithering and Tansparency threshold, but to no avail.

You can see it in the logo at the top of this page (hover the mouse over it).

http://www.docspt.com/index.php?action=community

 

How can I avoid this with Paint.NET?

 

Thanks a lot for providing the amazing tool which I use everyday!

Edited April 14, 2013 by FragaCampos

[pdnnoob]

The problem is that gif images are limited in their support of transparency. While a png image will show up to 256 different levels of transparency, a gif image can only show two: completely transparent or completely opaque. If a pixel is partially transparent, whether it is opaque or transparent in the converted image is determined by a transparency threshold (which you can select when saving the image).

 

Because of how the pixels are made opaque, in the case of your image, you should set the threshold as high as it will go so that the partially transparent pixels don't get turned white in the final result. If that doesn't work use BoltBait's transparency plugin (found in his plugin pack) to make the partially transparent pixels fully opaque.

[FragaCampos]

Thank you for your answer, pdnoob.

I've tried many combinations of the transparency threshold, but the transparent piels always get opaque.

 

Which effect do you advise me to use from that pack? I've looed and tried some, but I don't know what you mean.

[pdnnoob]

If that doesn't work use BoltBait's transparency plugin (found in his plugin pack) to make the partially transparent pixels fully opaque.

[FragaCampos]

Sorry. I was looking under "effects". My bad.

 

Anyway, I didn't manage to get good results. The image gets too much pixelized in the transparent parts..

I believe it's now possible to make this convertion with an image like this.

 

Thanks for your help, though.

[Djisves]

I had similar problems until I gave up and realised that the only way to solve it is NOT to use transparency in any animated gif.

 

The workaround is to place your transparent fly and text on the Parthenon photo before you save each gif to be used in the animation. Then save several gif's with the fly in different positions and use those to make your animation. 

This does not mean that you have to use the whole of the Parthenon photo for the animation. Cut out just enough width for the animated gif and then place it in between static gif's on the webpage.

Let me know if I don't make sense and I'll try harder.

[FragaCampos]

Thanks for your help, Djisves.

I dind't undesrtand very well what you said. Isn't a problem the fact that the header image (Partenon) is not static? I mean, it changes depending on the browser's resolution.

[Djisves]

I see. Yes, if your background is not fixed in size, it will be a problem. You need a fixed backgound image to use my way of doing things.

 

Just in case it can be of use to anyone, I'll try to better explain what I meant:

 

Start with any background. Here's mine:Here

(Shown here at half size so as not to beak forum rules)

Save it as a GIF file and remember the settings used. It is important to use the same settings when saving all GIFs in this process in order for the end result to look nice.

 

Decide where you want to place your animation (in your case and in this example, somewhere in the center of the image) and cut that part of the image out. Save what's left as separate GIFs.

 

Here's the centre of the image that I cut out for the animation part:

 

And these are the parts of the image on the left and on the right of the animation part:  

 (left)

 

 (right)

 

Take the part where you want your animtion to be and use it as background for your animation. This way you avoid any jaggies (white pixels) caused by the transparency in your moving graphics:

 

Finally, place all the parts of your graphic, in the right order, on your webpage.

 

(note: you need to have your browser on full screen to see the end result as is meant).  

[Ego Eram Reputo]

"We love Portugal?"

[Djisves]

Don't we all?

Well, FragaCampos is Portuguese, so I used a photo of a portuguese sight and matching text.