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?
Is there a way to achieve perfect look with the gradient on gifs?
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.
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)
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.