2 Replies Latest reply on Jan 16, 2013 9:17 PM by Silkrooster

    Smooth edges - GIF animation


      Hello there!


      Sorry if another theme about my question already exists in the forum...

      I'm using PS CS4 and trying to Save for Web & Devices an GIF transparent animation, but I need it to be with smooth edges. I tried to add different type dither to the transparency but I don't like the result at all.

      Any idea how to make the animation with PERFECT SMOOTH edges?

      I'll be realy thankful and appreciate your help


      All the best!


        • 1. Re: Smooth edges - GIF animation
          Alec Molloy Employee Moderator

          By perfect smooth edges do you mean anti-aliased edges? The image below has aliased edges on the left, and anti-aliased edges on the right:


          image showing aliased and anti-aliased text



          • 2. Re: Smooth edges - GIF animation
            Silkrooster Adobe Community Professional & MVP

            Its hard to get a true anti-aliased edge using the gif format, simply because it only offers a single color that can be used as the transparency. If at all possible you are better off using the png format and before anyone says that you can not use png for an animation, think again. Take a look at some of the examples on the net for creating rollovers using javascript.  It is the same principle used for game sprites.



            If the image is to be 100x100px and the animation is 10 frames, then the original image should be 1000px wide x 100px high containing all of the images in the same document. On the web page the first frame is visible at 100x100 hiding the remaining part of the document. Then the next frame is visible by moving the image. And so on.


            Anyway, its better to look at some examples on the web at it probably would make more sense than what I am trying to explain.


            Just an idea...