2

I was trying to make animated gif on adobe photoshop and when i use gradient, there are some lines on the gif when i try to open it via chrome. I searched and cant get a certain answer for it. they say gifs are meant to be flat colors but when i searched on giphy, i can see gifs with gradient and looks fine. is there a way to achieve perfect look with the gradient on gifs?enter image description here

6
  • First, I wouldn't be too surprised if the giphy gifs are actually videos masquerading as gifs. Not sure if that's a thing in Giphy, but like I said, wouldn't surprise me. — Also, I would question why you're making an animation like this in gif format? what's the use case? There might be a better way to do it. I think the only scenario where a gif is the best option is when it's the only option or quality is not an issue. — That said, it could be the color count. I don't think I'd try anything less than the max 256. Also perhaps dithering "pattern" or "noise" might work better.
    – Joonas
    May 17, 2022 at 8:57
  • It's a limitation of the GIF format. GIFs use Indexed colour. Indexed images can only have a maximum of 256 colours. When you try to use a gradient you need to employ dithering to kind of smooth everything out, but that doesn't really fix the problem of having such a limited colour palette. You can see the dithering if you zoom in on your GIF see screenshot See this closely related question, and the answer given.
    – Billy Kerr
    May 17, 2022 at 9:14
  • @Joonas - yeas I believe many, if not all, of the "gifs" on giphy are in fact video MP4 files.
    – Billy Kerr
    May 17, 2022 at 9:19
  • thank you for your answers, i was not trying to do an animation gif like this at first, i am taking online photoshop lesson and we did an animated gif there, but i wanted to see how it would be if i add gradient to the shape or background and then things got messy..
    – yyolandi
    May 18, 2022 at 7:26
  • You can also export a video from File > Export > Render video.... Probably some youtube videos about that process too. A video format output would be the best for something for this kind of animation in Photoshop. But whether or not a video file makes sense depends on where you'd use it. If it's just something you want to save to your hard drive, then a video would do it. Unfortunately GIF has huge limitations, even when it's not an animation. So much so that in websites animations are usually either a CSS animation if possible, a video, or a sequence of images.
    – Joonas
    May 18, 2022 at 19:24

1 Answer 1

1

Is there a way to achieve perfect look with the gradient on gifs?

No.

Remember that GIF has a limited palette of 256 colors. One single frame alone on that gradient could easily consume, let's say 64 colors. With 4 frames you consumed all the 256.

GIFs are meant to have flat colors because if you use a gradient, they will not have a smooth transition. You will have, either very visible banding, or you could have a lot of dithering or both. Dithering is very inefficient to compress making a file too big.

Here is a zoomed in section of your image. enter image description here

You can see the limited set of colors. "To increase" the number of colors in the gradient, some dithering, a pattern is created with the existing colors, trying to "fool" the eye. These patterns are limited in how they can work. That is why you see a lot of jumping in both, the gradient and the transition.

As the comments said. If you saw a smooth transition on gradients are most likely an MP4 file.

For that transition try CSS gradients and CSS transitions (Or a video file)


(Edited)

I am taking online photoshop lesson and we did an animated gif there, but i wanted to see how it would be if i add gradient to the shape or background and then things got messy

Ok. So you simply found the limitations I mentioned above. GIF has a limited palette of only 256 colors.

If you are working on a Ps project, in this case, an animation, knowing the limitations of the output file is an important step in the planning of your project. If you still need the gradients on an animation, you need a video file.

2
  • I am quite newbie. What is CSS gradients and CSS transitions? I searched and found a website called CSS gradients which helps making gradient background i think. I could not find CSS transitions though.
    – yyolandi
    May 18, 2022 at 7:30
  • As normally an animated GIF is part of a webpage, and as you mentioned using chrome, I mentioned CSS gradients and CSS transitions, but with your clarifications, that is for now out of the scope of your original question. If you want to investigate it further, please ask a new question so we keep the format of the forum with specific answers to specific questions :).
    – Rafael
    May 18, 2022 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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