AuthorTopic: My Pixel Tutorials  (Read 7912 times)

Offline fawel

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

My Pixel Tutorials

on: March 10, 2007, 05:04:06 am
I have created two tutorials on pixelling, one jsut now and the other about 5 months ago.  The one I just finsihed was a dithering tutorial using and expanding upon an image with different dither techniques Helm posted sometime back.  This is it:



OLIV'S DITHERING TUTORIAL[/color]

Dithering is a technique spriting technique used to transition colors, give the appearance of multiple colors, and to give texture.  I have compiled 7 basic dithering styles here.  I ahve also broken down the traditional dither into 4 parts, and show a technique you can use to soften any dither.

As you look through the tutorial, look at the textures the dithers create and think about what they could be used for.  Most of them could be used for anything, but one may be especially suited for vloth, mottled skin, metal, etc.


The Completed Basic Dither

Description  The complete dither.  It is composed of 10%, 25%, 50%, and 75% dithers.  This dither is not used for texturing, but for smoothly transitioning colors.

The Components of the Basic Dither[/i]

10% Dither

Description  The first part of the complete dither.

25% Dither

Description  The second part of the completed dither.  This has a noticable texture, and is good for creating a soft shadow that does not go into 50% dither.

50% Dither

Description  Third part of the complete dither.  The most commonly known dither style.  Is useful for creating a flat in-between shade.

75% Dither

Description  The fourth component of the complete dither.  This is the only of the components that gives a real "texture."  This is caused by the crosses.

Those are the components of the completed dither.  Many can be used on their own, or in different pairs or trios.  I reommend when dithering a large basically unrestricted piece dithering 25% - 50% - 25% between shades.  For smaller sprites, just do a straight 50% dither.  The only time you should need the complete dither is if you are working on a very large piece with very restrciting colors.


Dither Styles
These dithers are not only used for transitioning, but also for texturing.

Brickwork


Diagonal


Groady


Horizontal


Scribble


Vertical


I also want to show you how to "soften" or "extend" a dither.  It's very simple, you just take the raw dither like the vertical:

And tack on some extra pixels, effectively softening and making the transition more gradual, like this:



Here are all the dithers at regualr size in one image:


That is what dithering is.  Not something you can really teach, but something you have to look at and understand what is being done and how.  I hope this helps you understand pixelling better :)



That is the first tutorial.  My other one, which was to teach basic spriting skills as far as highlights, color cholce, AA, and what a nice looking sprite is composed of is here:



oliv's basic platform sprtiting tutorial


Part1

Use greys to sketch a concept of what the sprite will be.  Darker greys for shadows, lighter for basic lines.  Do NOT begin cleaning up the lines while they are grey.  The idea here was a robotic dinosaur with a cockpit where the head was, but that changed.

Part2

Use black to create an outline, on top of the greys.  make sure the black outline is as clean as possible.  Try fluxuating the black outline across different parts of the greys, to help see which lines are more natural.

Part3

Basic clean up, get rid of greys, and if anything about the lines looks awkward change it now.

Part4

Pick your pallet.  This is one of the most important steps.  First, think about the mood your going for.  Then think bout what colors are associated with that mood, and pick out colors that go with it.  keep in mind you must think of the actual color that object is- any child will tell you waater is blue- it is not.  Water is grey, water is green, water is purple, water is blue, water is black, whater is white (reflections).  In the color chooser, experiment with the colors- don't pick a color out of the section that has the general thing you're going for- really look at the colors.

Now, in small sprites you need contrast- lots of it.  So make sure your colors are few and far between.  When adjusting shades (look at color choosing for ref.), you start where your original color is (the black dot in the green), and then move your next color either to the left or right of where the original color is, and down, then lower the ptich on the right hand side (that grayscale bar) as well.  Note that I only used 4 colors total for this sprite.  Put all the colors on your image, side by side, to see how they look.  Make sure there is enough contrast!  ALWAYS minimalize your color usage.  (This is only basic pallet-choosing, not at all in-depth)

Part5

