Software Used : Adobe Photoshop CC
- Open a new Photoshop document of your desired size & DPI, you can use either a colored background or a transparent one.
- Now draw a circle and align it to the center, you can use the guide line I have used the guideline & they are present in the free Photoshop file attached at the end; name this as background circle
- Now draw another circle on top of it and name it as foreground circle, you can apply whatever effects you want to both the circles as I have done in the attached video at the end.
- Now draw third circle and place it on top of the background circle & name it as animation or overlay circle; I usually like to use vibrant & bright colors for the animated part in this case I have used yellowish/green; again you can use your own choice.
- Now apply create clipping mask to the overlay circle, make sure it’s on top of the background circle, you will probably not see the overlay happening as you must rasterize the background circle once all the desired effects are in place (I have showed it in the video at the end)
- Put whatever text you want on top of the foreground circle; in this case I have used “Click here now” and apply the effects you like, in this case I have used gradient & outer glow.
- Now go to the windows on the top bar & find the option of “timeline” once found click on create a timeline video, which will import all the layers in the timeline.
- Now animate the overlay circle with the position option in the drop down; I like smoother animation hence I have moved the circle around the background circle at 10 frames you can do whatever you have too.
- Start by creating a start key point than at every 10th frame keep moving the circle so a key frame will automatically be created, do the same until you made a full circle; once done shorten the time line to the last key frame; in the setting make sure you hit loop option.
- Now in the file option go to export & export it as web layer GIF file, I always export as 256 colors make sure the loop is on forever or else its not going to animate. That’s it your animated button is ready
- Watch the complete YouTube video attached at the bottom for detailed idea and also subscribe to our YouTube channel so you don’t miss any upcoming designing tutorial.
Download the free .psd file (Photoshop document) which I have created to use it on your projects royalty free : HERE
Download the free .gif file (transparent background) of the ready & free to use button with text click here now on it : HERE