1. Design & Illustration
  2. Pixel Art

How to Create an Animated Pixel Art Sprite in Adobe Photoshop

Scroll to top
This post is part of a series called Animation in Adobe Photoshop.
Create a Run Cycle Animation From Scratch in Adobe Photoshop
How to Optimize an Animated GIF: 10 Ways
Final product imageFinal product imageFinal product image
What You'll Be Creating

In this tutorial, I will show you how to create and animate a pixel art sprite using just a few simple tools in Adobe Photoshop. In the process, I will cover all of the basic rules that you can apply to your future pixel art illustrations. 

If you want a quick way to find sprites or other game assets for your projects, check out the collection of sprites on Envato Market. There's plenty of pixel art available too.

Sprites available on Envato MarketSprites available on Envato MarketSprites available on Envato Market
Sprites available on Envato Market

1. Prepare Canvas and Tools

Step 1

Select the Pencil Tool from the Toolbar, it will be your primary instrument for this tutorial. Select a Hard Round brush in the Brush settings and apply the settings shown below. Your aim is to make the line absolutely sharp.

Brush SettingsBrush SettingsBrush Settings

Step 2

Set up Pencil Mode for the Eraser Tool and use the same brush settings as below.

Step 3

Turn on the Pixel Grid (View > Show > Pixel Grid). If you don't see this item in the menu, go to Preferences > Performance and turn on the graphic acceleration.

Note: The grid will be seen only on a newly created canvas with zoom level 600% and above.

Show Pixel GridShow Pixel GridShow Pixel Grid
Use Graphic AccelerationUse Graphic AccelerationUse Graphic Acceleration

Step 4

Go to Preferences > General (Control-K) and set up Image Interpolation to Nearest Neighbor. This will ensure that the edges of the objects you work with always stay sharp.

Preferences - GeneralPreferences - GeneralPreferences - General

Go to Preferences > Units & Rulers and choose Pixels in the drop-down menu near Rulers to see all measurements in pixels.

Preferences - Units  RulersPreferences - Units  RulersPreferences - Units  Rulers

2. Create the Sprite

Step 1

Now that everything is set up, we can start creating the sprite. 

Make a sketch of a character with a distinct silhouette, and try not to overload it with many details. It's not important to paint the colors, the outline should be enough, as long as you understand how your character should look. I prepared a sketch of a space trooper for this tutorial.


Step 2

Press Control-T or use Edit > Free Transform to scale down your character to 60px in height. 

The size of the object is shown in the Info panel. Notice the Interpolation setting, it should be the same as we set in Step 4. In this case, it's not that important, as we are only turning a sketch into pixel art, but pay attention to that feature in future when you work with pixelated objects.

Scale Down CharacterScale Down CharacterScale Down Character

Step 3

Zoom in to the image by 300-400% to make it easier to render. Reduce the opacity of your sketch. 

Create a new layer (Layer > New > Layer) and draw an outline of your character with the Pencil Tool.

If your character is symmetrical, like mine is, just create one half, duplicate it, and flip it horizontally (Edit > Transform > Flip Horizontal).

Outline ProcessOutline ProcessOutline Process

Rule of the Rhythm: Try to split complex shapes into simple elements. When pixels in the line form a "rhythm" like 1-2-3 and 1-1-2-2-3-3 the outline looks much better to the human eye than a randomly drawn line. However this rule can be broken if the shape requires it.

Rule of the RhythmRule of the RhythmRule of the Rhythm
Two rhythmic and one randomly drawn line.

Step 4

When the outline is ready, choose main colors and paint large shapes. Do it on a separate layer beneath the one with the outline.

Painting Large ShapesPainting Large ShapesPainting Large Shapes

Step 5

Smooth the inner side of the outline by adding shades of the color.

Adding ShadesAdding ShadesAdding Shades

Keep adding more shades. As you can see, I corrected some shapes and details along the way.

Adding Shades ProcessAdding Shades ProcessAdding Shades Process

Step 6

Create a new layer to add the highlight. 

Choose Overlay from the drop down menu on the Layer panel. Paint with a light color over the areas you want to highlight. Smooth the shape of highlighted area by choosing Filter > Blur > Blur.

Adding HighlightAdding HighlightAdding Highlight

I flipped the painted half horizontally, added final color touches here and there, and merged the layers.

Final TouchesFinal TouchesFinal Touches

Step 7

The character now lacks contrast. Use Levels (Image > Adjustments > Levels) first and then change the tone or halftone with Color Balance (Image > Adjustments > Color Balance) to make warmer and cooler versions.

Tuning With Levels and Color BalanceTuning With Levels and Color BalanceTuning With Levels and Color Balance

I decided to go with the third version. Now let's move on to the animation process.

Final CharacterFinal CharacterFinal Character
Final character with 400% zoom.

3. Animate Your Sprite

Step 1

Create a copy of the layer (Layer > New > Layer Via Copy) and move it 1 pixel up and 2 pixels right selecting Move Tool (V) and using your arrow keys. This is the key phase for animating the running character.

Change the original layer's Opacity to 50% to see previous frame of animation. This is called “Onion Skinning.”

Creating Next FrameCreating Next FrameCreating Next Frame

Step 2

Now bend the character's legs and arms as if it is running.

  • Select the left arm using Lasso Tool
  • Using Free Transform Tool (Edit > Free Transform) and holding Control move the container markers to lead the arm behind the back
  • Select the shank of the right leg and move it down as on the first frame - we need that leg stretched.
  • Select the left leg and move it up - this leg bends up
  • Using Pencil and Eraser Tools, redraw all the elbow parts of the right arm.
Creating Running PhaseCreating Running PhaseCreating Running Phase

Step 3

Now you will need to redraw the new position of the legs and arms as I explained in Section 2 of this tutorial. This is because transforming the legs and arms will distort the pixels, and the shape will no longer be clean.

Finalizing Running PhaseFinalizing Running PhaseFinalizing Running Phase

Step 4

Make the copy of the second layer and flip it horizontally. And now you have one idle position and two running phases. Select each layer and restore its Opacity to 100%.

Flipping Running PhaseFlipping Running PhaseFlipping Running Phase

Step 5

Go to Window > Timeline to show Timeline panel and press Create Frame Animation.

Create Frame AnimationCreate Frame AnimationCreate Frame Animation

In the Timeline panel, perform the following steps:

  1. Choose Frame Delay time 0.15 sec
  2. Click on Duplicates Selected Frames button to add 3 more copies
  3. Change looping options to Forever
Duplicate FramesDuplicate FramesDuplicate Frames

Step 6

To choose the proper layer for each animation frame, click on the Eye icon near the layer name in the Layer panel.

  • 1st frame: choose idle position
  • 2nd frame: choose the second layer
  • 3rd frame: choose idle position once again
  • 4th frame: choose the third layer
Choose Proper Layer For Each FrameChoose Proper Layer For Each FrameChoose Proper Layer For Each Frame

Press Space button to play the animation.

Final Animation PreviewFinal Animation PreviewFinal Animation Preview
Final animation with 100% zoom.

Step 7

Now save your result. Go to File > Save For Web and select GIF format. Scale image size to 300% for better presentation and press Save.

Save For Web SettingsSave For Web SettingsSave For Web Settings

Congratulations! You're done.

In this tutorial, I showed you how to draw and animate a pixel art character in Photoshop. In the process, you learned how to set up your canvas and tools, how to draw your character using the Pencil Tool, as well as how to animate your character using Photoshop's Timeline feature. I hope that you learned something from this tutorial and can use these techniques to create some pixel art of your own.

Final AnimationFinal AnimationFinal Animation
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.