Sound Bar Animation

iSTiFYeTi · Post by **iSTiFYeTi** » Mon Feb 19, 2007 7:00 pm

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

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.

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.

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:

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:

iSTiFYeTi · Post by **iSTiFYeTi** » Mon Feb 19, 2007 7:01 pm

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:

iSTiFYeTi · Post by **iSTiFYeTi** » Mon Feb 19, 2007 7:02 pm

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 **** 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. Experiment and see what you can get.Need more help or guidence with any of

reece · Post by **reece** » Sat Apr 14, 2007 4:52 pm

looks really good

anish · Post by **anish** » Sat Jun 02, 2007 3:29 pm

Its cool. I have made one and made it in new degisn.

sakhan · Post by **sakhan** » Tue Jun 05, 2007 2:16 am

Thanks buddy for this it is really cool

Vista · Post by **Vista** » Fri Jun 08, 2007 9:56 am

ite really very cool
thanx alot

forex_199 · Post by **forex_199** » Fri Aug 17, 2007 8:24 am

Its cool. I have made one and made it in new degisn.

Gyanu · Post by **Gyanu** » Tue Sep 04, 2007 9:35 pm

that's cool
it's a nice thing to b learned