This tutorial shows how to animate your Web Avatars to make them wink by creating an animated GIF file in a few easy steps.
Here is my source image that we will be using. You want your image sized to meet your website's posting requirements.
The first step is to duplicate the image to a new layer. You can drag the layer down to the new layer icon or right click on the layer and select duplicate layer or any method you wish.
Select either layer (I chose the top layer) and highlight that layer and then select LIQUIFY from the FILTER pull-down menu and you will open the LIQUIFY screen. I used the PUCKER tool and sized the brush as needed to pull the eyelids to a shut position. Play with the different tools to get the desired effect in your image. Select OK when Done to return to the main PS window.
You can use the clone or patch tools if you need further touch-up. When you are satisfied, open the ANIMATION window available in the WINDOW pull-down menu. This will open a small animation window you can size and locate to taste. You will initially see one animation frame in the menu and it will reflect the current layer status you had in the layer palette. Click the DUPLICATES SELECTED FRAMES icon at the bottom of the ANIMATION window (see red arrow) and a second animation frame will appear. You will now make two settings for each animation frame. We will set the layer state for each animation frame and we will set the duration the frame is visible.
1. Select the first animation frame so that the border of the active frame is blue. Go to the layer menu and turn off the wink layer and turn on the eye open layer.
2. At the bottom of the animation frame is the Frame Delay Time where can select and the pull down menu appears and you can set the delay time for that frame. I choose 2 seconds for this animation but you may want longer for a more subtle effect.
3. Repeat steps 1 & 2 for the second animation frame by first selecting the second frame and making the border blue and then turning off the eye-open and turning on the blink layer. Set the time for the wink layer to .35 seconds.
4. Now test your animation by selecting the play button on the Animation menu (black right facing triangle).
When you are satisfied you have the file the way you would like, it is time to save your work as a PSD file to preserve the layers. This allows you to return to your file later should you wish to make additional changes. Then select SAVE FOR WEB & DEVICES from the FILE pull-down menu. You will get the screen shown. Select GIF as your file type and set looping to FOREVER. Check to see your other settings match those shown and then save your file.
Your Finished File can be previewed in you Windows Explorer or when you view the file online. The animation will not be visible if you open the file in Photoshop. Hope you have fun with this one; let's see what you come up with!
