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