Tutorials

I've had a lot of questions asking how I draw my pixel art, so I've tried to explain my work process here ^_^

Drawing Bases
20th April, 2012

Drawing both a chibi base and larger anime-styled base.

Beginning Pixel Art
4th March, 2008

The very basics of pixelling to get you started making your own pixel art.

How to use Microsoft Paint
3rd March, 2008

Using Microsoft Paint to create your pixel art and pixel dolls.

Basic Pixel Doll Tutorial
5th March, 2008

Step by step examples showing how to sketch and shade a pixel doll.

Shading & Lighting
8th April, 2010

Using basic shapes to illustrate shadow and light placement.

Adding a Pattern
21st January, 2012

Adding patterns when making a pixel doll.

Animation Tutorial with GIMP
27th January, 2010

Introducing animation using GIMP by making a pixel doll blink.

Making a Deviantart Icon
28th January, 2010

Creating a 50x50 icon for use in places such as DeviantArt.com

Palettes and Theme Generator
12th February, 2010

Various colour palettes for pixel art, as well as a random theme generator.

Animation Tutorial with GIMP

27th January, 2010
Intermediate
Animation is one of the most common tutorial requests I get, so I've decided to do a basic one to introduce animating on a blinking doll.

In this tutorial I will be using the free graphics software GIMP to do the animation. Windows users can download GIMP here. At the time of this tutorial, the current version is 2.6.8.
Frames and Frame Delay
The animated pixel art you see on my site are called animated "gifs" - gif is a type of image.

An animated gif is made up of many pictures called frames.

Each frame is slightly different to the previous one and is set to appear for a certain amount of time. This time is called the "frame delay".

Often the frame delay is only part of a second before it moves to the next frame. The shorter the time delay, the faster the animation.
Planning the Animation
Before we start drawing anything, we need to know what we want to make. Blinking is one of the easiest things to start with, so that's what we're going to do.

So, what movements are involved in blinking? Eyes open, eyes closed. Two states and therefore at least two frames are necessary.
Plan A
I've animated the two frames we had in our plan and you can see that this will work as an animation (especially if you want a fast blink), but it still looks pretty static and the animation itself is quite sharp.

To fix the sharp movements, we need to add frames in between.


Plan A.1
Ok, now we've got 4 frames. Eyes open, half open, closed, half open and then it repeats. Comparing the previous example, you can see there's an obvious difference. The transition between frames appears much smoother.
Opening GIMP

With our frames planned out, we'll open GIMP. You'll be greeted by a few windows; your toolbox, layers and the document window (which should be empty).

Because this is an animation tutorial, I'm not going to go into the tools, only using the layers window for animation frames and saving it out.
Adding the Frames

Our step now is to create the document for the animation in the "Document" window. To do this, click on the File Menu and select "New".

The left dialogue box will appear. If you know the pixel size of your animation, add the width and height in. If you don't, estimate and you can trim it down later. Hit ok and your document is ready to draw on / paste frames into!
To the right are my frames, ready to be pasted in separately. I have filled the parts I want transparent with green.

Now, select your first frame (in whatever program you've drawn it in) and "Copy" it (Ctrl+C / Edit->Copy).

In GIMP, paste the frame in, by going to the Edit Menu, down to "Paste as" and across to "New Layer".


That's our first frame.

To remove the green and make it transparent, use the Magic Wand tool. I unticked the "Antialiasing" checkbox in the toolbox because we don't want it. Click on the green areas and hit "Delete". To select nothing again, go to the Select Menu -> None (Shift+Ctrl+A).

Now you can add the remainder of your frames as new layers and make them transparent.
Setting the Frame Delay

All of my frames are pasted in and made transparent. Now I need to delete the background layer. To do this, click on it - the blue means it's the "active" layer. Next, click on the trash can icon to delete it. If you see a checker-board behind your frames, that's fine, it shows the frames are transparent.

To set the frame delay in GIMP, you specify it in the layer name. Double click on the name (in my case, "Clipboard") and type your time in brackets, then hit Enter.

You must write it as ([time here]ms) for it to work.
This is the delay in milliseconds before it moves to the next frame.
  • 1000ms = 1 second.
  • 500ms = 1/2 a second.
  • 200ms = 1/5 a second.
  • 100ms = 1/10 a second.

The most common ones I use are 200ms and 100ms unless I want a frame to stay there longer. I have chosen 1000ms for the first frame, because I want the eyes to be open for a second before closing again.
1 2