Create an animated pixel-art character in Photoshop

Perhaps you want to create your own retro style game or help someone with graphics. Then you will need a sprite: a pixel-art style animated in different positions.

Complete this lesson in which I will teach you how to create a cute rabbit with looped animation of running.

If you find it difficult to draw in pixel art style, then use ready-made sprites.

1. Character design

Before the animation, we will create a static drawing, so we need to figure out how our character will look like.

Step 1

This is not the most important step in this tutorial, but sketching is part of my workflow.

I drew a few sketches of the head and chose the most appropriate style.

Step 2

To turn the rabbit into a pixel drawing, open Photoshop and draw the eyes. A sketch we need only to determine the style of the picture.

If you have never done pixel art, then create a new file that is not very large, for example, 400 x 400 pixels. We will work a lot with increasing scale (up to 700%) and use the tool Pencil Tool (P) (Pencil) for drawing individual pixels. I advise you to open an additional window with a working document in which the scale will be 100-200% so that you can immediately see your work in real size without the need to switch back and forth from one scale to one on one document. Thus, you will have two documents open: on one scale up to 700% (working), and on the other – 100-200%.

I do not limit myself to a certain size of the sprite, but I will try to make the character as small as possible, while retaining the most important details. Therefore, the eyes – a good starting point.

Eyes are two simple lines that are close by. Each eye is 3 pixels high and 1 pixel wide, in black.

Step 3

Having finished our eyes, we can continue to draw the nose and other details. It’s okay if at this stage the lines look too simple.

Step 4

Now we smooth some lines. I also added big front teeth.

Step 5

We finish a couple of pixels to create a smile.

Step 6

Next, draw the ears. Now they are directed upwards, so you can leave it, but we will change them a little.

The ears are drawn as narrow as possible with the inner part of the width of 1 pixel and the same contour.

Step 7

One ear draws hanging down.

Step 8

We draw the second ear.

Step 9

We draw big plump cheeks and finish the head.

Step 10

Now we can draw a body. The rabbit will have a humanoid figure. We draw a torso in the form of a drop.

Step 11

Rabbit legs will be short with a big foot. While drawing only one leg.

Step 12

We draw the second leg, but move it slightly to the right so that it does not overlap the first.

Step 13

My legs look slightly shifted, so I moved them one pixel to the left. I also combined the leg with the stomach, removing the pixel between them.

Step 14

Only one arm is visible in the standing position. The hand has the shape of a drop and slightly overlaps the torso.

Step 15

Remove the extra lines on the arm.

The basic outline of our character is ready.

2. Color

At this stage, we will turn the character into a finished static sprite.

Step 1

Choose a color.

What color would you like to paint over the bunny? I chose a yellowish-brown color and filled them with everything except the nose. For fill use Paint Bucket Tool (G) (Fill).

Step 2

Now let’s draw a white belly. Teeth also paint over white. On the nose, add one pixel of pink color, the rest is left white.

Step 3

Now let’s apply the shadows: we add shadows in the darker shade of the base color of the wool in the places where the light falls least. Also this color can add texture on the cheeks.

The leg that is in the background should be darker. Thus, we completely paint the back leg with the color of the shadow, we also do it with the back ear, only at the tip we leave one pixel of the base color.

Step 4

Shade the belly. I added a light gray shade with a light blue tint.

Step 5

Some of the details of the character will look better with less contrast, so I painted over some areas of the black contour with dark brown (for example, neck and face).

I also added more details on the cheeks in dark brown to emphasize their attention.

The standing character is ready.

3. Draw running frames

Now we can add a bit of movement to the rabbit.

You can create a similar animation using any number of frames, but since the character is small, six frames will suffice.

Step 1

Let’s remove the limbs for now.

The head and torso will not change much during the run, so on all frames these elements will be in the same position.

Below we draw a line that will fix the height of the legs and will show the surface along which the rabbit runs.

Step 2

Take Rectangular Marquee Tool (M) (Rectangular selection), select the head and the upper part of the body and shift the selected area by one pixel (for this we activate the tool Move Tool(V) (Move) and use the arrow keys).

Then move the head two pixels to the right.

Step 3

In the previous step, the torso turned out to be slightly stretched. To fix this, squeeze it vertically 1 pixel and edit the outline and fill.

We also lower the body 1 pixel down, because most of the animation legs will be in a bent position, and, thus, they will not be the same in height.

Step 4

We will simplify our task a little and will work only with the legs in the foreground, since for the background they will be identical.

The movement of the leg is like a pendulum: most of the time the leg is bent, except for the first frame, when the character takes a step forward.

Thus, the animation of the movement of the legs will be 6 frames (I advise you to study the finished storyboards running animation). Pay attention to the position of the foot. For clarity, I painted the legs in blue.

Step 5

Next we will work on all six frames.

On the new layer we draw blanks of legs. Note that the legs are not tied to one point on the body. When the limb moves back, its base moves to the left, and when the leg is pointing forward, to the right.

Step 6

Next, perform a sequence of actions to draw the finished version of the leg. To begin with, paint the blue color with wool (for this you can use the tool Paint Bucket Tool (G) (Fill) with the option off Contiguous (Adjacent pixels)) and, instead of drawing a contour around the legs, select the empty area outside the legs with Magic Wand Tool (W) (Magic Wand) and compress selection Select – Modify – Contract (Selection – Modification – Compress) 1 pixel. Then invert the selection Select – Inverse (Selection – Invert) and further tool Paint Bucket Tool (G) (Fill) (Contiguous (Adjacent pixels) disable) fill the selected area with the outline color.

