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?
1 Answer
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.
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.
-
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.– yyolandiMay 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 :).– RafaelMay 18, 2022 at 14:10
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.