Motion Graphics: Animate a Pixel Art Coin

Draw the Coin

We’ll be making our coin in 16x16px size, which was pretty standard for the old pixel art games. Let’s start drawing.

Step 1

In Adobe Photoshop create a New File, larger than 16x16px so to give you enough room to work, let’s say 400x300 px.

Zoom in to over 500% (preferably a multiple of 100%) …we’ll be working very closely; to check on progress. You can open a New Window (Window > Arrange > New Window for…) for the same file and switch between windows, instead of zooming out and back in.

We’ll draw our circle with the Elliptical Marquee Tool, without feathering or anti-aliasing.

With those settings, make a selection measuring 16x16 px.

Step 2

Fill that selection with black or a very dark shade of your liking with the Paint Bucket Tool. Contract the selection (Select > Modify > Contract) by 1 px and delete the result. You get a circular outline!

Step 3

Repeat the above steps for an inner circle just one pixel shy of coming into contact with the outer circle, so, in this case 14x14 px.

The resulting circle seemed a little bit too blocky for me so I edited it.

Step 4

For the actual pixel by pixel work we’ll use the Pencil Tool, set to 1px size and Normal Mode.

With that we’ll draw a shape in the middle of our coin. We only really have 12x12 px to work with, so the shape can’t be too complex, especially because we’ll make it very chunky so that we can give it an relief effect. I chose a plus sign.

Step 5

With a new color (any color that stands out will work for now) we’ll draw the highlight for our relief effect. Typically light comes from the top and usually I prefer that it comes from the left so the sign gets this shading on its top and left edges.

Step 6

We’ll keep the black for the dark edges of the relief effect and simply remove all the pixels in between with the Eraser Tool (set to Pencil Mode).

I also erased all the pixels that were in conflict; the corners where the light and dark met.

Step 7

Let’s give a similar effect to the inner circle of the coin. But this will have a inverse effect, so the light will hit the bottom and right edges.

Create Additional Angles

We’ll be spinning the coin by drawing it in four angles. One we already have: the front view. We’ll also need an edge-on view and in-between those two we’ll need two more views.

Step 1

Make a copy of the front view coin and Scale it horizontally (Edit > Free Transform) with Interpolation set to Nearest Neighbor to about 70%. This will be the frame that follows the front view.

Step 2

The frame that follows that will have to be even narrower so we’ll make another copy of the original front view coin and Scale that to about 35%.

Step 3

And these will be the two new views, we can call them Frame 2 and Frame 3.

A lot of detail was lost in the scaling but we’ll bring it back and we’ll start restoring the outlines.

I gave the wider of the two a bit of extra width that will allow to still keep some of the inner lines of the coin separate. It will also improve the motion because –getting a little technical here– the coin shouldn’t actually look 1/3 narrower after spinning 60˚ from the front view. Not sure exactly how much narrower it had to get per step but this will work!

Step 4

With our outlines drawn we can start to show an extra dimension for the coin, we want a slightly chunky coin, one that’s plainly visible even in the edge-on view. For Frame 2 the edge will barely start to show so we’ll just extend the outline on the right side by 1px. While for Frame 3, we’ll give the edge an extra 2px.

Step 5

We have three frames but we need one more. Luckily, it’s the easiest one!

It’s the edge-on view and it only needs to be a rectangle with a 2px interior width (pixels inside just to illustrate width.)

Add Color and Detail to Frames

The technical part is pretty much done, let’s get to the artistic one.

Step 1

Let’s pick a color for our coin. The traditional choice: gold.

A 40˚ hue is not too yellow and not too orange, just right for my taste. Its saturation isn’t 100% because that would make it darker and we want it to gleam.

Here it is applied to the inside of the coins.

Step 2

We’ll need a lighter shade of the gold color for the highlights. As that color already had 100% brightness the only way to make it lighter is by lowering its saturation. You can also make the hue a little bit (like 5˚) yellower.

To replace the old color in one click just use the Paint Bucket with Contiguous unchecked.

Step 3

The black will be replaced by a dark gold shade. A bit redder in hue, with some more saturation and lower brightness.

To leave the outlines intact you can command-click the layer containing the coins, which gives you a selection matching all contents, then contract that selection (Select > Modify > Contract…) by 1 px. Then when you apply the color with the Paint Bucket the outlines will be outside the selection and won’t be altered.

Step 4

Now that we got our color in it’s a good time to fix Frames 2 and Frame 3; they had a bit of a mess on the face of the coin.

For Frame 2 we can clean up and pretty much copy the same details from the front view coin, only covering less space horizontally.

Step 5

For Frame 3 we can’t do the same, there’s just not enough space for much detail but we can still clean it up.

And we can show the inner circle rim, and hint at details of the sign in the middle.

Step 6

Now working on the updated line-up again. We’ll give the edge its own shading. Remember that the edge is visible on three of the frames so it should apply equally to those three. The colors I’m using for it are the main gold color for the top, lighter area, and the darker shade for the lower area.

And I’m adding one more shade, a darker one. Just for the bottom few pixels of the edge.

Step 7

That about finishes up our work on the four views of the coin. To spin it completely we only need to take Frames 2 and Frame 3, duplicate them and Flip them horizontally (Edit > Transform > Flip Horizontal).

This gives us a loop. Frame 2 became Frame 5 and after that we go right back to the front view and that’s the full animation (unless you wanted your coin to have a different design on the opposite side, in which case you’d need double the frames and a bit of extra work.)

Step 8

We won’t do a different design on the opposite side of the coin but we still have details to cover. Flipping the frames made the shading on the face of the coins not match with the other frames, so carefully Select the face of the coin in Frame 5 minus the edge and outlines and Flip that horizontally. Repeat for Frame 6.

Step 9

To finish the work on the coins we could try to add some sort of gleaming effect. There are many ways to do that but they can affect the readability and simplicity of the coin so I opted for some subtle shading, making the face of the coin slightly lighter on Frame 3 and darker on Frame 5. For Frame 3 I enlarged the light shading by a few pixels and shrunk the dark also by a few pixels. For Frame 5 I replaced each color on the face with the next darker shade.

Animate the Frames

We’ve completed the frames; our coin is ready to spin!

Step 1

Create a New File with a transparent background and 16x16 px dimensions. Here you’ll paste the frames one by one from the front view to Frame 6.

Open the Timeline (Window > Timeline) and set the button in the middle to Create Frame Animation.

Step 2

Then push that Create Frame Animation button.

Click on the top right button of the panel and from that menu select Make Frames From Layers.

Step 3

Then set the Looping Option to Forever and give all frames a 0.1 (or 0.2) second delay.

Press play and watch your little coin spin forever!

Step 4

When watching your coin in motion, are there any pixels that stand out? Does anything look like it moves the wrong way? Now’s when you do the final touchups.

I cleaned up some of the shading on the faces.

And now the coin is done!

You’re ready to use your frames in a game or export the animated file as a GIF. It’ll be tiny. But you can always enlarge it: change the Image Size (Image > Image Size) to anything over 300% (but a multiple of 100%) setting Resample Image to Nearest Neighbor, and then export. Then enjoy your creation and show it off!

Achievement Unlocked!

Awesome, you finished the animated coin! Your game characters can now earn points… just like you just did!

Whether this was your first pixel art, your first animation or just helped you expand your graphics library, I hope it was of use.

Happy pixeling!