1

I created a simple animated GIF using some white words in a transparent background. But the words look too pixelated.

The file is generated using Photoshop's Save for web. There is some configuration to avoid this or it's a GIF limitation?

Here is the image: https://codepen.io/marcelo2605/pen/dOZdMx

  • Can you share the GIF with us so that we can see what you mean by 'pixelated'? – Westside Nov 30 '16 at 14:16
  • @Chris I posted the link – marcelo2605 Nov 30 '16 at 14:21
3

That is not pixelation, thoose are "saw" edges.

Basicly the transparency on a GIF file is rudimentary, so either you have transparency or not.

(The first example is aliased, the second has saw edges.)

enter image description here

Possible solutions are:

1) Make a gif non transparent with aliased edges.

2) Use another method to animate the text like CSS sprites on a transparent PNG. https://www.google.com/search?q=CSS+animation+sprites

4

GIF format does not support partial transparency, so it's not possible to create smooth, antialiased text on transparent background.

If you know in what color will be the background used under the GIF, you can set this background for the GIF, write your text and then change background color to transparent. It will leave one or two pixels around the text for smoother edges. It will look good if you are not planning to use this GIF on very different backgrounds (light and dark or very different colors).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.