Kimono
05-02-2011, 05:46 AM
http://i205.photobucket.com/albums/bb209/AnimeLover_031/blinkingeyes.png
This is a tutorial I have created demonstrating the steps I have taken to make a blinking image/avatar in Photoshop. This is my method of doing this, so you don't have to blindly follow everything I say.
Have fun ~
----
P.S. If you don't have Photoshop, you can download GIMP (http://www.gimp.org/) or Paint (http://www.getpaint.net/) as an alternative. I'm not sure if Paint has animation capabilities, but I know GIMP does, however animation is a bit different. More info here (http://www.gimp.org/tutorials/Simple_Animations/).
----
>>>Click<<< (http://fc04.deviantart.net/fs71/f/2011/122/0/1/blinking_tutorial_by_kimono321-d3fedkn.jpg) for old tutorial (:
Under Construction:
Finished product:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/luka2.gif
Step 1: Have an image prepared that you would like to make blink. Make sure to pay attention to the following:
If you are creating an avatar for OS, make sure your image size doesn't exceed 180x300 pixels. If it does, your avatar will not blink D:
Also, if you want to create an avatar with a transparent background and you want to make it blink - then I'm afraid you can't do that (well you can, but I assure you it won't look very pleasing). The only way to achieve this look is to this is to make the background the same as the forum color which is '1b1b1b1b', and then put the rendered image on top.
If you are not making a blinking image for your OS avatar, then forget what I listed above >_>
oh oh, also, if your image contains too many colors and/or gradients, the quality will decrease. Gif images can have up to 256 colors - when it exceeds that, it will only use the more prominent colors.
Once you've met the above criteria, duplicate the image you have two times. You should now have three layers so far.
Step 2: Use the pen tool (press "p" on your keyboard to quickly access it) to trace around the eyelid.
http://i205.photobucket.com/albums/bb209/AnimeLover_031/luka1.png
Once you close the path, right-click and click "Make Selection." A window will popup prompting you for Rendering and Operation options. Set the feather radius to '0' and leave everything else alone.
Now that you have your eyelash selected, copy it (ctrl+c) and paste it (ctrl+v). A new layer should be created with a copy of the eyelids you traced.
Duplicate this layer two times.
Toggle off all of the layers by clicking the eye on the left side of the layer. Toggle all of them off except for the second image layer and first eyelid layer.
---
You should now have 3 layers with the original picture, and 3 layers with the copied eyelid.
It should look like this so far:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/prevwlayers.jpg
---
Step 3: Select the only eyelid layer that is still toggled on. Using the move tool (press "v" for quick access), to drag the eyelid down.
http://i205.photobucket.com/albums/bb209/AnimeLover_031/lukaa2.png
Step 4: Select the only image layer toggled on. Using the eyedropper tool (press "i" for quick access), select a skin color near the eye. Now that you have a skin color, use the brush tool (press "b" for quick access) to paint over the excess eye parts like so:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/lukaa3.png
(lol I laughed a lot when I got to this part. Luka looked under the influence.)
This is a tutorial I have created demonstrating the steps I have taken to make a blinking image/avatar in Photoshop. This is my method of doing this, so you don't have to blindly follow everything I say.
Have fun ~
----
P.S. If you don't have Photoshop, you can download GIMP (http://www.gimp.org/) or Paint (http://www.getpaint.net/) as an alternative. I'm not sure if Paint has animation capabilities, but I know GIMP does, however animation is a bit different. More info here (http://www.gimp.org/tutorials/Simple_Animations/).
----
>>>Click<<< (http://fc04.deviantart.net/fs71/f/2011/122/0/1/blinking_tutorial_by_kimono321-d3fedkn.jpg) for old tutorial (:
Under Construction:
Finished product:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/luka2.gif
Step 1: Have an image prepared that you would like to make blink. Make sure to pay attention to the following:
If you are creating an avatar for OS, make sure your image size doesn't exceed 180x300 pixels. If it does, your avatar will not blink D:
Also, if you want to create an avatar with a transparent background and you want to make it blink - then I'm afraid you can't do that (well you can, but I assure you it won't look very pleasing). The only way to achieve this look is to this is to make the background the same as the forum color which is '1b1b1b1b', and then put the rendered image on top.
If you are not making a blinking image for your OS avatar, then forget what I listed above >_>
oh oh, also, if your image contains too many colors and/or gradients, the quality will decrease. Gif images can have up to 256 colors - when it exceeds that, it will only use the more prominent colors.
Once you've met the above criteria, duplicate the image you have two times. You should now have three layers so far.
Step 2: Use the pen tool (press "p" on your keyboard to quickly access it) to trace around the eyelid.
http://i205.photobucket.com/albums/bb209/AnimeLover_031/luka1.png
Once you close the path, right-click and click "Make Selection." A window will popup prompting you for Rendering and Operation options. Set the feather radius to '0' and leave everything else alone.
Now that you have your eyelash selected, copy it (ctrl+c) and paste it (ctrl+v). A new layer should be created with a copy of the eyelids you traced.
Duplicate this layer two times.
Toggle off all of the layers by clicking the eye on the left side of the layer. Toggle all of them off except for the second image layer and first eyelid layer.
---
You should now have 3 layers with the original picture, and 3 layers with the copied eyelid.
It should look like this so far:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/prevwlayers.jpg
---
Step 3: Select the only eyelid layer that is still toggled on. Using the move tool (press "v" for quick access), to drag the eyelid down.
http://i205.photobucket.com/albums/bb209/AnimeLover_031/lukaa2.png
Step 4: Select the only image layer toggled on. Using the eyedropper tool (press "i" for quick access), select a skin color near the eye. Now that you have a skin color, use the brush tool (press "b" for quick access) to paint over the excess eye parts like so:
http://i205.photobucket.com/albums/bb209/AnimeLover_031/lukaa3.png
(lol I laughed a lot when I got to this part. Luka looked under the influence.)