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

Forum|Forum|9 years ago
December 19, 2016
2 replies
1154 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 did actually manage it to loop, just not refined. I understood what you're saying until the coding part. Are you saying that it's impossible to achieve such a graphic with Photoshop, and it can only be done through coding? I'm sorry for the misunderstanding and confusion, it's just I don't know how to code and this becomes out of my expertise, so I'm not quite sure what should I ask in the Dreamweaver forum or if it's an impossible action through Photoshop. Here's one of the gifs I'm attempting to make, and as you can see, the edges aren't refined:

OK, we are getting at crossed purposes here.

The tutorial shows an animation running on a video time line. When done, you can either render out the video will play just once if uploaded to YouTube, for instance, or you can convert the video to a Frame animation. The difference is that video has the full colour depth of your monitor (>16 million, but not my area of expertise), but a frame animation can have only 256 colours.

Exaggerating to make a point, the comparison below shows the damage converting to GIF can do. Note I reduced all the way down to 16 colours for this.

An animated GIF can loop for ever. A video only plays once if viewed on YouTube, but if you embed the video in a website, I'm guessing that it would be possible to make it loop, and thus retain the full quality. A quick Google found a ton of information on making that work.

How to make HTML5 Video Loop

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