Step 7

The legs are not finished yet, but let’s add a position in the jump on some frames.

We add a jump, because while running the character’s body is not all the same at the same level. Therefore, we raise the torso and head 1 pixel higher in the third frame, where the leg is stretched back and repelled from the ground, and the sixth frame, in which the leg lifts the rabbit up.

Frames with a jump are marked below with purple lines. For other lines we decrease opacity (Opacity) up to 20%, it will be a shadow. In games-platformers, such a shadow is not always needed, but in our case it will make the animation more interesting.

Step 8

To finish the legs, we make the foot more plump, we connect the leg with the body and shade it a little.

Fill the remaining two purple lines with black and also reduce the opacity to 20%.

Step 9

When finished with the legs, copy them and move the copies a few pixels to the right.

Now the picture looks strange, because both legs are directed in the same direction, which is natural for rabbits, as they move by jumping. But our rabbit is a humanoid character and will move accordingly.

Step 10

To create an animation of running, the legs must move in opposite directions, with one leg stretched forward, the second – retracted.

Since we have 6 frames, the movement of one leg on the opposite side will consist of three positions. Rearrange copies of the legs so that the original and the copy were directed in opposite directions.

Layers with copies must be under the layer with the body of the rabbit.

Step 11

To finish the legs in the background, paint over them with a darker shade of the base color, as we did in the static drawing above.

It looks like the finished animation of the legs. Don’t think about the animation process itself yet. First we will finish training, and then we will work on keeping them in a looped run.

[33.gif] – in the original lesson animation

Step 12

Now it’s time to add hands.

Below you can see the draft story of the movement of the hands. They are in a bent position throughout the animation cycle, only straightening out a little on the first frame. But you can try drawing your own hand motion animation.

Step 13

We place our hands on a new layer above the body and fill them with the main color of the rabbit, as we did with the legs.

Step 14

Add volume.

Step 15

And finally shaded to add more volume.

Step 16

Next, duplicate the hands and place a copy of the layer behind the body.

Step 17

Shadow the copies of the hands and swap them so that both hands are directed in opposite directions.

Remember that your arms move in the opposite direction relative to your legs. For example, when the left foot goes forward, the left hand moves back.

This is what the hand animation looks like.

[40.gif] – in the original lesson animation

Step 18

Now add movement to the head, because now it looks too static.

Now we will make the ears move in time with the body. In frames where the rabbit bounces slightly, the ears are pointing down, moving by inertia, despite the fact that the rabbit jumps up.

Step 19

On the next frame after the jump, the ears are less bent and directed forward.

Step 20

Also animate the cheeks. Their movement is similar to the movement of the ears: during a jump, they descend a little lower, then after a jump they rise.

Here is the finished version.

[44.gif] – in the original lesson animation

Step 21

It remains for us to modify the body. First we animate the white belly. While running, the chest turns slightly, and the white spot should react to this movement.

When the front arm is pointing back, most of the spot will be visible; when the arm is pointing forward, we see only a small part of the abdomen.

Step 22

In a static position, it is not necessary to draw the tail, as it can be hidden behind the body. But in running animation, it’s better not to ignore this element.

First, on the new layer, draw a red square to mark the location of the tail. So far, this layer may be above all previous layers.

Step 23

Fill the tail with color, apply shadows and stroke.

Step 24

In the first frame, when the front arm is pulled back, the tip of the tail overlaps.

Step 25

To finish the tail, move the layer to the back and, if necessary, adjust the shadows / details.

We finished work with frames. Here is the finished animation. Additional details make the animation much more interesting, isn’t it?

[50.gif] – in the original lesson animation

Next we will create a looped animation.

4. Create an animation

We have 6 frames with looped run animation. Now we have to glue them together.

Step 1

Copy all frames to a new file.

You need to copy one frame in the correct sequence (from left to right). To copy all layers at the same time, you need to go to the menu Edit – Copy Merged (Editing – Copy merged data). Before copying, make sure that the background is transparent and not filled with color.

The size of the new file should be slightly larger than the rabbit.

Inserting frames, place them in the correct position. The bottom line remains unchanged on all frames, like the nose, except for two frames, where the rabbit jumps 1 pixel.

As a result, you should have only 6 layers, one layer for each frame, the background is transparent.

Step 2

To start creating animation in Photoshop, we need to open the timeline. Window – Timeline (Window – Timeline). On the scale is a button Create Frame Animation (Create frame-by-frame animation). There may be a button instead. Create Video Timeline (Create a timeline for the video) To switch to the animation, click the arrow button and select the desired mode in the drop-down menu that appears.

Step 3

Push button Create Frame Animation (Create frame-by-frame animation), then click on the parameters button in the upper right corner of the scale …

… and choose Make Frames From Layers (Make frames from layers).

Step 4

And, finally, select all frames and, if necessary, change the delay (I chose 0.1 seconds), set the repeat mode to Forever (Is always).

And we get such a funny bunny with running animation!

Now you can use this sprite in the game or export it to a GIF.

Congratulations, now the rabbit can run! He is ready to rescue the princess rabbit and other heroic accomplishments.

This lesson should give you an understanding of the principles of creating sprite design and animation. Now you can draw your own character or use it to play a finished rabbit!

Like this post? Please share to your friends: