Favorites
Comments
Share

If you’re interested in creating pixel art video game objects or you want to try making a simple animation then you might find this tutorial useful. We’ll be making a spinning coin; an easy but fun, animated object, always useful for players to earn points in a game.

1. 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 400x300px.

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.

01-draw

With those settings, make a selection measuring 16x16px.

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 1px and delete the result. You get a circular outline!

02-draw

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 14x14px.

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

03-draw

Step 4

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

04-draw

With that we’ll draw a shape in the middle of our coin. We only really have 12x12px 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.

05-draw

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.

06-draw

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.

07-draw

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.

08-draw

2. 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.

09-spin

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%.

10-spin

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!

11-spin

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.

12-spin

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.)

13-spin

3. 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.

14-color

Here it is applied to the inside of the coins.

15-color

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.

16-color

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 1px. Then when you apply the color with the Paint Bucket the outlines will be outside the selection and won’t be altered.

17-color

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.

18-color

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.

19-color

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

21-color

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.

22-color

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

23-color

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.)

24-color

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.

25-color

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.

26-color

4. 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 16x16px 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.

27-animate

Step 2

Then push that Create Frame Animation button.

28-animate

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

29-animate

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!

30-animate

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.

31-animate

And now the coin is done!

32-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!

Help us to improve tutpad

What's your opinion of this tutorial?

american-express behance calendar check cloud comment cross disabled down download dribbble envelope error exclamation facebook file filter folder globe google+ heart heart home inbox info instagram interogation laptop left linkedin lock logout marker master-card minus prev notification pause paypal pencil phone pinterest play forward plus prev refresh resize right save search settings share star stop stumbleupon support tablet tag thumb-down thumb-up time trash twitter unlock up upload url user visa warning youtube zoom-in zoom-out fire menu-burger eye paper-plane shopping-cart subtitles icon photo vector mockup video flame copyright volume list fullscreen stats earnings receipt bug replay beginner intermediate advanced English clip French Spanish happy neutral-happy neutral neutral-sad sad premium spinner cookie credit-card