Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Tutorials ImageReady Animation Animated Graphic Equalizer in Photoshop and Imageready

Animated Graphic Equalizer in Photoshop and Imageready


Step 1:

First things first, create a new canvas in Photoshop, roughly 150x150px, 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.

image 1

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:

image 2

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:

image 3

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:

image 4

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:

Animated Graphic Equalizer in Photoshop and Imageready

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. Experiment and see what you can get.



About the Author:

I started Web Design 5 years ago, and I now make a substantial monthly income each and every month, and so can you.

Author's URL: Michael Dunlop
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process. More ImageReady Animation Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Animated Graphic Equalizer in Photoshop and Imageready"

Captcha