- slide 1 of 3
Giving an Image Blinking Eyes
Have you noticed that your animated website character is sort of staring at the audience, when they enter the website? Well that can look quite rude. How can we fix this and make your character have an animated blink? After all, blinking can make a character more lifelike and personal. Animated blinking can be done using Photoshop 7 tools. The process is fairly simple once you get started; the primary thing you need is to already have the character created, and the rest we will take care of in the following tutorial.
The following Photoshop tools will be used in this tutorial. Magic Wand, Eyedropper, and the Paint brush.
Create a Character
1. If your character has a background, you will want to remove the solid background by clicking on the magic wand tool and selecting the background. Once the entire background is selected, hit Delete on the keyboard.
Begin the Blink
2. We are now ready to create the illusion of blinking. You need to make sure your image is in RGB mode, then create a new layer (Layer, New, Layer). The only way to create a new layer is in RGB mode. Choose the eyedropper tool and click on the character's skin. This will make your foreground color the same color as the skin, which is what we want.
3. We are now ready to make the half closed eyes on our character. You need to grab your brush tool and set it to a basic round brush at 4 pixels in size. Then on your new layer, paint a half moon or half closed eyelid on top of your characters eyes. Make sure you do this for both eyes, and they are relatively the same size.
Completely Close the Eyes
4. Now we want to create the eyelids closing even further. Duplicate the layer you just painted (Right-click and choose "Duplicate Layer". Now, paint more of the eyes closing on this layer.
Repeat this process once more to close the eyes completely. Duplicate the layer and paint the remainder of the eyelids closing over the eyes. Now you will have 3 layers. The eyes half closed, a quarter closed, and completely closed.
- slide 2 of 3
Now we will use Macromedia Flash to see our animation blink.
5. Save each image separately by clicking on the eye icon on the Layers menu, as a jpeg image. Name each file in a sequence manner like 001.jpeg, 002.jpeg and 003.jpeg. This is easier for Flash to import.
6. Open Flash and click on Import>Images. You will be asked if you would like to import it as a sequence. Choose Yes, and all 3 images will be imported.
7. Click on the Play button and watch your character's animated blink. Congratulations!
- slide 3 of 3