Is there an easy way to add a sparkling stars effect to an image?

I’m looking at adding an effect that would contain animations for individual parts of an image to fade in and out. This was at on point the kind of thing you might export as an animated gif. I’m not sure the best tool for doing this today. What I’m wondering is can this be done with a basic program? Something that would let an individual star fade in and out?

You can see an example of what I’m talking about here on this UI portfolio. If you roll over her name the stars immediately will blink on and off. In my case I wouldn’t need the rollover functionality I’d just want the animation to start going once the page loads.

I’m working in Foundry / Stacks but in this case I don’t think that would matter much since it seems like the image isn’t being animated by the framework but it is already like that before becoming imported. This seems like a very basic feature that I’ve seen way, way back but I’ve never implemented it with older tools since I’ve never had this specific need before.

I used Keynote - for the word WindyTown.com in the menu

Export as animated gif…

2 Likes

Fascinating, I don’t even think about Keynote as a tool that can be used for exporting individual interface elements. I think of it as only doing slides. I wonder if Apple’s Motion can do a similar thing, export just one object for the web? I just suspected Motion could only be used in collaboration with video production. Both Keynote and Motion could be much more useful for me if they all can be used in this way.

After I wrote this post I was looking at a web design portfolio that talked about using Blender. So perhaps I may start experimenting with all three of these products to see the benefits or possible limitations of each of them. Thanks for letting me know about that!

Keynote is way easier than motion, export as gif then crop in Pixelmator. :slight_smile:

1 Like

Great, I can just use the tool I already have and don’t need to learn anything new from scratch.

The object below is what I’d like to animate, a next arrow button. I figured that some of the stars should be blurred (actually maybe all of them should be) I’m actually not sure if Keynote can do that since I really don’t use Keynote.

I made this still graphic in Sketch (which seems like it should be able to animate it) but if it can’t animate it there could I recreate an object like this in Keynote to animate and then export it with the animation?

There are a lot of animations to try… left right fade in zoom etc

You really have to try them and pick what you like

1 Like

I’ve found some tutorials that are a little like the kind of effects I want. The first video gives a circle four shadows stacked on top of each other pointing up down left and right. I wonder if Keynote has a setting for the blur to go all the way around the circle?

His example is really neat but I’m just looking for a blur that is a bit more simple by making the blur the same color as the object. Doing what he did for one circle is straight-forward enough but it would get difficult after applying it to fifty circles like in my arrow example above!

Oh wait, I just discovered the action tab. Looks like I’ll just need to watch a lot of videos on how that works and I’ll probably figure out the effect I’m going for. There are a bunch of them I can see.