PDA

View Full Version : Photoshop Tutorial: Blinking Eyes



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

Knipyoko
05-02-2011, 06:17 AM
Thanks Kimono! :33 i love you! XDDD I found your avatar really intriguing because of that blinking eyes.

Kimono
05-02-2011, 06:19 AM
No problem ;D

If you have any problems with the tutorial or any questions, feel free to ask ~

Knipyoko
05-02-2011, 06:27 AM
I have. xD this eye blinking magic works with any photoshop products? I have Adobe Photoshop CS4, and I'm about to try this now XD

and does step 1 apply to the original layer? or on frame 1?

Lucky
05-02-2011, 06:32 AM
Thanks ! ;D Useful lol ..

Kimono
05-02-2011, 06:35 AM
I have. xD this eye blinking magic works with any photoshop products? I have Adobe Photoshop CS4, and I'm about to try this now XD

Yup it should, I don't know about PS CS1 though. I used Photoshop CS4 on the tutorial ~


and does step 1 apply to the original layer? or on frame 1?

Well both because Frame 1 is your original layer :)

As long as you have something, preferably eye lids/lashes lol, then youre good.

Ragnarok
05-02-2011, 07:41 AM
Cool tutorial! /no1
I've made one myself just now, though I used a kinda different technique from yours but your way it's still faster. :)

Before and After:
http://i633.photobucket.com/albums/uu59/Korangarai/GuitarGirl.png <---> http://i633.photobucket.com/albums/uu59/Korangarai/GuitarGirl_animated.gif


it's from this wallpaper
http://i633.photobucket.com/albums/uu59/Korangarai/JassBass.jpg

Kimono
05-02-2011, 07:48 AM
ooh :o

What was your method? *interested*

Sora Kasugano
05-02-2011, 07:53 AM
Awesome. I'm still Noob though, My PS Skills aren't that good compared to the others. I only know how to make your Avatar Trasnparent xD

But I'll be needing this Tutorial Soon. Practice makes Perfect, but then again I'm lazy, so why Practice? xD Joke.

Ragnarok
05-02-2011, 07:55 AM
I used a little bit of smudge to blend the colors after I removed the eyelid and the eyelids themselves don't look so good if you leave them as they are after you extract them so I had to draw some areas and fix the hair when the eyes close.

Kimono
05-02-2011, 08:00 AM
@Sora:

Haha don't worry, I totally understand you, I was too lazy/scared to touch photoshop from the beginning too. It was only until I had a sudden urge to photo manip/edit pictures that I started using photoshop more often. I don't think I'm an amazing photoshop user, but because I used it often, I became familiar with the layout and learned a lot of tips and tricks. I might make another tutorial about the layout/tools on photoshop so users can get more acquainted with the interface and start using it more >:D

@Ragnarok:

Ah smudging ~

I don't use that tool often lol. I only use it for blending colors and making tags/sigs. It creates to many problems, well at least for me, XD.

ZenNaari
05-03-2011, 04:28 PM
http://otaku-streamers.com/community/customavatars/avatar11590_9.gif

[EDIT] Put a better BG

I only used Photoshop 6.0 and Photoscape to make this though... the tutorial was helpful...

Kimono
05-05-2011, 04:34 AM
Photoscape? Seems like an interesting image editing program

ZenNaari
05-05-2011, 04:44 AM
I love photoscape... especially the AniGif feature...

Probably unlike other GIF's, it's frame by frame + you can control the duration of each frame...

Cropping each frame so that they maintain a certain memory size or to remove the subs...

It's aweseome...

Kimono
05-05-2011, 04:47 AM
Wow, that's pretty good too considering the fact that it's also free.

xuei0000
05-06-2011, 02:04 AM
WOW~ we have the same method!!! and very nice tutorials :DD

Kimono
05-06-2011, 02:20 AM
Haha really? Well what do you know c:

Thanks ~

hikari89miku
05-06-2011, 08:08 AM
suuuugoooi~!!!

now i know why your avatar blinks xD
thankssssss~!!!!! ^.^

CythilVen
05-09-2011, 02:29 PM
Too bad I can't read the text T_T

Kimono
05-09-2011, 08:52 PM
You can't? Is there too little contrast between the colors? D:

Did you enlarge it?

SkyOrange
05-17-2011, 08:34 AM
Kimono why wont the image blink after uploading it as your avatar?

krishna123
05-18-2011, 01:50 AM
gonna try this kind of editing :o_o: looks cool!

Kimono
05-18-2011, 03:43 AM
Kimono why wont the image blink after uploading it as your avatar?

If the image dimensions exceed 180x300 pixels, it resizes the gif animation and won't allow it to animate.

Sora Kasugano
05-18-2011, 03:46 AM
If the image dimensions exceed 180x300 pixels, it resizes the gif animation and won't allow it to animate.

So in other words, in order to make the Image Blink, you'll have to resize it to the Actual Size of OS which is 180x300 First before making the .gif Blinking Animation.