Begin coloring your dinosaur by filling in with your mid- color, then add shadows and highlights.  When coloring, don't color things the way you think they should be- color them the way you see them.  Go on google images and looks for reference pictures, so you see how the light really falls on them and how they really look.  One thing I sometimes do is draw a lightsource up in the corner, to help me visualize where the light is coming from.  DO NOT color over ANY of your outlines- outlines are absolutely necessary for small sprites.  Just color around them for now.

Part6

Time to begin coloring your outlines- slightly.  use the two darker colors (I have for), and use the lighter of two darks to color over where the brightest parts of the image are.  Also, in places where the outline have doubled up, use the lighter of the darks to highlight the part with more light.

Part7

Begin anti-aliasing (AA).  Start with your mid color, and go around the edges of the outline that when zoomed out are roughest.  You tuck single AA pixels in the corners of the outline.  Do not overAA with this shade, only use it for the parts that are roughest.  Next take the lightest shade and begin adding pixels next to the darker AA in a manner where the pixel does not sit on top of them, creating a lump, but along the outline and net to the original AA pixel.  Then, go through the corners that were not AA'd before and add AA there- but ONLY in the areas that need it.  If you over AA the image will look fuzzy and blurred.  MAKE SURE that none of the AAing interferes with the shape of the sprite- only softens it.

Final

Look at the sprite now- if anything is wrong, fix it.  Sometimes you just have to finish a sprite before you really see what is wrong with it.  Clean up the background, and you're finished.  If you're going to animate the sprite, do so now, or if you're an outline-animator, too late :(.  I hope this will help people with their sprites, even if all it does is teach good spriting form and techniques, not actual drawing skills- those come through practice.

And here are the steps in one image (dammit I JPEG's the image >_< sorry guys)



Now practice on these lines!  Post with your colorings, make sure you do while following the steps in this tutorial!



Okay, there they are.  I wanted to know what you guys thought about them if I covered everything well enough, anything I didn't cover and should have, and how effective you think they actually are.  Thanks :)

It appears the site I hosted the images for the second tutorial is down, don't worry, they'll be up soon.  Sorry about that.

« Last Edit: March 10, 2007, 05:05:41 am by fawel »

Offline philipptr

  • 0010
  • *
  • Posts: 261
  • Karma: +0/-0
    • View Profile

Re: My Pixel Tutorials

Reply #1 on: March 10, 2007, 12:43:27 pm
Must have been quite some work you've had there. Overall pretty nice. Especially the Dithering stuff is usefull for beginners. I dont know if helm minds if you use hist images, did you ask him? Anyways here are some things if noticed while reading:

Basic Dither [..] This dither is not used for texturing
imho this dither can be also used for a specific texture, when used in the right context. for example if you use it in an high colour image where almost everything is dithered this way, it doesnt look like adding texture, but when used in an otherwise almost complete flatshaded picture it can add a texture to an object.
Now, in small sprites you need contrast- lots of it.  So make sure your colors are few and far between.  When adjusting shades (look at color choosing for ref.), you start where your original color is (the black dot in the green), and then move your next color either to the left or right of where the original color is, and down, then lower the ptich on the right hand side (that grayscale bar) as well.
I don't get what you are trying to say. Maybe you could use terms like Hue and Saturation? I guess that would help a lot.

1. The antialiasing seems way too blurry to me
2. In a sprite tutorial I wouldn't explain how to antialiase in front of a white background, but instead tell some things about selout. With the antialiasing the sprite would be only usefull if the bg was white too.

Offline AdamAtomic

  • 0100
  • ***
  • Posts: 1188
  • Karma: +0/-0
  • natural born medic
    • View Profile
    • Adam Atomic

Re: My Pixel Tutorials

Reply #2 on: March 10, 2007, 04:37:16 pm
anti-aliasing the outside of your sprite onto a white background may in fact prevent it from being an actual sprite at all, except in special cases when it may be a symbol or inventory item that would have its own background.  Sprites traditionally (and on many systems it is hardcoded this way) have an alpha component in their palette that makes anti-aliasing the outside edge fruitless and impossible.

Offline Hedgehog

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
  • AVOCADOMG
    • View Profile

Re: My Pixel Tutorials

Reply #3 on: March 10, 2007, 05:29:11 pm
anti-aliasing the outside of your sprite onto a white background may in fact prevent it from being an actual sprite at all, except in special cases when it may be a symbol or inventory item that would have its own background. Sprites traditionally (and on many systems it is hardcoded this way) have an alpha component in their palette that makes anti-aliasing the outside edge fruitless and impossible.
Unless another sprite is used as an alpha channel.
« Last Edit: March 10, 2007, 05:49:45 pm by Hedgehog »
Life's a garden. Dig it.

Offline AdamAtomic

  • 0100
  • ***
  • Posts: 1188
  • Karma: +0/-0
  • natural born medic
    • View Profile
    • Adam Atomic

Re: My Pixel Tutorials

Reply #4 on: March 10, 2007, 05:36:53 pm
...which is supported only by PC and cur-gen consoles (which never use pixel art anyways), relinquishes color control to shading algorithms (thus making it less "true" pixel art) and masks are not covered by this tutorial anyways.

EDIT
Regardless, it is not a particularly good tutorial.  You're using internal black outlines on a very tiny sprite, which chews up valuable pixels and is really only a decent option on low-contrast screens, like cell phones, where it is a necessary evil.  Your palette is VERY dull - light gray, gray, and dark gray.  I would use a MUCH wider range of colors to sell your volumes at this tiny size, for example:



This is a similar-sized sprite with similar content, but I used I think 8 colors total, including a dark outline (as this particular sprite IS going to be displayed on a cell phone).  The rest of my palette, if you zoom in, is green, blue, yellow, red, and white.  As opposed to gray, gray, gray, and gray.  Your lighting is nonsensical, especially across the chest and neck area (for some reason it appears to be completely inverted here?).  The actual lineart is flawed; i would recommend studying the smaller therapods a little bit more before attempting another struthiomimus/ornitholestes type dino.  The neck is too thick, the feet are way too short, and the tail is really, really short as well.  The superdark legs seem like a copout and are only complicated by the dark outlines.

From where I stand, it seems like your time would be better spent working on your art before you attempt the admittedly noble act of helping to teach others!


DOUBLE EDIT
I just remembered that you said that tutorial was from 5 months ago.  Your art skills may be considerably more advanced than displayed in that particular tutorial, so I apologize if I overstepped my bounds.  If you wish for the tutorial to be really helpful, I would revisit it with your new abilities and work on correcting some of the flaws!
« Last Edit: March 10, 2007, 05:50:15 pm by AdamAtomic »

Offline fawel

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: My Pixel Tutorials

Reply #5 on: March 10, 2007, 08:08:07 pm
lol, thanks for the comments.  I'll see what i can do to revise the small sprite tutorial.  AS far as Helm and asking permission.... they're just dither patterns, really.

Offline Helm

  • Moderator
  • 0110
  • *
  • Posts: 5159
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: My Pixel Tutorials

Reply #6 on: March 11, 2007, 06:49:21 pm
They're just dither patterns, and they're not my own either, most of them were made by Ai I think. But why rename stuff? We've called Groady 'styledither' for ages now, do we really need the extra confusion?

Your sprite art tutorial is quite misleading, I think, and you should work on your own skill for some time before attempted to help others with a tutorial, like Adam says.

Offline Malor

  • 0011
  • **
  • Posts: 527
  • Karma: +0/-0
  • Masquerading as a black bear.
    • View Profile

Re: My Pixel Tutorials

Reply #7 on: March 11, 2007, 11:13:14 pm
I also find this tutorial misleading, you don't really explain AA enough to include it, and correct me if I'm wrong, but you didn't explain the purpose of AA, a beginner would have no idea why they were doing it, which doesn't really help..
Quote from: Adarias
I'm not going to pretend this is a small task either; certainly none of us here can claim to have accomplished it.  it's the realm of masters.  still, it's what we all have to try for.

Offline fawel

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: My Pixel Tutorials

Reply #8 on: March 12, 2007, 02:18:14 am
Thanks for the responses, and I wasn't aware what I dubbed Groady already had a name :(
And you are correct about the AA, I'll consider removing that part, or adding onto it to make it clearer.
As far as skill goes, I think I'm good enough to help people learn, and that's what matters :)

Offline willfaulds

  • 0010
  • *
  • Posts: 217
  • Karma: +0/-0
    • View Profile

Re: My Pixel Tutorials

Reply #9 on: March 12, 2007, 12:59:29 pm