Bridge Fight Board by Daniel Johnson dtjohnsonart.com
Speaker animation
1. Learn the basics of Photoshop animation following this tutorial which shows how to
create a vibrating-speaker animation :D. This effect can also be used on adverts, so that
they'll catch the user's attention.
1. Choose the image you want to animate, I've chose this one:
2. Open it using Photoshop. First, you may want to add some empty margins to the
image. Go to Image->Canvas Size ( Alt+Ctrl+C ). I've added an additional 50px to the
width and height.
2. 3. If you want, you can also add a background layer.
4. Now we need to animate this. The first step in creating an animation in Photoshop is
to open the animation window. ( Window->Animation ). Next, click three times the
"duplicate selected frames" button from the animation window, so you'll have 4 frames
in the end.
3. 5. Duplicate the layer containing the speaker (CTRL+J) and apply Filter->Blur->Radial
Blur using these settings:
6. Now, in the Animation Window, click on the first frame and hide the blured layer (by
clicking the eye icon next to it), do the same for the 3rd frame. Show the blured layer on
the 2nd and 4th frames and hide the second layer.
Your 1st and 3rd frames should look like this:
4. Your 2nd and 4th frames should look like this:
7. If you press the "play" button in the animation window you can already see the
animation, but we still need to edit the delay between frames.
For the first frame choose 0,1seconds, for the third one 0,3seconds and for the other
two leave the delay to 0seconds.
It's up to you to choose the right delays for your needs :D
8. To save the animation go to File->Save for Web and Devices (ALT+SHIFT+CTRL+S)
5. choose GIF and save. To view the animation you may need to open it using a web
browser. Here is final outcome:
If there's anything unclear just post your question in the comment section below :D.
Thanks :).