How to Create a Simple Equalizer Animation in Photoshop


Do you know how to work with animations in Photoshop? If no, you should!
Especially after the superb 3D tools Photoshop has offered, it is so very important that you know how to work with animations, that’s because Photoshop is not the end, maybe in future animation is the industry destined for you. You should get a hands-on experience of everything because you never know where your talents will shine the most, until you give it a try.

Today I got for you an initial level animation tutorial in Photoshop. Such animations are pretty handy as clip art for web. Using this animation technique, you can create web banners, animated logos and of course, a whole lot of clipart. Don’t forget to comment 🙂

Final Result

visualizer animation for websites

Initial Work

First of all, fill the background with this color.

make an animation in Adobe photoshop cs5

Select Rounded Rectangular Tool and make a rectangle. I filled the rectangle with a gradient. You can see the color codes below.

animation tutorial in Adobe photoshop cs5

You already know the color codes, here are the rest of the properties of Gradient Overlay. You can apply this effect by right clicking on the layer and hitting Layer Styles. 

apply gradient in animations

Final Shape

After duplicating many copies of the rectangle, I made this.

animation tutorials for designers

And we need several shapes, they will be our frames in the animation.

adjusting layers in adobe photshop CS5

Once I had all the layers, I made copies of the all the layers again, they will work as the reverse order on our animation. If you are a little confused, carry on, you’ll understand 🙂

Adjusting frames in adobe photoshop


Go to Windows>Animation. A new panel should appear in the interface.  Now you have to press the film-reel button which is in the bottom right corner of animation panel. I’ve pointed it out in the screenshot.

making animation frames in adobe photoshop

Now I’m gonna apply a simple trick here. Hide all layers except the very first one and hit Make Frames From Layers. 

making animation from layers in adobe photoshop

Now you should have this. All the layers set as frames in the animation. First the levels increase upwards, then, of course they come back because we duplicated the layers in the reverse order.

frames of animation in adobe photoshop cs5

Set the times for all frames and “No delay” from the button on the bottom visible below every frame.

adjusting animation frames time in adobe photoshop

Now go to File>Save it For Web and Devices. 

Latest fresh useful adobe photoshop cs5 cs6  tutorials

Select .GIF Format from the options available on the right side.

tutorials of photoshop cs6


visualizer animation for websites

create free website wix below post

Further Related Readings

  1. Kimberly Smiths July 26, 2012 at 1:55 pm

    Very cool..more moving ideas…i love anime..=)

    1. waseem July 27, 2012 at 11:35 am

      Okay, I’ll try to make more animation tutorials in the future. Thanks for the comment.

  2. jere November 22, 2012 at 4:29 am

    I found your tutorial most helpful out of a few I looked at. I’ve come back a couple times.

    1. waseem November 23, 2012 at 12:19 pm

      O really, wow. Glad to know that 🙂

      1. jere November 23, 2012 at 1:31 pm

        Using your techniques & ideas, I added some subtle animation to this website: aso-okc(dot)org

        Now I am addicted thinking of ways to add more animation in pretty ways to other websites I work on. You not only encouraged me in this animation technique but also with photoshop as a whole.

        Thank you sir.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved