Insturctions - Blog Posts

How to do a pixel animation!

This tutorial will show you how to do a small pixel animation in Photoshop! Of course, this means you will need Photoshop to do this and I also recommend that you have a Wacom tablet. I would also recommend this tutorial for beginner animators, young and old alike!

I chose to do this tutorial as I recently learned how to do it and am pretty proud of myself for it and was hoping you guys might want to know too! For this tutorial I’m just going to do a simple gif of a blinking eye, nothing too complex!

I am kind of bad at tutorials so sorry if this one isn't the best...

STEP 1:

Open a canvas with these settings! 100 X 100 in pixels is best to get the pixel effect!

STEP 2:

Select the brush tool! You do this by hold clicking the pencil and choosing the icon with the paintbrush on it!

STEP 3:

Open a new layer! You do this by clicking the button I circled!

STEP 4:

Click this button! It will turn the timeline into an interface that’s easier to manage!

(There was an error that happened here that I can’t seem to fix... sorry!)   

STEP 5:

Now for the fun part! Draw your design and when your done, click the circled button to create a new frame! You can make the eye in any style you wish, or follow my style!

STEP 6:

Draw the previous design onto the new canvas, but make it move a slight bit. This will make it move when you play the finished result! The smaller the adjustment is, the smoother the animation will turn out but this will mean more work. When you are finished drawing this frame, make another!

STEP 7:

Simply repeat 6 as many times as you need to!

STEP 8:

Now to save your animation!

Click file, and then “save as”.

STEP 9:

Name your animation and save it in the Photoshop (PSD) format, then hit the save button! Depending on how long your animation is will determine the time it takes for your file to save, so you will need to sit tight if you’ve made an animation with a ton of frames!

STEP 10:

If you want to make your animation a gif, click file and then export.

From there, click “save for web (legacy)”. After clicking the button, this window should appear.

If you export it as 100 X 100, it WILL come out really small, like this.

 but if you want to make it bigger and still keep the pixel format, I recommend changing it up to 300 X 300. You might lose some of the pixel format by making it bigger however...

Congratulations! You have successfully made a small gif of a blinking eye and on the path to create many more wonderful creations! Have fun!