ITLifetime

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

Initial Work

First of all, fill the background with this color.

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

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.

Final Shape

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

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

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

Animation

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.

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

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.

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

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

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

Done!