  Here’s a bit of a tricky part. Duplicate layer “mouth A.?Call it “mouth B.?Wasn’t that hard? Just kidding, keep reading. Zoom out (or zoom to) 100%. (Yes it does matter that the zoom is at 100%. Make sure you’re at 100% zoom!) Now that you’re at 100% zoom (for the fourth time) select your layer “mouth B?and nudge it up one pixel (or one nudge... if that’s a unit of measure) by pressing the Up Arrow key once. Once? Yes, only once. Control click on layer “mouth B?(hold down the CTRL key and click on the layer “mouth B?in the layer palette) to load the layer’s selection. Now go to the Layer Palette and click on the layer “mouth A?(with your selection of layer “mouth B?still selected). Now click on the button “Add layer mask?at the bottom of the Layer Palette (with the layer “mouth A?highlighted in the Layer Palette). You should be, by default, on the layer mask of the layer “mouth A.?Hide the layer (be warned: this image animates?give it a second or two) “mouth B.?Hold the CTRL key and press the “I?key to invert the layer mask. Did it change? Hopefully it did. If not, you made a human error. Read this step over again a few times and try again. If you’re still having problems, email me. |
| step 11 | |  Well, it’s all smooth sailing from here. You’ve got one smiley face, now go forth and conquer your smiley in other expressions. Mess around, make them with strange faces, it can be fun. Once you’re done, resize them (the big *.jpg versions, or the stroke will make the eyes bulge out and the body stand out too much) and resave them (as little *.jpg versions). Oh, one last thing, enjoy your new Photoshop skills, your new pimped up forum emoticons (or whatever you chose to use them for), and your stay at Pimp My Com. Peace. |
Animate Your Emoticons! 
| step 1 | | In this tutorial you will be learning how to animate emoticons if you want a more interactive environment for, say, a forum, or a news program, or something of the sort. To begin, you should already have the *.PSD files for your emoticons. If you haven't yet built your emoticons, then I've already written a tutorial on how to do so. Check it out by clicking the link below.
Tutorial: Make Your Own Emoticons.
(Before we begin, let’s go over some basic terms I’ll be referring to in this tutorial. When I say “Action,?I mean an action that the smiley will be doing, such as the right eye winking, the mouth opening, or an eyebrow raising. It’s not a real term that Photoshop or ImageReady use, it’s just a term I’ll be using to refer to a set of layers and ImageReady frames. “Frames?are ImageReady frames (see step 5) and “Layers?are, well, Photoshop layers. Now let’s begin.) |
| step 2 | |  Plan! Okay, now that you have your emoticons all created and ready for animation, open up the *.PSD file of the smiley you want to animate. Now, in your head, map out which parts of your smiley you want to animate. For example, if you just want a simple two-frame animation of the smiley’s mouth opening and closing, or if you want the mouth to gradually open and the eyebrows to rise, spanning many frames. Think for a bit... and... okay! I'm going to make my winking Froggy Smiley actually wink at you! Here we go. |
| step 3 | |  Organize! (Click on the little image to your left for the full version.) First outline the layers that you want to change. Maybe rename each one to “ANI_1_#layer?where “ANI?stands for “ANIMATED,?and ??is the frame number in the animation (for ImageReady), and ?layer?is the layer name before you renamed it. Go to the layer of the first action you wish to make animated (I’m going to choose the right pupil first). Go to it and either duplicate the layer and edit it from there, or redo it on a different layer (it might be easier to redo it). Use skills you’ve learned in the previous tutorial and make either a gradual change to the new action you want your smiley to be doing, or just a simple, two-framed action, where the first action’s layer is the original action and the second action’s layer is the second action. The easiest way to do this is to separate your layers into folders, or “Layer Sets.?It’s not required in this tutorial, but it just makes things easier. On the Layers Palette, click the button that says “Create a new set.?/a> Rename that folder (layer set) to the name of the action that will be taking place, for example, if you are making your smiley wink as I am, call it “winking,?or something. Organize your Layers Palette how you wish, if you wish, then place the layers that pertain to that action in that action’s folder (i.e. “winking?. |
| step 4 | |  Create! Now create layers for each frame of each action you want to take place. Start by doing one frame of one of your actions at a time. I’m going to go to my “Winking?folder and make a new layer for each frame of the action that will appear on ImageReady. Check it out, this can’t be explained much more thoroughly in words. (that image is an animated GIF, so give it time, and watch it through a few times.) Also, I did it with my folder “Smiling,?in which the smiley’s mouth changes a little. Just remember that if you have more than one action, make sure there are the same number of layers for each action (so the number of frames in ImageReady match the number of layers). |
| step 5 | |  Animate!! Click the button on the bottom of the Tools Palette that says “Jump to ImageReady.?It, believe it or not, will send your document to Adobe ImageReady. Now go to the ImageReady window. This part is pretty simple, despite your first guesses. Now that you’re viewing your image in ImageReady, Create as many frames as you have layers for each action (remember, there should be the same number of layers per action...). For example, if you have three actions (right eye winking, mouth opening, and eyebrow raising) each with 5 layers a piece, they you’ll create 5 frames. But first, on your first frame only show the first layer of each action (hide the rest). Now we’ll make our actual animation! Duplicate Frame 1 and hide the first layers. Unhide (show) the second layers of each action. Kinda get where I’m going with this? If you do, good. Do this for all of the layers. For the third frame, hide the second layers and show the third layers, and so on and so forth. If you don’t get it, read this step over a few times. If you still don’t get it, feel free to e-mail me. Now you should have as many frames as you do layers for each action.... If you do, then your emoticon should animate! But don’t get too excited, we’re not done yet  . Once you have the frames set, play around with delay time (the time, in seconds, that the frame will delay before going to the next frame). If you want your animation to move rather quickly (it tends to look smoother this way), keep the delay time at 0, or no delay time (you can’t have negative values for delay time  ). So you’ve got your animation. But if you want it to do the animation and then go back to the way it was (in my case, I’m going to make my emoticon wink at you, then go back to smiling, so it can loop!). Select all the frames except for the last one (click on Frame One and hold Shift and then click on the second to last frame... I have 5 frames so I clicked on 4) and Copy the frames. Now select your last frame and click on the little blue arrow in the Frames Palette and choose Paste Frames and a Dialog box come up. Choose “Paste After Selection (Insert new frames after last selected frame).?But make sure if you choose this one that you have the last frame selected. Choose that option and press OK. Now you should have your new frames selected. That’s good! But... they’re backwards, right? (Because you want to do the action backwards now....) Luckily in ImageReady they have a solution for this. Click the little blue arrow again and choose Reverse Frames. Cool! Now it does the action forward and then backwards to how it was. I think this pretty much concludes our tutorial. I don’t think I need to tell you that you should think out of the box and play around with it to get the results that fit you the most (even though I just did -_-). Just some final notes though: if you want it to be noticed that your emoticon did the certain actions, then set about a 1 Second delay time on the last frame before the repeated, reversed frames (so it’s about the middle frame) so it pauses at that frame. Well, best of luck to you! If you have any questions comments or concerns... well, if you have any comments please post them below but feel free to e-mail me with questions and concerns! Later kids. |
|
Start by making the body of your smiley. Rename the only layer you should have to “body.?Select the elliptical marquee tool. Now based on what your idea(s) are, make a selection. If you want to make typical yellow smilies, hold down the Shift key so you make a perfect circle. Otherwise, play around a little. Now fill it in with a color (simply a color, do not worry about gradients or shading for now), yellow, green, blue, maybe, whatever floats your boat. 
Deselect and zoom in a little bit. (Perhaps to 400%?) Create a new layer and call it “eye left.?Now select the elliptical marquee tool again (if it isn’t already chosen). We’re going to make some eyes for your smiley. If you are going for the typical yellow smiley face hold down the shift key and make a small selection inside of the smiley’s body. Otherwise, play around until you get something you like. Make only one selection, and fill it (most prefer a white for an eye color). 
Once you have one eye made, it’s time to make the other one. Duplicate layer “eye left?and name it “eye right.?Choose the move tool and hold Shift and slide it to the right a little bit. Now chances are they won’t be even, and you may need to make the selection again. Don’t hesitate to start over; I’ve noticed that when you do little things like this over (now that you know what it should look like) it tends to be better, however don’t let this get out of hand. Maybe try this a few more times. And don’t be discouraged that you didn’t follow directions or something because you don’t see a grey background in your image as in the picture above. You don’t need to do this; I just added that in so you could see the whites of its eyes. (How clich?) 
Now it’s time for some styles. You should have three layers, “body,?“eye left,?and “eye right.?Select the layer “body.?Click on the “Add a layer style?icon in the Layer palette. We’re going to give it an inner shadow, an inner glow, and a stroke. Let’s do them in order. First go to inner shadow. Give it some settings like this. For an inner glow something like this. For a stroke maybe something like this. For the stroke you can play around a little bit, maybe change the color to a darker version of the color you used for the actual body, up the stroke weight, or keep the black but turn down the opacity so it looks like a grey or semi-transparent. Use whatever you think fits your smiley best (naturally). 
Now select your layer “eye left.?Let’s give this layer an inner shadow, and inner glow, and a stroke, just as the body. Use values similar to that of the body. Here are some things to keep in mind about the eye’s style. If your eye goes out of the area of the body (like in my image above), try to keep the stroke on this layer equal in color and opacity to the stroke of the layer “body?so the image will flow. If your eye stays inside of the body area you don’t necessarily need a stroke on it (since the eye would generally be smaller since it has to fit inside of the smiley, the stroke might make it stand out too much, or may hide the eye altogether). Also keep in mind that you don’t necessarily need to have an inner shadow. You could just keep a glow. (You might consider this if your eyes are smaller in size.) 
Copy the layer style of the layer “eye left?(right click on the layer “eye left?in the Layer palette and choose Copy Layer Style). Paste the style onto the layer “eye right?(right click on the layer “eye right?in the Layer palette and choose Paste Layer Style). I do this just in case you make a human error while trying to duplicate the style exactly. (I wouldn’t blame you; I’d probably do it too.) Also it saves time. 
Let’s make pupils for your smiley’s eyes (keep in mind the pupils of the eyes will vary in your smiley’s expression). If you’re going to make a typical smiley face, make a new layer (make sure it’s above the layers of your eyes) “pupil left,?and play around with the line tool. Typically the weight of the line would be 1 (that’s “one? pixel (type in ? px?in the Weight box). Over the left eye make a line down or a line across or whatever you think looks best. Again, feel free to try the Erase and Re-try method a couple times if you didn’t get the look you wanted the first time. Now duplicate this layer, “pupil left,?and call the new one “pupil right.?Again, hold down the Shift key and slide the pupil over on top of the right eye. Cool beans. 
discuss this topic to forum