Blue Eyes Tag

I wrote this tutorial on my own.  Any similarity to another tutorial is purely coincidental.  I claim the copyright to my tutorial.  You are free to do whatever you please with what you make, but please do not take my tutorial.  Do not send the tutorial through email.  Only share my link.

This tutorial is intended for a beginner to learn about creating an animation .  If you have any questions, please feel free to email  me.

To do this tutorial you will also need Photoshop CS.  I used CS 2.  You may download a free trial at Adobe.

Remember to save as a .psd file often!

Download the eye tube/image by right-clicking on the link and choosing Save Target As.

1.  Open the eyes image.  In the top menu, click Image > Duplicate.  Close the original.

2.  In the top menu, click Layer > New > Layer.  Call this layer Background.

3.  In the Layer Palette, Drag the layer down to the bottom.

4.  In the top menu, click Edit > Fill.  Click on Color in the Use Drop-down menu.  Choose a color that would be close to a skin color.  I chose #EAD0B5


5.  Choose the lasso selection tool.  This may be "hidden" with the Box Selection tool.  Just right-click on the rectangle selection tool and choose lasso.  Draw a selection around the edge of the color of the eye.

6.  In the top menu, click Image > Adjustments > Hue and Saturation.  Place a check in the Colorize & Preview boxes.  Play with the Hue, Saturation, and Lightness settings until the bottom preview line is the color of your choice.  Here are the settings I used to get my blue.

7.  In the top menu, Select > Deselect

8.  In the Layer Palette, Right-click on the eye layer and choose Duplicate Layer.

9.  Be sure that the duplicate layer is highlighted in the Layer Palette.  Click on the Eye of the second layer to HIDE that layer.

10.  With the Lasso tool, draw a selection around the closed eye.

11.  Press the Delete key on the keyboard.

12.  Draw a selection around the open eye.

13.  In top menu, Edit > Copy

14.  In top menu, Edit > Paste.  This pastes the eye as a new layer. 

15.  In the top menu, click Edit > Transform > Flip Horizontal.

16.  If necessary, use the mover tool, to finish moving the eye into position.  Your graphic should look like this.

17.  In the layer Palette, HIDE the bottom two layers by clicking on the eye.

18.  In the top menu, click Layer > Merge Visible

19.  In the top menu, click Layer > New > Layer

20.  In the top menu click Select > All

21.  In the top menu, click Select > Transform Selection

22.  Drag the center node inward on each side to bring the selection in about 5 pixels.  You're going to make a border, so try to make each side the same width.  Press the CHECK MARK when satisfied.

23.  In the top menu, click Select > Inverse

24.  Flood-fill this border with a color or gradient of your choice.

25.  Now let's resize.  In top menu, click Image > Size.  Change the width to 300 pixels.

26.  Use the text tool and any font/size/color to type in your watermark (my Dragon Breath)

27.  In the Layer Palette, HIDE the bottom 3 layers by clicking on the eye.

28.  In the top menu, click Layer > Merge Visible

29.  In the Layer Palette, Click on the eyes to UNHIDE every layer.

30.  Click on the icon at the bottom of the Tool menu to transfer your image to Image Ready.

31.  IN IMAGE READY, click on the side arrow menu on the Web content dialogue box.  In this menu, click on Palette Options

32.  In the Palette Options Box, place a check by Include Animation Frames, and then choose your Thumbnail Size.

33.  In the top menu, click Window > Animation

34.  And the animation frame box should appear.  At the top right of the animation frame box, click on the side arrow menu and choose Copy Frame.

35.  Click on that arrow again and choose Paste Frame, Paste After Selection.


36.  Click on the first frame.  In the Layer Palette, HIDE the 2nd layer by clicking on the eye.

37.  Click on the time display down arrow (circled) for the first frame.

38.  Choose Other.

39.  Set the Delay = 0.3 seconds

40.  Now click on the second Frame.  In the Layer Palette, HIDE the third layer by clicking on the eye.

41.  Click on the time down-arrow for the 2nd frame.  Choose Other.  Set the delay = 0.9.  We want the eyes to stay open about 3 times longer than the closed eye to give a natural appearance of winking.

42.  Click on the Play button and watch your animation.

43.  If you are satisfied, then click on file > Save Optimized As...   to save this as an animated gif.





Tutorial Index


 Please do not remove this tutorial from my site.  Share my url.