Subscribe Via RSS

3827 Subscribers

Subscribe Via RSS
Subscribe Via Twitter


Subscribe Via Twitter
Pump Up The BASS!

January 6th, 2008 in Photoshop Tutorials by Richard Carpenter

Pump Up The BASS!

1 Star2 Stars3 Stars4 Stars5 Stars32 Votes, Rating: 4.44
Loading ... Loading ...

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.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.


Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

45 Responses to “Pump Up The BASS!”

  1. ADMIN says:

    goto “file > save optimised as”

    select your destination

    then click save

    hope this helps

  2. punkshal says:

    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

  3. punkshal says:

    thanx…it really worked…this is wat i came out with

  4. punkshal says:

  5. Adam says:

    Looking good, punkshal!

  6. ADMIN says:

    nice to see other peoples results!

    good job ;)

  7. Matt says:

    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 says:

    What up guys!!

  9. ABdullah says:

    COol one dude Worth readin..

  10. atmosphere says:

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

    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 says:

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

  12. Ryanhami says:

    Cheers For that tutorial, its great.

  13. Brainz says:

    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 says:

    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 says:

    SniperFox: Thanks for the help! :D

  16. Vipin says:

    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 says:

    goto “file > save optimised as”

    hope this helps

  18. weldon says:

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

  19. Long nguyen says:

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

  20. dark_ninja says:

    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 says:

    Very Good Idea ;) COOL !!

  22. regidan says:

    very easy tut man thanks this my outcome lol

  23. iNck says:

    very nice tuts…

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

  24. ADMIN says:

    indeed you can, just need to do it in flash

  25. digital_rave! says:

    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..

  26. Great tutorial. Great site :) *bookmarked*

  27. ricky says:

    When i use the pen tool to circle the speakers it turns the speakers whatever color my color swatch thing is.
    im using cs2

  28. ADMIN says:

    thats because ur pen tool is set at using shape layers.

  29. Fervox says:

    Wow, I did it!, thanks!!

  30. Laggerko says:

    toto uz je cool

  31. jay says:

    Crazy Tut!!!
    How can I save to put in Myspace? If you can?

  32. alex says:

    nice tutorial
    all you need is some music

  33. Lisa says:

    Wow! That was easy! I can’t believe I got done in a flash! That was a great tutorial!

  34. Seong says:

    This is awesome but change the car!!!!

  35. Ok…lol this is crazy but i have Photoshop CS5, the newest one, and i am trying to follow these steps, but im a beginner so i need it exactly STEP by STEP ahaha like for starters, the layer part, i really can’t understand it…can someone help?

  36. harjit says:

    hey i dont have a “save as optimized”, how do i save it otherwise?

  37. Aaron says:

    What program are you working with?

  38. harjit says:

    im working with cs4?

  39. Aaron says:

    @harjit: Check out this link. You will choose Save for Web and Devices —

Leave a Reply