medli20's avatar

Pixel art tutorial: Animation

2K 127 54K (2 Today)
By medli20   |   
Published:
© 2012 - 2020 medli20
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)
Image size
600x9431px 956.09 KB
Comments127
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
PR1NCESSGUMMY's avatar
PR1NCESSGUMMYStudent Digital Artist
Thank you dude !  Parry bounce |Pixel test animation| by FlowerButsses
6ALLAN6's avatar
6ALLAN6Student Digital Artist
THANK YOU FOR THIS TUTORIAL!!!But i'll never be good on animation btw so here it is! fav.me/d9wnvus

:3 im not a good artist.
RatchetJak's avatar
RatchetJakHobbyist Digital Artist
I'm sorry, I'm new to this so I just wanted ask what you meant by "Pixeling". Like, are you using the pencil tool to ink over the lineart?
wishbone1017's avatar
how do i transform pixels a bit bigger?
medli20's avatar
medli20Student Digital Artist
If you're working in photoshop, change your transform settings to "nearest neighbor" instead of bicubic. Be sure to only scale in multiples of 100% otherwise your pixels will look ugly as heck when you scale them.
wishbone1017's avatar
i have photoshop 3
pearlabigail13's avatar
pearlabigail13Student Artist
medli20  why is it when i want to move the eyes or free form ( for example ) the skin of my character will move tooo why is it? and i can't hide it so that it looks like blinking please help me!
Banished-Dreams's avatar
Thank you very much for the helpful tutorial!
Please let me know what you think: Proud Paladin by Banished-Dreams
Autumn-Fest's avatar
Autumn-FestStudent Traditional Artist
thank you so much for the tutorial !  ;o;
i followed both of them and managed to make this.......
autumn-fest.deviantart.com/art…
Primeless's avatar
PrimelessHobbyist Digital Artist
so awesome and usefull!

thx for sharing lnowledge!

i'll use it for an RPG Maker project!
firewyrm2018's avatar
firewyrm2018Hobbyist General Artist
ZOMG I KNOW THAT CHARACTER!!
vveeb's avatar
vveebHobbyist Digital Artist
thank youuuu for the tutorial <3 i managed to pull it off with sai and made it a gif in gimp!! jack oh lantern by foIieadeux
Nordeva's avatar
NordevaProfessional Digital Artist
Thank you very much for this useful tutorial!
I managed to do this thanks to your help <3 Toothless Pixel Animation by Nordeva  
Alekto-san's avatar
Thank you! Great tutorial!)
Acruxic's avatar
AcruxicStudent Filmographer
You do the lineart over the colored layers, right?
NamiOki's avatar
NamiOkiStudent Digital Artist
Hey there! I just wanted to stop by and thank you so much for this tutorial. I created this with your help: Thank you! by NamiOki

Keep doing what you're doing, your art is fantastic!
Acruxic's avatar
AcruxicStudent Filmographer
...I only have Gimp 2.8 And Sai oAo would I still be able to pull this off?
CultLamb's avatar
CultLambHobbyist General Artist
I've been looking for an animation tutorial like this for ages!
darocoth's avatar
darocothHobbyist Digital Artist
when i save the optimized version and view it i get these white outlines of boxed that appear and disappear :/ i don't know hat i'm doing wrong...
medli20's avatar
medli20Student Digital Artist
Are you trying to use semi-transparent graphics? .gif files don't support partial transparency, so if you have any stray semi-transparent pixels, it'll convert them to a whitish color. 
darocoth's avatar
darocothHobbyist Digital Artist
ahhhh i might have some translucent pixels hiding in my image..... thankyou!
foxwizard916's avatar
foxwizard916Hobbyist Digital Artist
thank you for this lovely informative tutorial. here is my first animation using your method.
foxwizard916's avatar
foxwizard916Hobbyist Digital Artist
i used photoshop elements
Crystallized-Rose's avatar
Crystallized-RoseHobbyist General Artist
You have very gorgeous art and these animation are so pretty, I've always wanted to do one and now I could ;w;
Thank you very much for making this tutorial :iconbrohugplz:
Here is what I have made with its help:
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In