Animated Graphic Equalizer In Photoshop And Imageready

In this tutorial, I’ll be showing you how to make your own animated graphic equalizer using Adobe Photoshop and Imageready, which looks good in both signature images and also on web templates.

Step 1:

First things first, create a new canvas in Photoshop, roughly 150×150px, and use the paint bucket tool to fill the background black. You can also open up an existing graphic you have created that you want to put the animation over.

Step 2:

Now zoom in slightly, and using the pencil tool with a 1px brush, draw in you the first level of your equalizer bars. These will act as a guide for where to put everything else.

Step 3:

Now you need to decide how tall you want your equalizer to be. Draw a line under your guide bars leaving a 1px gap bewteen, and then draw a line up each side leaving a 2px gap. The 2px gap is so that you can leave little level markers along the sides, such as shown here:

Step 4:

Ok, you’re ready to start drawing the bars in. Again with the 1px Pencil tool, but on a new layer, start to draw in your first set of equalizer levels. Make them nice and uneven, and make sure you create the lines straight upwards! You can either leave a 1px gap between each section, or you can use solid bars. I’ll be using a 1px gap, but I’ve shown both below for this step only:

Step 5:

This is the time consuming part. You need to repeat the last step, each time on a new layer, and make sure you change the level of each bar, if only a little bit, each time. Afterwards, you should have a series of equalizer layers, which will individually look similar to these:

Step 6:

Now you need to hit Ctrl-Shift-M to jump to Imageready. Once you’re there, make sure you have the animation window open. If it’s not, hit Alt-W and click the Animation button. Now you have to open a new frame for every stage of the animation, which is every equalizer layer you made in the last step. Make a different one visible in each new frame, so that individually, they look like each of my images above. Leave each frame delay at 0 sec. for a smooth animation. Then go to File/Save Optimised As and save your animation. Hopefully, you should have a working animation similar to this:

You can modify this in many ways, as well as obviously the size of your equalizer. You can add gradients to the level bars, or have them change colour when they go above a certain level, for instance.