|
 Welcome to my little pixel animation tutorial! Here you will learn how I draw and animate my pixel characters, using Adobe Photoshop CS (to draw), and Adobe ImageReady CS (to animate). I do use my tablet through out this tutorial, but you ARE able to do this without one! Oh, and take note that this tutorial is not as near detailed as my drawing tutorial, so if you get a bit lost on what a tool is or how you do something, go check out my other tutorial. ;) First off, here is a little helper of some the most common tools used (atleast, by me) in Photoshop (the tool bar). To change one to the next (such as the paint brush to the pixel brush), right click the button and choose the one you want.  Save your work often. Use the undo button if something doesn't look right (the undo button is the Edit > Step Backward command)! Don't be plain... Be creative and fun! :D For zooming in and out, to see full view, double click the magnifying glass.  Make a new canvas, at size 100x100 (that's the common size). Yes, it's small, but pixel is small. If you make it too big, depending on what you draw, it may not look as good. First sketch your character neatly, on a new layer. I used size 3 brush (sharpened, non pixel (meaning with the paint brush), with tablet), using a light colour. Once you have your sketch nicely done, think about what you want to animate on it. I chose to animate the foot and make the ear twitching. You may do an eye blinking, a foot twitching, a tail flicking, or if you want to get into detailed animation, you can make the whole character move in a motion (but that takes a lot of work). Here is my final sketch (left).
 Create a new layer. Now take your pencil/pixel brush, set it to colour black at size 1.  Now outline your character neatly. Don't try to get perfect lines right away. First we need to get the outline down, then we can start erasing the ugly pixels. When outlining, don't outline every single line, for we only have so much room. Remember, we can get fold lines and darker shadows with the shading, so don't think everything needs to be outlined. Here is the messy version of the outline (left). This isn't very nice. So, we want to clean it up a bit. Erase pixels which are touching each other on the sides, mostly. This step may take a while. When it's all fixed up, it should look like this (right).
 Now, if you colour so that each different colour is a new layer (which is the best way to colour ;3), make sure you put all the layers in a set. Click the set button (which is in your layers tool box, at the bottom, which looks like a folder), then drag the outline, and layers in there. Name this set MAIN ANIMATION. This will later come in handy when animating, because you will have to make a few copies of the whole animation, then tweek one little thing at a time. This is what the colouring should look like (right).
 For the shading, I suggest you use my pixel shading tutorial, located HERE. Just be sure not to put too much contrast in the shading and highlights, or it would hurt the eyes. To add more life to the pixels, I suggest colouring the outline a shade darker then the colouring. This also helps with the smoothness. Just add very suttle shading and highlights, for you don't want to over poser it. Here is the final product (left).
 Now, duplicate the MAIN ANIMATION layer set, and rename it EAR TWITCH. Erase the ear which will be animated, sKetch where you want the ear to twitch, outline it, and colour it in. Make sure the shading and colouring matches what you did for the previous ear, or then it will look wrong. Also, it has to be the right shape. Now you have two versions of the character. One with the old ear, and another with the ear position changed. Here is the new one (To hide the other layer set, just hit the eye so it is invisible) (right).
 Keep in mind that we haven't even started the animating part. We are still in the drawing phase!
Next is to make the other image with the foot moving. Duplicate the MAIN ANIMATION layer set again, and rename it FOOT MOVEMENT. After you finish redrawing the foot in the new position, we are now done the two things we will animate! This is what the new foot looks like (left). Now, this part gets a bit tricky if you aren't familiar with Adobe ImageReady. Click the transfer button to go to ImageReady (bottom on tool bar). This transfers the psd file right into ImageReady, for those who are too lazy to go find the program and open it. ;P First click the eye to make the Background invisible (so your pixel animation can be transparent). You can tell if the background is transparent if you see a grey and white checkered background. Click the MAIN ANIMATION layer set (all sets should be closed, so they are not open, so it's easier to work with). Make sure all the sets are invisible, except for the MAIN ANIMATION set. Now, on the animation tool bar on the bottom, click the new frame button (the sheets of paper button). Now you are on frame two. Make the MAIN ANIMATION set invisible (while frame two is still selected), and make the EAR TWITCH set visible. Now make another new frame, and make the MAIN ANIMATION visible again, making the EAR TWITCH invisible. And do the same steps again, so the character's ear twitches twice. Now, this time we will make it's foot move. Apply the same steps. Except maybe you only want it's foot moving once, or three times, or more. Remember, this animation will be on a loop, so if you want it to move it's foot continuously, then just do one MAIN ANIMATION frame, and one FOOT MOVEMENT frame, and there you have it. :3). Remember to save your work constantly! Now to apply the timing of the animation. Under each little image in the animation tool bar, there is a time (0 sec. is what it says). click the time, and you will be able to select your own timing. This you will be able to play with, to get the right timing for your movements. As you can see, if you just press the play button, it moves really fast! So you can slow it down, and experiment with the timings of each movement. Once you get the right timing, click the arrow in the top right corner of the animation tool bar, and click Optimize Animation. Make sure both boxes are checked off, then hit ok. Then go File > Save Optimized As... and save it as gif. And there you go! Now you may make your own pretty and fancy pixel animations! :) If you would like to download the psd file of my finished version of this animation, you may by clicking here: DOWNLOAD. Save it to your computer, then open it in your photoshop or imageready. Have fun, oh and please don't steal it, heh! If you have any questions about the tutorial, or anything you would like me to add, please e-mail me at tropic_butterfly@hotmail.com! Thanks!
|
