Solved

remove white line around animated gif with transparency

Posted on 2014-02-19
7
2,230 Views
Last Modified: 2014-02-24
Hi all,

I'm creating an animated GIF with a transparent background.

However when I export this and add to my site, the GIF has a white line around the edges of the image as it animates. My layers are individual PNGs I created in photoshop. Now if I load a PNG the white line disappear which points to the GIF export being the issue.

I've used fireworks and the following;

file -> image preview

format - Animated Gif
palette - Exact

ive tried both alpha and index transparency.

Is there any options I can change to help fix this issue?
0
Comment
Question by:flynny
  • 3
  • 3
7 Comments
 
LVL 35

Expert Comment

by:Kimputer
ID: 39870749
Can you attach the GIF file here?
0
 

Author Comment

by:flynny
ID: 39870764
0
 
LVL 35

Expert Comment

by:Kimputer
ID: 39870805
There's some slight white lines around the bird yes. The PNG file will not show it because  of it's better transparency properties (more advanced).
The GIF shows these white pixels, because actually they're not exactly white at all. A GIF will make a pixel transparent if the pixel is really white (ie RGB 255 255 255), but these white-ish pixels are all not 100% white (as in RGB 247 222 214 etc etc)
You can only solve it by rendering the GIF file with the background already in the color you want the webpage to be in. But when this GIF is used again on another background, you will have the same problem (but now, slight black lines for instance).
Another option is the turn off anti-aliasing when rendering, but that will result in a "blocky" bird, and the edges will be quite blocky and sharp.
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 

Author Comment

by:flynny
ID: 39870812
Hi Kimputer.

Thats great, so really I cannot get around this issue as the bird is to be placed over a CSS3 animated background so the color would be constantly changing.

Is it possible to use CSS3 to animate in this way (i.e. have the 5 pngs in the GIF and flit between them?)

Or do you know of any other solution or file format I can use?
0
 

Author Comment

by:flynny
ID: 39870824
also how owuld I remove anti-aliasing as I cannot see this as an option.

Thanks.
0
 
LVL 35

Accepted Solution

by:
Kimputer earned 500 total points
ID: 39870866
You could try APNG (Animated PNG), but no widespread support yet:

http://en.wikipedia.org/wiki/APNG

See browser compatibility below, it's not that much.

Otherwise use the info from here: http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function

Basically, you make one big PNG files, frames next to each other. For instance your bird is 180 pixels wide, and if you want to animate 10 frames, your resulting PNG would be 1800 pixels wide. Adjust some sample code and it should work.
Check browser compatibility though, I haven't tested it all yet (Yes for updated Chrome Opera and Firefox, some IE versions broken)
0
 
LVL 6

Expert Comment

by:jmpg_70
ID: 39872783
The simplest way to remove the white light around the bird is to re-make the gif file with a coloured background. Use the RGB or Hex value in the background layer that is used in the webpage.
By using the same colour as your site background the aliasing will be based on that colour and should appear in a more seamless manner.
0

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
D3, SVG, dragging 3 145
How do you change the aspect ratio in a picture? 7 71
graphic software 6 91
Please explain the responsibilities for Cold Fusion working with ASP.NET? 3 104
Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question