Fia - Smiley Tutorial
May 29, 2008 20:47:48 GMT
Post by Administrator on May 29, 2008 20:47:48 GMT
Originally Posted by Fia
What you need:
* a graphics program
* an animation program
* the basic knowledge how to use them.
(I'm using Psp7 an Animation Shop 3)
If you've never created an animation before I recommend that you start out with the Blinkie Tutorial first since I've given a much more detailed description on how to make an animation there.
* I thought we should start with a laughing smiley since they are pretty easy to make. This one is made by Ezboard.
* The easiest way to create an animation is by looking at how someone else has made theirs. That way you'll see how it's constructed. But don't copy their smiley entirely, make something that's just yours and only inspired by someone else's work. (And when you learned how to think "smiley" the one that's 100% you own idea is of course even more fun to do)
* When I open Ezboard's smiley in Animation Shop I'll be able to see how it's created. As you can see it consists of two pictures. If you compare them you can see that the eyes are placed higher and the mouth is bigger in picture two. The display time is set to 10.
* Now it's time to create your own smiley. The first thing you need to do is to create your images in your graphics program. First of all you need a base for all your smileys. You can create one yourself or use one of the bases at the bottom of this post.
* The most common shape for smileys is of course the circle but feel free to experiment with other shapes as well. I created the circle in a layer of it's own and with a darker outline. (I'm showing both the actual size and a "zoomed" in version) I'm using light blue as the background color instead of white since I plan to make it invisible and want to be able to use white in the actual smiley.
* To make the base a little bit more interesting I've used the "inner bevel"-effect on it (You'll find in the menu under "Effects - 3D effects - inner bevel". You have to experiment until you'll find something you like.)
* Then I add a new layer to make the first face in. I'm aiming for picture 1 of Ezboard's smiley, smaller mouth and lower eyes. But of course I want to give it my own touch with different eye shape and a different mouth.
* In layer number four I add the second face with the eyes higher up and a bigger mouth.
* Time to save the pictures. I first make the layer "laugh2" invisible and use "edit - copy merged" to copy all visible layers, and paste it all as a new image that I save as laugh1.gif. And then I create a second image the same way that I name laugh2.gif.
* Now I'm going back to Animation Shop and use the Animation wizard to create the animation. It's important to check "transparent" in the second window in the wizard since you want to be able to give your smiley a transparent background.
[img src="![]()
www.simthing.net/spg/tutes/blinkie15.gif"]
* I'm using the display time of 8 instead of 10 used in Ezboard's animation since I want mine a little bit faster. This is how it will look when you're done.
* Now take a look at your new animation to see if you like it. (View - animation in the menu)
* Now it's time to give the smiley an invisible background. First select both frames (by holding down the ctrl key while clicking on them with the arrow) and then chose "Animation - replace color" from the menu.
* If you hold your cursor over the image it will turn into a dropper, use the dropper to select the background color as the option for "old color". Then check "transparent opacity" under "with" and hit okay.
* Now save your smiley. (You can look for a more
detailed explanation on saving in my Blinkie Tutorial.)
* This is my result!
Now hurry to show me your in Graphics Gallery.
Unfortunately we don't accept new smileys to the forum. Lyran and I are having way to fun creating our own at the moment. But feel free to host your new smiley and use it in you own posts anyway.
* For more complicated and detailed smileys like
and 
you need to change the setting a bit in the optimizing wizard while saving the smiley,you do this under "Customize" in the "animation quality versus Output size" screen.
* Uncheck "write minimal frames" under the "optimizations" tab. You don't have to do this for small and simple animations like this laughing one though.
Feel free to use, edit or recolor these bases as much as you like.
Fia!
What you need:
* a graphics program
* an animation program
* the basic knowledge how to use them.
(I'm using Psp7 an Animation Shop 3)
If you've never created an animation before I recommend that you start out with the Blinkie Tutorial first since I've given a much more detailed description on how to make an animation there.
* I thought we should start with a laughing smiley since they are pretty easy to make. This one is made by Ezboard.
* The easiest way to create an animation is by looking at how someone else has made theirs. That way you'll see how it's constructed. But don't copy their smiley entirely, make something that's just yours and only inspired by someone else's work. (And when you learned how to think "smiley" the one that's 100% you own idea is of course even more fun to do)
* When I open Ezboard's smiley in Animation Shop I'll be able to see how it's created. As you can see it consists of two pictures. If you compare them you can see that the eyes are placed higher and the mouth is bigger in picture two. The display time is set to 10.
* Now it's time to create your own smiley. The first thing you need to do is to create your images in your graphics program. First of all you need a base for all your smileys. You can create one yourself or use one of the bases at the bottom of this post.
* The most common shape for smileys is of course the circle but feel free to experiment with other shapes as well. I created the circle in a layer of it's own and with a darker outline. (I'm showing both the actual size and a "zoomed" in version) I'm using light blue as the background color instead of white since I plan to make it invisible and want to be able to use white in the actual smiley.
* To make the base a little bit more interesting I've used the "inner bevel"-effect on it (You'll find in the menu under "Effects - 3D effects - inner bevel". You have to experiment until you'll find something you like.)
* Then I add a new layer to make the first face in. I'm aiming for picture 1 of Ezboard's smiley, smaller mouth and lower eyes. But of course I want to give it my own touch with different eye shape and a different mouth.
* In layer number four I add the second face with the eyes higher up and a bigger mouth.
* Time to save the pictures. I first make the layer "laugh2" invisible and use "edit - copy merged" to copy all visible layers, and paste it all as a new image that I save as laugh1.gif. And then I create a second image the same way that I name laugh2.gif.
* Now I'm going back to Animation Shop and use the Animation wizard to create the animation. It's important to check "transparent" in the second window in the wizard since you want to be able to give your smiley a transparent background.
[img src="
* I'm using the display time of 8 instead of 10 used in Ezboard's animation since I want mine a little bit faster. This is how it will look when you're done.
* Now take a look at your new animation to see if you like it. (View - animation in the menu)
* Now it's time to give the smiley an invisible background. First select both frames (by holding down the ctrl key while clicking on them with the arrow) and then chose "Animation - replace color" from the menu.
* If you hold your cursor over the image it will turn into a dropper, use the dropper to select the background color as the option for "old color". Then check "transparent opacity" under "with" and hit okay.
* Now save your smiley. (You can look for a more
detailed explanation on saving in my Blinkie Tutorial.)
* This is my result!
Now hurry to show me your in Graphics Gallery.
Unfortunately we don't accept new smileys to the forum. Lyran and I are having way to fun creating our own at the moment. But feel free to host your new smiley and use it in you own posts anyway.
* For more complicated and detailed smileys like
and you need to change the setting a bit in the optimizing wizard while saving the smiley,you do this under "Customize" in the "animation quality versus Output size" screen.* Uncheck "write minimal frames" under the "optimizations" tab. You don't have to do this for small and simple animations like this laughing one though.
Feel free to use, edit or recolor these bases as much as you like.
Fia!