HOME | DD
medli20 — Pixel art tutorial: Animation
Published: 2012-06-23 06:32:35 +0000 UTC; Views: 62490; Favourites: 2592; Downloads: 928
Redirect to original
Description
Addendum: if you have Photoshop CS2 or later, you can do pretty much everything you see above without the use of Imageready. Just go to Window > Animation and you'll get the little animation timeline window thingy.Also, if you want to upload animations on dA WITHOUT using a preview image, your animation MUST be 150x150 pixels or less. /end addendum
Since I've been getting asked a lot about how I animate my pixel arts, I figured I'd make a tutorial about how I do it. This tutorial only covers Adobe Photoshop and Adobe Imageready, but if you have any similar programs, you may be able to tweak this a bit to fit your program a little better.
I may end up making another animation tutorial later, using a freeware program since I realize that Adobe programs are not exactly cheap to acquire (unless you pirate it, which I really don't recommend doing). Anyway, have this for now.
Basic pixel art tutorial: (I may have to revise this later; it's a bit old)
Finished animation: (click to view)
Related content
Comments: 128
Thanks for the nice step by step here. It boggled my mind how people made these at first! It makes so much sense now! : )
👍: 0 ⏩: 1
I'm glad this helped you understand the process a little easier!
👍: 0 ⏩: 0
Thanks for this! These aren't as amazing as yours, but I tried xD [link]
👍: 0 ⏩: 1
This is a late reply, but HOLY CRAP that is awesome! Seriously, I absolutely LOVE the way you shaded the metal, and the animation itself looks fantastic as well! Great job
👍: 0 ⏩: 0
[link] I used your tutorial here~
👍: 0 ⏩: 1
This is a really late reply, but wow, that's a pretty awesome sprite; the movement is so fluid! Nicely done
👍: 0 ⏩: 1
do you have any advice on animating the flippy hair and stuff to make the bounce look better?
👍: 0 ⏩: 0
Thank you for the thorough instruction ^ ^ I was curious, if the character I'm drawing has longer hair in the back, and some hair over her shoulders as well, what would you recommend I do with the layers? ;u;
👍: 0 ⏩: 1
Have a layer for the hair in the front and a layer for the hair in the back-- maybe even a separate layer for the head. If you use Photoshop, you can link all the layers together so that they move as a single unit while still maintaining that layered look.
Good luck!
👍: 0 ⏩: 1
Ah thank you! I didn't know there was a linking thing, haha. I'll go do that!
👍: 0 ⏩: 0
Hello, do you know if there's ani anti-aliasing option in Paint Tool Sai? Because I prefere that programme and I can't find the option anywhere
👍: 0 ⏩: 0
Nice work! Though quick word of advice: when you do pixel art, you generally want to work in smaller sizes. If you make the image too big and then scale it down to make it look smaller, it's no longer considered pixel art. Otherwise, it looks great!
👍: 0 ⏩: 1
can i use CS6 for these? my brother says it's hard to find CS1 right now....
👍: 0 ⏩: 0
Around what size do you make your canvas?
I can never find a good size for my pixel art in photoshop. :3
👍: 0 ⏩: 1
No bigger than 150x150 pixels for dolls. Sometimes I do larger sizes for "challenging" pieces, but I don't typically go over 150x150 pixels. When I first started doing pixel art, though, I stuck to a canvas size of 50x50, and that was fairly easy to work with as well.
👍: 0 ⏩: 0
Wuts the program? ;0;
I MUST KNOW~~
👍: 0 ⏩: 1
I used Adobe Photoshop for the pixel art itself, and Adobe Imageready to do the animation.
👍: 0 ⏩: 1
._. i think I'll stick with paint
*TABLE FLIP
👍: 0 ⏩: 0
would making pixel works on photoshop? cuz i dont know which tool should i use 0A0
👍: 0 ⏩: 1
I don't know how to ANIMATE things in Photoshop, but you can definitely do pixel art in Photoshop. You should use the pencil tool, which might be hidden behind the brush tool. Click and hold the brush tool to access the pencil tool.
👍: 0 ⏩: 1
that helps alot thank you! ^^
👍: 0 ⏩: 0
About to try this...
I can feel the failure already sinking in. LOL.
But thank you so much for the tutorial! <3
👍: 0 ⏩: 1
its done XD ill make more later
👍: 0 ⏩: 0
Oh my gosh! Thanks so much! I love you! You saved my life
👍: 0 ⏩: 1
Haha, I'm glad you found it useful xD
👍: 0 ⏩: 0
Thank you so much! This should be helpful when I get my Adobe Imageready!
👍: 0 ⏩: 1
*gaspers* Okay-- I'm jus' curious-- Do i need the EXACT same programs you used? :<
👍: 0 ⏩: 1
Not really. You can use any old animation program as long as you adjust the method I described above to fit to your program's parameters.
👍: 0 ⏩: 1
really?
I've just used Pixlr.com to color and do the layers. I dunno if i can animate it though :<
I've been using iaza.com to animate things :I
👍: 0 ⏩: 0
wow this is extremely helpful oh my gosh thank you
👍: 0 ⏩: 0
Isn't pixel art supposed to be made with MS Paint?
👍: 0 ⏩: 1
Not necessarily. Pixel art can be made in any program that has pixel-by-pixel editing capabilities. Personally, I prefer to use a program that has the ability to make transparent backgrounds and use layers, because it makes the animation process a hell of a lot easier.
👍: 0 ⏩: 1
Well I guess for making animation it does take a better program.
👍: 0 ⏩: 0
OMG YES PLEASE. I have some pixel art lying around that I've never had the confidence to animate properly. I shall try this out! Thanks *_*
👍: 0 ⏩: 1
| Next =>