Animation: Quick Flashes
Alright, first off we're gonna need an image you want to animate. I'll be using the first icon of the
two just just saw. Open up Photoshop with your image and make sure both your
layers table and
animation table are open. In case they aren't, simply go to your main toolbar and open them through this order:
To open layers table:
Window > Layers
To open animation table:
Window > Animation
Now, we'll need to create two different layers for the flashes you saw in the animated icon. We'll later blend these two
layers together with soem animation to give the effect of "quick flashing lights." Go to your layers table and select this small
button to open a new layer:
After you've done that, just use one of the Photoshop airbrushes to make a white dot
on that new layer you made. You can use those brushes by
selecting them from your brush selector. They'll be labeled as "Basic Brushes."
Once you've made that white dot on your new layer, you'll need to repeat the process
on another layer. Make a
another new layer (using the same steps you learned just now) and make another white dot in the corner opposite your first white dot. You should now
have three layers in your layers table: Background, Layer 1, and Layer 2.
We can finally move on to the actual animating portion of this tutorial. Now look to your animation table you opened at the beginning. Notice it only
has one layer in it? We'll need to make two.
Let me explain: We need two different layers because you cannot animate something with just itself.
One layer will be the first white dot, the other layer will be the second white dot.
Go to the small bar on the bottom of your animation table. Look for this icon and select it.
It will open up a new layer, thus giving you two animation layers:
Go back and select the first of the two animation layers. Once you've selected it, go to your layers table and
make the second layer
invisible. You can do this by selecting the small eye icon to the left of it.
After you've done that, select the
second of the two animation layers and once again look to your layers table. This
time we're going to make the
first layer invisible. Again, just select the eye icon to the left of the layer to make it invisible.
Let me explain: You've now created two animation layers. One with the first white dot showing, the other with the
second white dot showing.
By doing this we can animate the icon so that it will alternate between the two layers and give us that flashing effect.
Once you've done this, we can now "tween" the two images together. Go back to the small bar on the bottom of your animation
table and select the icon with four small circles in it:
It will open up a window asking you how many frames to add. You can choose how ever many you want for different effects,
but for this tutorial I'm just going to add "10."
Click ok, and you will now see your animation table flooded with new layers. Don't worry about editing these, because Photoshop
has already done it for you =D
You're now done with animating! Let's preview how the image will look shall we? Just go to your main toolbar and select:
File > Save for Web
This will open up a preview window with all sorts of settings you can play around with. I wont go into those right now,
but to preview your animation simply look to the bottom right corner to buttons that say "play," "stop," etc. Just press the
play button to play your animation:
Done! If you're pleased with the final result, just save the animation, name it whatever you want, and you're ready to go.
