Pin Me

Creating Animated Blinking Eyes with Photoshop 7

written by: Avionne Akanbi•edited by: Rebecca Scudder•updated: 3/24/2010

If you have already created a character with eyes, nose, mouth and hair in any version of Photoshop, why not continue and create a pair of animated blinking eyes in Photoshop 7 to go with it? Creating animated blinking eyes is not as complicated as you may think.

  • 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

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

    BLINK HALF 

    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.

    BLINK FULL 

    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