Refine Edges of a Circle Gif with Fine Gradient or Looping Video?

Forum|Forum|9 years ago
December 19, 2016
2 replies
1150 views

Hi there ~

So what I’m trying to do is make an icon animation that’s similar to the Windows 7 loading icon, except rather than the middle being hollow there’s going to be picture there instead. I want it to have a transparent background, but I’m having trouble preserving the refined edges when I go to save it. The edges always turn out to be really rough and unrefined, is there any way to avoid this?

I open a new canvas (about 55p x 55p) as usual and use the shape tool to draw a circle, and then add a gradient over top of it (set to angular rather than linear). I add in the rest of the details, such as the picture I want etc., and then go to animate it using the timeline. The way I’m animating it is similar to this video here: https://www.youtube.com/watch?v=3CvBCMoFM8g&t=186s. In the video the edges seem to be nicely refined, how can I get it like this?

Any tips would be appreciated. Thanks in advance.

This topic has been closed for replies.

Laurelaina44Author

Participating Frequently

Bump?

Trevor.Dennis

Community Expert

When you export out are you using the 4up save for web panel, and what settings are you using?

Laurelaina44Author

Participating Frequently

A rough example: eyJ1cmwiOiJodHRwOi8vaS5pbWd1ci5jb20vWkM5YmtmUS5wbmcifQ.gKw-HmhMNmRlaQaxZEuRFX-WSr0

Trevor.Dennis

Community Expert

I took the time to watch the tutorial this time, and can now see what the problem is. You are choosing to export out to a Frame Animation with an animated GIF. That has a maximum 256 colours, and we can see from your screen shot that you have maxed out the possible quality. The tutorial only shows a video timeline, and rendering out to video will retain the full quality because I imagine it has a similar colour depth as sRGB. One of our colour pedants will be along to give us the last word on that, I'm sure . 256 colour GIFs are fine for larger images with no fine gradients, but your icon is not going to do well with a reduced colour pallet.

What is interesting from the tutorial is that he demonstrates looping playback on the video timeline. AFAIK you can't make a rendered video loop without software, and you'll need the website guys to tell you about that unless that is already your thing. When I have made short video sequences that I want to loop, I copy the timeline clip and paste it in sequence as many times as I think I can get away with. If your application is online, ask your question in the Dreamweaver forum.

I'll add 'Looping video' to your subject line, which might draw in a web site coder or two, and I'll be interested myself, to hear the answer.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded