2D will never die

A Basic Sprite Tutorial

Here’s a basic runthrough of how to turn your drawing into pixel art using some Photoshop or GIMP tricks.

Step 1: The Drawing

Note how there aren't any mask details and how the hands are nice and simple

Note how there aren’t any mask details and how the hands are nice and simple

A tablet is nice to have for drawing directly into an art program like Photoshop. Otherwise, scan a drawing with heavy pencils or inked lines. If you want to imitate a specific game style, use an enlarged sprite as reference for body proportions and width (which unfortunately I didn’t do with this sketch). Keep details to a minimum so that you don’t clutter things up when you shrink it.

Time: varies

 

Step 2: Resizing

Don't resize with constrained proportions - stretch and squash to match your target's proportions

Don’t resize with constrained proportions – stretch and squash to match your target’s proportions

Find a sprite similar to the size (or pose) you want to copy. Shrink the drawing down and simultaneously make it as wide as it needs to be to match, if you didn’t work it out in step 1. Note that in this sketch, I want about the same height but a tad wider.

Time: 30 seconds

 

Step 3: Sharpening

Use Photoshop's or GIMP's Threshold tool to save yourself a ton of cleaning time

Use Photoshop’s or GIMP’s Threshold tool to save yourself a ton of cleaning time

Merge the layer with the resized linework onto a layer with a solid white background. Go to IMAGE > ADJUSTMENTS > THRESHOLD in Photoshop or the equivalent in GIMP to thin the linework down to pure black and white pixels. Make sure you’re zoomed up close to see the pixels best. Keep all your original details as understandable as possible so you don’t need to refer back and forth to your original drawing too often.
This step will make cleaning the lines and filling in color easy and save you a ton of time over cleaning by hand.

TIME: 10 Seconds

 

Step 4: Cleaning

Sharpen the outlines until they're 1 pixel wide. Don't be afraid to break some outlines, and don't worry about finer details yet

Sharpen the outlines until they’re 1 pixel wide. Don’t be afraid to break some outlines, and don’t worry about finer details yet

Make a layer just for the lines (delete all white). Zoom in and clean up the outlines. If you ‘re in to breaking lines, this is the place to do it. It isn’t time to work on the fine details yet (again, mask and hands) – just start giving yourself anchors for the coloring.  When finished, lock the layer.

TIME: 10-20 Minutes

 

Step 5: Fill-tool the Flats

Flat colors are filled in - in this case the shadow colors

Flat colors are filled in – in this case the shadow colors

Fill in flat colors on a layer underneath the lines. Work out details of the outfit, etc, but don’t do any shading. Light will be added after. This step really gives spriting the ‘comic book production’ feel. Special note: Some people prefer using the light area’s colors for their flats, then adding the shadows after. This will produce a different end effect, so experiment.

TIME: 2 or 3 Minutes

 

Step 6: The Shading

Save time and get good colors by using white on layers set to Overlay to brighten shadow flats

Save time and get good colors by using white on layers set to Overlay to brighten shadow flats

Right now you have a layer for lines and a layer for flats. Here’s where Photoshop saves you some major time. Insert two layers between the lines and flats. Change them to Overlay style and make the upper one 50% opacity. Select a 1 or 2 pixel pencil and start putting down some whites. Instant lighting through your colors.
Note: Work with the 100% opacity layer first.  When you’ve got the shading down about how you like it, use the magic want tool to select the non-white areas. Then move on to the 50% layer for the mid-shading (after hiding the wand’s marching ants). You don’t want the two layers to overlap their whites or you’ll get extra highlights.

TIME: 30-90 Minutes

 

Step 7: Shading Check

Check the details of your shading by rendering to grayscale and eliminating color distractions

Check the details of your shading by rendering to grayscale and eliminating color distractions

Sometimes you need fresh eyes to check that you got the shading right.
This is what your layers should look like – the flats filled w/ black is what we’re adding right now. Copy the flats layer, lock it, fill it with black (Edit > Fill). Then change your two white layers from Overlay to Normal. You should get this:
Step 7a - the list of layers
I really can’t think of a better way to test shading than to take out all the distracting costume color and ramp it up to maximum contrast. It’s the easiest way to find little things that don’t look right, or even big things that you were too focused to notice. What’s better, correction is just a matter of fixing the whites – not changing each and every color. Try it with a black background, too.
Hmm. I think I’ll have another look at her left hand before I’m completely finished.

TIME: 90 Seconds to check; varies for corrections

 

Step 8: Color Lines

Match the outline darkness to the rest of the shading

Match the outline darkness to the rest of the shading

Now that they’ve done their b&w job overlapping for step 7, it’s time the outlines got colored in and antialiased in the light areas. With their layers on ‘lock’, it should be a snap. ALWAYS REMEMBER: Work on darkly colored (but not pure black) backgrounds when doing outline work. It helps the antialiasing.

TIME: 30-60 Minutes

 

Step 9: Details & Cleanups

Finish off the finer details

Finish off the finer details

This is the ‘subtlety’ stage. *Get the colors just right (Overlay actually does some pretty good work with coloring) *Add hard-to-pixel details (Triangle on mask, blue lines around glove edges, etc) *Finish the subtle details you saved for now (hands) *Last go around for mistakes. Note I ‘forgot’ about her yellow boots – but with this process, it’s just a matter of adding the yellow to the flats layer. It’s pre-shaded!

TIME: Varies by Perfectionist

 

Step 10: Post Sprite, Obtain input from others

»
» A Basic Sprite Tutorial

Are you a bad enough dude to comment?

Comments closed

  1. Yes I am

    Dude that’s all great !
    I gotta try this to make rmkvxa charsets !
    thanks a lot ;)

  2. SpriteLearner

    So, I want to do this, but I have no fancy programs to do it with. Is there a way to do it with Paint or Gimp?

    • Kiwi

      Yes: to use this specific method you need an editor that has 1) layers, 2) layer blending options and 3) a Threshold tool. GIMP has all of that (as do a few other free programs I think) but Paint doesn’t.

  3. Masaomi

    When you say to sharpen to one pixel wide, by what means would I accomplish this?

    • Kiwi

      That just means don’t make anything more than 1 pixel thick when you’re cleaning the lines, because you might be tempted to do that when for example you go over a curve. But that’s only to keep to the style in this case — it’s not vital.

  4. Mike

    Thanks! Very helpful!

  5. Alpha

    Thanks a lot. It really helped me :D

  6. jh

    thx!

  7. kyurem000

    THANKS!!!!

  8. kishore

    If we dosn”t know how to draw..what is the way..

    • Kiwi

      Then do sprite edits, which will help you get better

  9. jordan

    for step 4, how do you remove all white from the layer?

    • Kiwi

      Once you’ve cleaned your lines, that should mean all of your pixels are black. So you can use the magic wand tool (anti-aliasing unchecked, contiguous unchecked, and a threshold of 1) to select the white and delete it all.

  10. Jeovane

    Very good tutorial!.

    Thankyou for distributing :D.

  11. dante

    kk what program would you use?

    • Kiwi

      For this technique, you should work with a program that uses layers. Photoshop or Photoshop Elements is the ideal, but GIMP and other multipurpose image editors like Corel programs would work, depending on which one feels easiest to you.

  12. gavin hawk

    what about just making them on computers

    • Kiwi

      That’s a possibility, and in fact there are countless ways to to it. This way would just be helpful for people who already draw but are new to pixeling.

  13. Will

    Awesome, I’m actually getting started on making a 32-bit platformer, and this really gave me a basic idea on what to do for the pixel art, thanks.

  14. The most-badass-14-year-old-girl-you-will-ever-meet.

    You are pure badassery, your art is pure badassery, the air you breathe is automatically worth a $1000 and I don’t know why you’re not the president of the world yet.

    And I am here to let you know of just how awesome you are so you would never-ever forget it.
    That is all.

    • Kiwi

      (Sometimes it’s hard for me to decide if a comment is spam or real, but this one made me smile so what the heck <3 )

      • STILL the most-badass-14-year-old-girl-you-will-ever-meet

        I don’t tell lies on the internet. So that wasn’t spam, just goofy old me. Oh, and Happy Doomsday while I’m here. I’m guessing you survived like the rest of us. =D

      • Kiwi

        Well then super-many thanks to you. Yeah, I guess 12/21/12 didn’t actually turn into the end of the world.. but then again, the day’s young. I’m still holding out hope.

  15. Tony

    step5 says to fill in the colours, do you copy the lines to make a new layer and colour it there?
    or do you mean just fill in the colour from a totally blank/new layer?

    • Kiwi

      Don’t copy the lines, just make a new layer underneath the lines’ layer, completely transparent, and fill in only flat color (no shading).