SkyOrange
05-18-2011, 05:27 AM
LOL thanks its blinking now XD

Kimono
05-19-2011, 09:19 PM
No problem, and thanks Sora ;D

Snoozy19
08-04-2011, 08:34 PM
Pretty good.
I tried using about 8 layers of sighty open-to-close eyelids but the outcome was a .gif avatar that blinks waaaaaay too slow... hahaha

~ Thanks for the tip!!!

Sirsendu
11-13-2011, 12:48 AM
Sexy Work Mate.

Ciloue
01-04-2012, 12:38 AM
umm.. i have a question . .
i cant see this tool box.......
http://i205.photobucket.com/albums/bb209/AnimeLover_031/prevwlayers.jpg

Ciloue
01-24-2012, 03:21 AM
click 'F7' button or go to 'Windows' in your photoshop and click 'Layers'

http://img338.imageshack.us/img338/2453/cs5windows.png
okay..i got that too..but i dont get the pasting and copying thing..and its not blinking....

Kimono
01-24-2012, 03:42 AM
The copying and pasting just makes it easier to keep track of where the eyelid is during the blink. Plus, it is way more consistent and fluid this way.

Hmmm can you take a screenshot of your photoshop window and the layers? I want to see where the problem is.

Kimono
01-24-2012, 04:20 AM
oh god i can't help but think jessica everytime i see kimono's avatar XD
But you know it's Taeyeon O:<
Haha it's cool I like Jessica, too.
---
On another note, I need to find time to update this Tutorial. D:

Ciloue
01-25-2012, 06:55 AM
The copying and pasting just makes it easier to keep track of where the eyelid is during the blink. Plus, it is way more consistent and fluid this way.

Hmmm can you take a screenshot of your photoshop window and the layers? I want to see where the problem is.

i got the layer box,and is there any tutorial on gimp?
when i underline with the pen tool,there's always colors on the inner part TwT

Ciloue
01-25-2012, 06:56 AM
oh god i can't help but think jessica everytime i see kimono's avatar XD

@Ciloue after you use the pen tool to create a path around the eyelid make sure you right click on your selection and click 'make selection'
after that press 'CTRL+ c' and then 'CTRL+v'
okay..ill try (again) and afer that illl just save ..right??

Kimono
01-26-2012, 12:54 AM
i got the layer box,and is there any tutorial on gimp?
when i underline with the pen tool,there's always colors on the inner part TwT
Since you are using GIMP, make sure to read this link (http://www.gimp.org/tutorials/Simple_Animations/) for information about animation.

Anyways, if you could show me how your layers window looks like, I would be able to help you out a lot more.

Ciloue
01-26-2012, 03:25 AM
Since you are using GIMP, make sure to read this link (http://www.gimp.org/tutorials/Simple_Animations/) for information about animation.

Anyways, if you could show me how your layers window looks like, I would be able to help you out a lot more.

uhh.my photoshop box has only layers,channel and action T.T

cycy03
02-20-2012, 12:01 AM
Thank you for the Tutorial~ :D

DarkDenizen
02-20-2012, 05:35 AM
Thanks for this tutorial ^__^

marwis
02-20-2012, 06:57 AM
Thanks for the tutorial ^^

Sora Kasugano
02-20-2012, 07:56 AM
「lol I remember this Thread. I miss Kim-nee's Wild and Awesome Ideas in terms of GFX Creations, she always makes a unique style that makes us wants to follow her Creation, her GFX Trends rocks! xD」

「Well, going to post Old Pics~」

http://i603.photobucket.com/albums/tt111/chris_Xd/denpa4.gif


http://27.media.tumblr.com/tumblr_lixohmrH1D1qbqfjxo1_500.jpg

http://i603.photobucket.com/albums/tt111/chris_Xd/denpa2.gif

^ 「Forgot where I found the Pic of that one xD Oh well, ERIO FEVER <3」

[B]lackNight
09-12-2012, 09:33 AM
thanks alot for the tutorial XD i was just experimenting around just now

elorde99
10-05-2012, 12:37 AM
sugoi. thanks for this cool tutorial. ;D

Shinobi
10-08-2012, 01:15 AM
Wow Thanks ^.^ This is Very useful.

Inouze
01-15-2013, 11:56 PM
No problem ;D

If you have any problems with the tutorial or any questions, feel free to ask ~
how can I save the file it wont work?!

Kimono
01-16-2013, 01:37 AM
What do you mean by it won't work?

You went to File > Save for Web & devices, right?

Josiee
03-04-2013, 11:48 AM
After following all the steps, then what do I do? O.O
i mean after following the last step

39796

even when i saved it (save for web..) it won't blink

Delacruz
03-06-2013, 10:51 PM
wow awesome is it in adobe photoshop?!?!?!

silentcry07
07-02-2014, 04:37 AM
i've tried this and thanks~


http://i411.photobucket.com/albums/pp199/silentcry7/fff.gif