How to Create an Animated Pixel Art Coin

2
  • Tut

    If you’re interested in creating pixel art video game assets or want to try doing a simple animation then you might find this tutorial useful.

    We’ll be making a spinning coin; an easy but fun, animated asset, always useful for players to earn points in a game.

    1. Draw the Coin

    We’ll be doing 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 up close; to check on progress, you can open a New Window (Window > Arrange > New Window for…) for the same file and cycle 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, meaning in this case 14x14px.

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

    03-draw

    Step 4

    For doing 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 there so the shape can’t be too complex, especially because we’ll make it very chunky so that we can give it an embossed effect to make our coin look really legit. 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 embossed effect. Typically light comes from the top and usually I prefer 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 as the dark edges of the embossed 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 debossed 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 got: 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 on the scaling but we’ll bring it back and we’ll start with 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 be starting 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 needs only be a rectangle with a 2px interior width (pixels inside just to illustrate width.)

    13-spin

    3. Add Color and Detail to Frames

    The more technical aspect is pretty much done, let’s get to the more 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 Frame 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. 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, darker. Just for the bottom few pixels of the edge.

    23-color

    Step 7

    That about finishes up work on the four views of the coin. To spin it completely we only need to take Frame 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 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 by a few pixels the light shading and shrunk by a few pixels the dark. For Frame 5 I replaced with the next darker shade each color on the face.

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

    Wether this was your first pixel art, your first animation or just a help for expanding your graphics library, I hope it was of use.

    Happy pixeling!

  • About

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

  • Comments
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 next notification pause paypal pencil phone pinterest play 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
shopping cart