- Oct 16, 2010
- 4,477
- 1,765
Being bored on an early Sunday morning sucks. Boredom, however, often drives you to do something, from philosophising and pondering on the meaning of life to discovering or developing new talents and creativities. But this is the Graphics Showcase section, not a TV show called Sunday Morning Coffee with Iggy, so I'll refrain from rambling even more.
I don't know how and when it exactly started, but a few months ago I found myself having fun making blinking animations. Not the animations themselves, but the process of making them. I'd take an image of a character I like, make it blink, and use it as an avatar. That's also part of the reason all the new user badges have blinking animations (the other reason is because I was opting for a minimalistic design and thought a little effect would look nice as icing on the cake). Yes, including the Pannya member badge.
In this thread, I'll try to give a basic how-to on creating a blinking animation from a static picture, even though no one asked me to do it. I-it's not like I'm doing this for you, okay. I'm doing this because I want to. Hmph. Oh yeah, please keep in mind that this is quite basic and a rather rough way to do it; you could say this is the lazy man's way or the amateur's way or both. It might not work in all situations, but I hope the pointers I'm going to give here can help those interested improvise where needed. N-not that I care about your endeavours and how well you do! Don't get the wrong idea!
By the way, this tutorial is meant for Photoshop, although I reckon users of other image-editing software like GIMP will have no problem finding all the equivalent tools as I'll only be using basic functions here.
For starters, let's pick an image of a character facing the focus (you) head-on. It's obviously easier to make blinking animations using the face of a character that stares right at you rather than one facing somewhere off-focus or shot from a diagonal angle. Since everyone here is a pervert (except, of course, Monseigneur Checkmate du Innocence), I'll be using a dakimakura cover (in case the phrase "dakimakura cover" doesn't make it clear, the image in its entirety is NSFW, albeit just ecchi) of Melvy de Florencia from Dungeon Travelers 2. For the intents and purposes of this tutorial, let's make the final result suitable for an avatar.
Let's make a 200x200 canvas and put the image on it. Move and resize accordingly.
Mmm. Sensual. But wait, that's not what we set out to do. Besides, you can't make a blinking animation out of an image where no eyes are even shown. Let's try again.
Okay, much better. Don't worry; when we're done adding a blinking animation, we'll make sure her eyes speak a million words in just a few movements and prove to be more alluring than simply emphasising the blush on her cheek. So let's get started, because she's waiting. For you.
Before we continue, I'd like to explain a bit about animations. As I'm sure everyone knows, the common animation is composed of interlinking frames in a transition, which means that a set of static images form an animation. To make a blinking animation, you need to have at the very least two static images: one where the character's eyes are open and another where they're closed. Skilled animators may have no problem working with just those two images and let their magic do the rest to make the transition smooth; however, in this tutorial, we'll be having three images: one with the eyes fully open, one with them half-closed (that's "half-open" to you, optimists), and one with them fully closed.
Having three static images ready is, in my view, a middle ground between having too many of them, which increases the workload needed to prepare the underlying foundation of the animation, or having too few (i.e. just two), which might reduce the overall smoothness in the final animation unless you're exceptionally skilled at handling transitions.
As it stands, however, we only have one image ready, and we need two more to accomplish our goal. Obviously, to make her eyes half- and fully closed, we need to lower her eyelids. To do this, we're going to recreate the skin on her eyelids to cover her eyes with. I'm going to use pen tool for the task. We'll be working with small details, so let's zoom the image in.
Side note: pen tool isn't the only tool that you can use to accomplish this. The reason I prefer it is because magnetic lasso is too unreliable, polygonal lasso demands full concentration the entire time you're making the selection (one misclick and it's all messed up, you need to start over) and therefore too risky, and clone stamp requires a few trials and errors to get right. With pen tool, you don't need to worry about starting over the selection (unless you close Photoshop), and unlike clone stamp, it's easier to make a more precise selection as you control the shape.
We'll 'extract' the skin required for her eyelids from her cheek. Make a selection with pen tool and be careful not to include her blush. (You probably want to 'copy' skin from somewhere else, but I won't indulge. Also, her face is paler than the rest of her body, so if you're thinking what I'm thinking, 'copying' skin from elsewhere will result in colour difference.) Copy your selection to a new layer when you're done.
Now the 'copied' skin is on a new, separate layer. But it's too small to cover her eyes nicely. You have two options here: either duplicate the layer multiple times as needed and arrange them like a puzzle to cover her eyes, or simply resize the patch of skin big enough to cover them. I'm going with the latter for this tutorial, but whichever way you choose, make sure you work with one eye at a time. Don't attempt to cover both eyes at once, because that'll just give you more workload to clean up the mess later.
Yes, some parts of her hair and blush are covered by the 'copied' skin, but don't worry about that for now. We'll get to it later.
Now that we've laid out the skin needed to recreate her eyelids, we need to replicate her eyelashes. We'll use the same process we did when 'copying' skin from her cheek, though we'll need to be more careful and precise here. (Those used to rendering images will find this rather easy.) Hide the new layers and get back to the original layer that contains Melvy's face. Oh, also, by this point, we should make sure to name our layers to avoid confusion later on.
Make the eyelid layers visible again and move the layer you just created (for the eyelashes) above them. We're going to start with making her eyes half-closed first, so position the new eyelashes somewhere in the (vertical) middle of her eyes.
Since we're making her eyes half-closed, we need to delete the lower part of the new eyelid skin. To save time, however, make sure you duplicate those layers first, because we're going to need the uncut version later to make the third image with her eyes fully closed. Set the original eyelid layers invisible and work with the duplicated layers. Make a selection around the eyelashes heading down as shown below.
Depending on the source picture you picked, after the process above, the character's eyelashes may or may not look weird. Chances are they will, because eyelashes are supposed to be in different shapes when your eyes are open, half-closed and fully closed. You may want to tweak the eyelashes to your liking. Personally, I usually simply reverse them vertically when the eyes are fully closed (we'll get to that later) and flatten them to be less elliptical when the eyes are half-closed. This is a bit tricky since there's no defining parameter; what you adjust and how much depends entirely on your taste (and skill).
Before you modify the eyelashes in any way, make sure to duplicate the layer first! There's a limit to how much you can undo your actions in Photoshop, and it's always better to be safe than sorry. To simplify matters in this tutorial, I'll flatten the eyelashes and cut off the parts I consider excessive, like the outer parts. Also, since the new eyelashes make her eyes appear unbalanced (right eye more widely open than left), I'm going to shift the position as well. Here's how her eyelashes look after my adjustment. Try to compare the image below with the previous one above. (Didn't change much, but I'd say they look more balanced now.)
When you're satisfied with how the eyelashes are adjusted and positioned, it's time to clean up the mess!
Generally, when cleaning the mess caused by the excess of the skin 'copied' to recreate the eyelids, there's just one aspect you should always be concerned about: hair strands. Especially bangs, which almost always get covered in the process of recreating the eyelids. Accomplishing this requires rendering skills, and how smooth the final result will be may greatly depend on your rendering experience. One thing to keep you optimistic, though: there's no need to be very precise. While we must keep the original eyelashes (and upper part of the eyes) covered by our replicated 'skin,' you don't need to be very smooth or precise because usually there's a little area between bangs and eyelashes that could tolerate rendering mistakes. (Of course, characters whose bangs reach or cover their eyes are the bane of this optimism.)
In any case, you'll never know if you haven't tried. And if you've come this far, there's no turning back until you get it done! Get that pen tool ready and let's render. Oh, make sure your pen tool mode is set to "shape layers" (I've been using "paths" for this tutorial before this point) as shown below. With this enabled, instead of making a simple selection like before, you'll make shapes when you make paths with pen tool. This will come in handy when we get to making the third image with Melvy's eyes fully closed later: this is a process that will need to be repeated, but since her bangs remain the same whether her eyes are fully open, half-closed or fully closed, you can just reuse the shapes that you'll create now. It'll save you considerable time.
Set all layers invisible but the original and make your way to encircle Melvy's bangs. In the middle of tracing, you may notice that the selection is slowly gaining shape, and with it colour. This may disturb your view or feel obtrusive, so if you want, just set the fill or opacity (whichever will work) of the shape layer you're making to 0%. After you're done forming the shape, you can restore the fill/opacity to 100% if you want. From there, proceed as usual by making a selection out o the shape. Feel free to hide the shape or whatever, just don't delete it 'cause we're gonna need it later.
Remember, we're still working on making Melvy's eyes half-closed. We'll worry about making them fully closed later. Select the two layers containing recreated eyelids that we've edited for the half-closed eyes before and delete parts covered by the selection.
Now set the eyelashes we edited before back to being visible.
There... but she looks like she has a fever. Maybe you're right. I mean, maybe what I thought you were thinking was right. Maybe I should've 'copied' the skin for her eyelids from somewhere else that isn't as pale as her cheek. But no matter! We'll make do. See the narrow areas between her bangs, the ones with darker colour than her newly-constructed eyelids? We're going to overlay that colour on the paler skin to harmonise it. Oh, since we're pretty much done doing separate edits and adjustments to the half-closed eyelids, I'm going to merge the two layers to make it easier to apply layer styling―something we'll use in this step.
Choose the merged layer, right click on it, and choose "Blending Options." Then go to Color Overlay and click the colour panel. This will activate a temporary eyedropper tool, which we'll use to acquire the darker colour of the skin between her bangs as shown below. Pay attention to the eyedropper tool (i.e. my mouse pointer).
Too dark? No problem. Let's try adjusting the opacity of the overlay.
Looks good. And with this, we're done with the second image! Let's move on to the third image, where we'll work on making the eyes fully closed. It looks like Melvy can't bear to wait any longer, so let's get this done quick.
Right, I hope you properly followed my instructions up to this step, because while we technically do need to do the same processes for the third image, we'll manage to save considerable time throughout this step. Since we still have the unresized/unadjusted eyelids we preserved from step #3 , we can start taking care of the eyelashes right away. Hope you still have the unadjusted replica of her eyelashes as instructed in step #4 . We're going to make her eyes fully closed now, so I'll vertically reverse the eyelashes and adjust it like I did in step #4 (flatten, cut off the excessive outer parts, and adjust the position). Again, there's no parameter that defines what's "good" here; you'll need to rely on your sense of aesthetics. This is the only tricky part for the third image.
Now we just need to clean up the excess of the eyelid skin and harmonise it with its surroundings. Hope you still have the shape tracing her bangs that we made in step #5 , because we need it again here.
Merge the eyelid skin layers, make the selection, and apply deletion.
Sweet. All we need to do now is apply the effect layer style we used at the end of step #5 and we'll have all three static images ready. In this case, however, I'm lowering the opacity because using the same opacity as before (33%) makes her eyelids look darker due to the extra exposure of eyelids and forehead fully-closed eyes give compared to half-closed eyes.
Clean up the excess skin below her eyelashes just a little bit and that's it!
I want a Melvy too.
Finally, our static images are ready! We can now proceed to actually making the animation. First things first, we need the animation panel, so go to Windows -> Animation to make it appear. Also, with the static pictures we've prepared, frames will be easier to work with, so we'll switch the view to the frame animation panel instead of the timeline one. (As an aside, as we're done editing the static images, I'm going to merge the layers needed for the second and third images and discard the unused ones. This way, we'll only have three layers to work with: one with Melvy's eyes fully open (the original), one with her eyes half-closed, and one with her eyes fully closed (four if you count the background layer).
There's a wide array of possibilities in composing animations. What you like best entirely depends on your taste and sense of aesthetics. For this tutorial, I'm going to make an animation like I did the new user badges. We'll have 9 frames and make Melvy blink twice per loop. Here's the rough breakdown for the frames:
By the way, we're going to continue working with the image zoomed out back to 100%. I'm sure you've had your fair share of seeing my Melvy up close. Also, such a list may not make much sense without being demonstrated, so let's get to it. Let's start by filling the first frame with the image displaying her fully-open eyes...
...then the second frame with the image displaying her half-closed eyes...
...and the third frame with the image displaying her fully-closed eyes.
Repeat the pattern until all nine frames are filled in accordance with the list.
Now we need to adjust the delay between each frame to make sure the transition is smooth enough. The rule of thumb in adjusting delays is finding the right balance between the smoothness of the transition and the stagnation thereof. Longer delays generally result in a more stagnant transition whereas shorter ones may cause the frames to look like they 'warp' from one point to another. In our case, however, we don't need to worry much about this, as we've taken care of the balance by having three nicely-adjusted static images.
Therefore, for maximum smoothness, we're going to set the delay for all frames but the last to "no delay." We need the last frame as the defining point where Melvy stops blinking and takes a brief rest before doing it again. If the last frame is set to have no delay as well, she will blink continuously with no pause whatsoever, and I'm going to hold you responsible for that if anything happens to her eyes.
Don't forget to set the animation to loop forever instead of just once. An animation that loops just once is kind of pointless (I mean, if you find a particular animated .gif image annoying, just make it disappear by deleting the image or closing your browser tab which has it open or whatever).
Click play on the animation panel to see how the animation turns out! Adjust the delays, frames, etc. as you prefer―the way I did this may not fit all images and animations. In any case, once you're done and satisfied by the result, it's time to save the image into a .gif image! Go to File -> Save for Web & Devices or simply press alt, ctrl and S together.
When it comes to .gif images, there's almost always a need to strike a balance between size and quality. The easiest and most common and way to decrease quality to get a smaller file size through this panel is by decreasing the amount of colours. There are many things that affect a .gif image's size such as frames, effects and the general complications of the image itself which are often the kind of things that can't be compromised. That's why colours are often the easiest bargain to meddle with. For this tutorial, how ever, we're not going to compromise and will save the image in 256 colours.
I don't know how and when it exactly started, but a few months ago I found myself having fun making blinking animations. Not the animations themselves, but the process of making them. I'd take an image of a character I like, make it blink, and use it as an avatar. That's also part of the reason all the new user badges have blinking animations (the other reason is because I was opting for a minimalistic design and thought a little effect would look nice as icing on the cake). Yes, including the Pannya member badge.
By the way, this tutorial is meant for Photoshop, although I reckon users of other image-editing software like GIMP will have no problem finding all the equivalent tools as I'll only be using basic functions here.
For starters, let's pick an image of a character facing the focus (you) head-on. It's obviously easier to make blinking animations using the face of a character that stares right at you rather than one facing somewhere off-focus or shot from a diagonal angle. Since everyone here is a pervert (except, of course, Monseigneur Checkmate du Innocence), I'll be using a dakimakura cover (in case the phrase "dakimakura cover" doesn't make it clear, the image in its entirety is NSFW, albeit just ecchi) of Melvy de Florencia from Dungeon Travelers 2. For the intents and purposes of this tutorial, let's make the final result suitable for an avatar.
Let's make a 200x200 canvas and put the image on it. Move and resize accordingly.
Mmm. Sensual. But wait, that's not what we set out to do. Besides, you can't make a blinking animation out of an image where no eyes are even shown. Let's try again.
Okay, much better. Don't worry; when we're done adding a blinking animation, we'll make sure her eyes speak a million words in just a few movements and prove to be more alluring than simply emphasising the blush on her cheek. So let's get started, because she's waiting. For you.
Before we continue, I'd like to explain a bit about animations. As I'm sure everyone knows, the common animation is composed of interlinking frames in a transition, which means that a set of static images form an animation. To make a blinking animation, you need to have at the very least two static images: one where the character's eyes are open and another where they're closed. Skilled animators may have no problem working with just those two images and let their magic do the rest to make the transition smooth; however, in this tutorial, we'll be having three images: one with the eyes fully open, one with them half-closed (that's "half-open" to you, optimists), and one with them fully closed.
Having three static images ready is, in my view, a middle ground between having too many of them, which increases the workload needed to prepare the underlying foundation of the animation, or having too few (i.e. just two), which might reduce the overall smoothness in the final animation unless you're exceptionally skilled at handling transitions.
As it stands, however, we only have one image ready, and we need two more to accomplish our goal. Obviously, to make her eyes half- and fully closed, we need to lower her eyelids. To do this, we're going to recreate the skin on her eyelids to cover her eyes with. I'm going to use pen tool for the task. We'll be working with small details, so let's zoom the image in.
Side note: pen tool isn't the only tool that you can use to accomplish this. The reason I prefer it is because magnetic lasso is too unreliable, polygonal lasso demands full concentration the entire time you're making the selection (one misclick and it's all messed up, you need to start over) and therefore too risky, and clone stamp requires a few trials and errors to get right. With pen tool, you don't need to worry about starting over the selection (unless you close Photoshop), and unlike clone stamp, it's easier to make a more precise selection as you control the shape.
We'll 'extract' the skin required for her eyelids from her cheek. Make a selection with pen tool and be careful not to include her blush. (You probably want to 'copy' skin from somewhere else, but I won't indulge. Also, her face is paler than the rest of her body, so if you're thinking what I'm thinking, 'copying' skin from elsewhere will result in colour difference.) Copy your selection to a new layer when you're done.
Now the 'copied' skin is on a new, separate layer. But it's too small to cover her eyes nicely. You have two options here: either duplicate the layer multiple times as needed and arrange them like a puzzle to cover her eyes, or simply resize the patch of skin big enough to cover them. I'm going with the latter for this tutorial, but whichever way you choose, make sure you work with one eye at a time. Don't attempt to cover both eyes at once, because that'll just give you more workload to clean up the mess later.
Yes, some parts of her hair and blush are covered by the 'copied' skin, but don't worry about that for now. We'll get to it later.
Now that we've laid out the skin needed to recreate her eyelids, we need to replicate her eyelashes. We'll use the same process we did when 'copying' skin from her cheek, though we'll need to be more careful and precise here. (Those used to rendering images will find this rather easy.) Hide the new layers and get back to the original layer that contains Melvy's face. Oh, also, by this point, we should make sure to name our layers to avoid confusion later on.
Make the eyelid layers visible again and move the layer you just created (for the eyelashes) above them. We're going to start with making her eyes half-closed first, so position the new eyelashes somewhere in the (vertical) middle of her eyes.
Since we're making her eyes half-closed, we need to delete the lower part of the new eyelid skin. To save time, however, make sure you duplicate those layers first, because we're going to need the uncut version later to make the third image with her eyes fully closed. Set the original eyelid layers invisible and work with the duplicated layers. Make a selection around the eyelashes heading down as shown below.
Depending on the source picture you picked, after the process above, the character's eyelashes may or may not look weird. Chances are they will, because eyelashes are supposed to be in different shapes when your eyes are open, half-closed and fully closed. You may want to tweak the eyelashes to your liking. Personally, I usually simply reverse them vertically when the eyes are fully closed (we'll get to that later) and flatten them to be less elliptical when the eyes are half-closed. This is a bit tricky since there's no defining parameter; what you adjust and how much depends entirely on your taste (and skill).
Before you modify the eyelashes in any way, make sure to duplicate the layer first! There's a limit to how much you can undo your actions in Photoshop, and it's always better to be safe than sorry. To simplify matters in this tutorial, I'll flatten the eyelashes and cut off the parts I consider excessive, like the outer parts. Also, since the new eyelashes make her eyes appear unbalanced (right eye more widely open than left), I'm going to shift the position as well. Here's how her eyelashes look after my adjustment. Try to compare the image below with the previous one above. (Didn't change much, but I'd say they look more balanced now.)
When you're satisfied with how the eyelashes are adjusted and positioned, it's time to clean up the mess!
Generally, when cleaning the mess caused by the excess of the skin 'copied' to recreate the eyelids, there's just one aspect you should always be concerned about: hair strands. Especially bangs, which almost always get covered in the process of recreating the eyelids. Accomplishing this requires rendering skills, and how smooth the final result will be may greatly depend on your rendering experience. One thing to keep you optimistic, though: there's no need to be very precise. While we must keep the original eyelashes (and upper part of the eyes) covered by our replicated 'skin,' you don't need to be very smooth or precise because usually there's a little area between bangs and eyelashes that could tolerate rendering mistakes. (Of course, characters whose bangs reach or cover their eyes are the bane of this optimism.)
In any case, you'll never know if you haven't tried. And if you've come this far, there's no turning back until you get it done! Get that pen tool ready and let's render. Oh, make sure your pen tool mode is set to "shape layers" (I've been using "paths" for this tutorial before this point) as shown below. With this enabled, instead of making a simple selection like before, you'll make shapes when you make paths with pen tool. This will come in handy when we get to making the third image with Melvy's eyes fully closed later: this is a process that will need to be repeated, but since her bangs remain the same whether her eyes are fully open, half-closed or fully closed, you can just reuse the shapes that you'll create now. It'll save you considerable time.
Set all layers invisible but the original and make your way to encircle Melvy's bangs. In the middle of tracing, you may notice that the selection is slowly gaining shape, and with it colour. This may disturb your view or feel obtrusive, so if you want, just set the fill or opacity (whichever will work) of the shape layer you're making to 0%. After you're done forming the shape, you can restore the fill/opacity to 100% if you want. From there, proceed as usual by making a selection out o the shape. Feel free to hide the shape or whatever, just don't delete it 'cause we're gonna need it later.
Remember, we're still working on making Melvy's eyes half-closed. We'll worry about making them fully closed later. Select the two layers containing recreated eyelids that we've edited for the half-closed eyes before and delete parts covered by the selection.
Now set the eyelashes we edited before back to being visible.
There... but she looks like she has a fever. Maybe you're right. I mean, maybe what I thought you were thinking was right. Maybe I should've 'copied' the skin for her eyelids from somewhere else that isn't as pale as her cheek. But no matter! We'll make do. See the narrow areas between her bangs, the ones with darker colour than her newly-constructed eyelids? We're going to overlay that colour on the paler skin to harmonise it. Oh, since we're pretty much done doing separate edits and adjustments to the half-closed eyelids, I'm going to merge the two layers to make it easier to apply layer styling―something we'll use in this step.
Choose the merged layer, right click on it, and choose "Blending Options." Then go to Color Overlay and click the colour panel. This will activate a temporary eyedropper tool, which we'll use to acquire the darker colour of the skin between her bangs as shown below. Pay attention to the eyedropper tool (i.e. my mouse pointer).
Too dark? No problem. Let's try adjusting the opacity of the overlay.
Looks good. And with this, we're done with the second image! Let's move on to the third image, where we'll work on making the eyes fully closed. It looks like Melvy can't bear to wait any longer, so let's get this done quick.
Right, I hope you properly followed my instructions up to this step, because while we technically do need to do the same processes for the third image, we'll manage to save considerable time throughout this step. Since we still have the unresized/unadjusted eyelids we preserved from step #3 , we can start taking care of the eyelashes right away. Hope you still have the unadjusted replica of her eyelashes as instructed in step #4 . We're going to make her eyes fully closed now, so I'll vertically reverse the eyelashes and adjust it like I did in step #4 (flatten, cut off the excessive outer parts, and adjust the position). Again, there's no parameter that defines what's "good" here; you'll need to rely on your sense of aesthetics. This is the only tricky part for the third image.
Now we just need to clean up the excess of the eyelid skin and harmonise it with its surroundings. Hope you still have the shape tracing her bangs that we made in step #5 , because we need it again here.
Merge the eyelid skin layers, make the selection, and apply deletion.
Sweet. All we need to do now is apply the effect layer style we used at the end of step #5 and we'll have all three static images ready. In this case, however, I'm lowering the opacity because using the same opacity as before (33%) makes her eyelids look darker due to the extra exposure of eyelids and forehead fully-closed eyes give compared to half-closed eyes.
Clean up the excess skin below her eyelashes just a little bit and that's it!
I want a Melvy too.
Finally, our static images are ready! We can now proceed to actually making the animation. First things first, we need the animation panel, so go to Windows -> Animation to make it appear. Also, with the static pictures we've prepared, frames will be easier to work with, so we'll switch the view to the frame animation panel instead of the timeline one. (As an aside, as we're done editing the static images, I'm going to merge the layers needed for the second and third images and discard the unused ones. This way, we'll only have three layers to work with: one with Melvy's eyes fully open (the original), one with her eyes half-closed, and one with her eyes fully closed (four if you count the background layer).
There's a wide array of possibilities in composing animations. What you like best entirely depends on your taste and sense of aesthetics. For this tutorial, I'm going to make an animation like I did the new user badges. We'll have 9 frames and make Melvy blink twice per loop. Here's the rough breakdown for the frames:
- Eyes fully open.
- Eyes half-closed.
- Eyes fully closed.
- Eyes half-closed.
- Eyes fully open.
- Eyes half-closed.
- Eyes fully closed.
- Eyes half-closed.
- Eyes fully open. Add a delay.
By the way, we're going to continue working with the image zoomed out back to 100%. I'm sure you've had your fair share of seeing my Melvy up close. Also, such a list may not make much sense without being demonstrated, so let's get to it. Let's start by filling the first frame with the image displaying her fully-open eyes...
...then the second frame with the image displaying her half-closed eyes...
...and the third frame with the image displaying her fully-closed eyes.
Repeat the pattern until all nine frames are filled in accordance with the list.
Now we need to adjust the delay between each frame to make sure the transition is smooth enough. The rule of thumb in adjusting delays is finding the right balance between the smoothness of the transition and the stagnation thereof. Longer delays generally result in a more stagnant transition whereas shorter ones may cause the frames to look like they 'warp' from one point to another. In our case, however, we don't need to worry much about this, as we've taken care of the balance by having three nicely-adjusted static images.
Therefore, for maximum smoothness, we're going to set the delay for all frames but the last to "no delay." We need the last frame as the defining point where Melvy stops blinking and takes a brief rest before doing it again. If the last frame is set to have no delay as well, she will blink continuously with no pause whatsoever, and I'm going to hold you responsible for that if anything happens to her eyes.
Don't forget to set the animation to loop forever instead of just once. An animation that loops just once is kind of pointless (I mean, if you find a particular animated .gif image annoying, just make it disappear by deleting the image or closing your browser tab which has it open or whatever).
Click play on the animation panel to see how the animation turns out! Adjust the delays, frames, etc. as you prefer―the way I did this may not fit all images and animations. In any case, once you're done and satisfied by the result, it's time to save the image into a .gif image! Go to File -> Save for Web & Devices or simply press alt, ctrl and S together.
When it comes to .gif images, there's almost always a need to strike a balance between size and quality. The easiest and most common and way to decrease quality to get a smaller file size through this panel is by decreasing the amount of colours. There are many things that affect a .gif image's size such as frames, effects and the general complications of the image itself which are often the kind of things that can't be compromised. That's why colours are often the easiest bargain to meddle with. For this tutorial, how ever, we're not going to compromise and will save the image in 256 colours.
Last edited:
...But it's pointless in my case: Because I've not the soft- and hardware for this...
