Pump Up The BASS!

Posted on January 6th, 2008.

9 Votes, Rating: 4.11

 Loading ...

Learn how to create animated vibrating speakers.

Open up adobe photoshop with the image you want to animate.

Now select the pen tool OR your desired cutting tool and draw around each speaker, i find it best to use the pen tool.

Copy your speakers twice onto a new layer, label them speaker 1 and speaker 2.

Select the speaker 1 layer goto “filter > blur > motion blur” dont blur by more than 10 pixels.

Press ok to apply the blur, repeat this step for layer speaker 2 but only this time CHANGE THE ANGEL of the motion blur. Once you have blurred both speaker layers hide them by clicking on the little eye icon. Now goto “file > edit in image ready”

If its the 1st time using image ready, your animation window may not be open so goto “window” at the top and see if there is a tick next to “animation”. Your layout should look like this, althou ive moved the 3 boxes together as these are the only things we need to use, ive also labelled the icons we will be using so use the below image AS A REFERENCE.

You will already have one frame in the animation window, we need to duplicate this “4″ times so click layer one then click the duplicate frame button 4 times. You should now have 5 frames.

Select frame 2 and unhide speaker layer 1.

Click layer 4 and unhide speaker layer 2.

Now on layers 2 and 4 click where it says “0 sec” there should be a little black arrow. On layers 2 and 4 set the delays to 2.0 sec.

Now you can click play at the bottom of the animation window to see what it looks like. Heres how mine looks.

You can adjust the rhyem of the bass by changing the delay time and adding more frames. You could even turn it into a signature.

Tags: Animation, bass, image ready, speakers

25 responses so far!

Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!

• 1 punkshal ~ Jan 7, 2008 at 6:17 pm

  yeah thank you….its good….but how do i save the file …should i use photoshop or imageready for saing the file?…and i mean the animated file….
  hope u hit me back soon

• 2 ADMIN ~ Jan 7, 2008 at 6:19 pm

  goto “file > save optimised as”

  select your destination

  then click save

  hope this helps

• 3 punkshal ~ Jan 7, 2008 at 7:53 pm

  thanx…it really worked…this is wat i came out with
  [IMG]http://i179.photobucket.com/albums/w287/punkshal/19679_l.gif[/IMG]

• 4 punkshal ~ Jan 7, 2008 at 7:54 pm

• 5 Adam ~ Jan 8, 2008 at 3:04 am

  Looking good, punkshal!

• 6 ADMIN ~ Jan 8, 2008 at 6:45 pm

  nice to see other peoples results!

  good job

• 7 Matt ~ Jan 8, 2008 at 8:18 pm

  Hey, I see you got a nice Animation tuts on bass but I think what you did is you made the bass animated in every direction.
  

• 8 Holtadit ~ Jan 9, 2008 at 2:08 pm

  What up guys!!

• 9 ABdullah ~ Jan 11, 2008 at 10:23 pm

  COol one dude Worth readin..

• 10 atmosphere ~ Jan 16, 2008 at 7:33 pm

  Copy your speakers twice onto a new layer, label them speaker 1 and speaker 2.

  hi
  iam new here plz help me how to copy the speakers into the new layer i tried all the shortcuts and i get nothing plz help me
  thank you

• 11 Lucky ~ Jan 19, 2008 at 4:38 pm

  Thx…………… Nice Tutorial Keep it up…

• 12 Ryanhami ~ Jan 20, 2008 at 1:59 pm

  Cheers For that tutorial, its great.

• 13 Brainz ~ Jan 23, 2008 at 7:55 am

  Erhm, i know this sounds strange, i have photoshop cs3, and i think it did’t came with a imageready, there’s no file>edit in imageready, and i can’t find it anywhere on my pc, something wrong? It is a separate program?

• 14 SniperFox ~ Feb 3, 2008 at 12:46 pm

  Brainz: Photoshop CS3 has basically absorbed ImageReady CS2. Everything you could do in ImageReady, you can now do in CS3. It works the exact same way.

  The only difference is when you get ready to save, instead of going to “File>>Save Optimized As..”, you go to “File>>Save For Web & Devices”

  To bring up the animation window, head to “Window>>Animation.”

• 15 Brainz ~ Feb 9, 2008 at 6:14 am

  SniperFox: Thanks for the help!

• 16 Vipin ~ Feb 23, 2008 at 8:33 am

  Hello,
  This tutorial cant give Idea how to save this animation.I tried to save it as .gif in imageready , but option is not available.
  please rectify my problem as soon as possible.

• 17 ADMIN ~ Feb 23, 2008 at 10:30 am

  goto “file > save optimised as”

  hope this helps

• 18 weldon ~ Feb 24, 2008 at 7:34 am

  nice . ..its easy. .making this is fun . .

• 19 Long nguyen ~ Mar 10, 2008 at 8:42 pm

  Everytime i draw on a different speaker the one i draw on the lines always disappear.can you help me please?

• 20 dark_ninja ~ Mar 19, 2008 at 11:07 pm

  the same effect can be created in Adobe Flash,

  [1] draw a black oval/circle
  [2] delete the inside fill,just the outside outline
  [3] covert it to a movie clip

  [4] go inside movie clip, and insert keyframe on 10
  [5] change the line depth to 10
  [6] convert it to a graphic
  [7] add a blur filter

  go back to main stage, insert it above a speaker and the effect should work!

• 21 Mosha Metal Revenger ~ Mar 30, 2008 at 6:48 pm

  Very Good Idea COOL !!

• 22 regidan ~ Apr 13, 2008 at 11:38 am

  very easy tut man thanks this my outcome lol

  http://i146.photobucket.com/albums/r255/reginald1_2006/bass-tut.gif

• 23 iNck ~ Apr 25, 2008 at 4:21 pm

  very nice tuts…

  btw, any chance that u can put music in it?

• 24 ADMIN ~ Apr 25, 2008 at 4:43 pm

  indeed you can, just need to do it in flash

• 25 digital_rave! ~ Apr 30, 2008 at 10:00 am

  dude! im using cs3, and the problem is..when is save it in “File>>Save For Web & Devices” the animation did not work..someone help..