The RPG Maker Resource Kit

RMRK General => Creativity => Topic started by: Abigaila on May 01, 2014, 09:39:17 PM

Title: [Visual] Abigail's bad pixel art
Post by: Abigaila on May 01, 2014, 09:39:17 PM


Updated 9. may.
Title: Re: So I tried doing pixel art
Post by: Sophist on May 01, 2014, 10:25:21 PM
looks good make more
Title: Re: So I tried doing pixel art
Post by: Acolyte on May 02, 2014, 02:53:19 AM
It's pretty good for an early attempt. Looks like you've already got an okay grasp on how to make outlines. One thing to work on is color. Sprites need a lot of contrast because of how small they are. If your colors are too close together, they'll blend in with each other and you'll lose out on a lot of detail.

(https://rmrk.net/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FkehE12g.png&hash=bb7e7933d41649ed463874daa5b63abe75f3a0a6)

Here I didn't do anything but replace the colors with a more contrasting ramp. See how more noticeable the shadows are?
Try it out. Here's a handy guide if you'd like more info on color ramps and things: http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299&PID=139392#139392
Title: Re: So I tried doing pixel art
Post by: Abigaila on May 06, 2014, 11:26:18 PM
I tried again:

(https://rmrk.net/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FZFKFKcD.png&hash=ed8c62a97cff2c6a47d8d5635ac9486d6f118cd3)

Thanks for all your great tips Acolyte (:
Title: Re: So I tried doing pixel art
Post by: Heretic86 on May 07, 2014, 01:42:41 AM
Outline is just fine.  Colors need work.

Cartoon styles typically show an outline filled in by a solid color representing the type of material.  Leaves are all green.  Bark is all brown.  Skin tones are typically exactly the same across the entire character.  Cartoons do very little in terms of gradual shading.  The example looks "cartoony".

Getting away from Cartoons.

Your grass is green.  However, in RMXP when you look at Grass, it isnt just a solid square of the exact same shade of green.  There are millions and millions of individual blades of grass, so varying the shade of green allows us to more easily interpret these varying shades of green as being grass and not just one solid color.  The more texture to a surface there is, the more variations in color you'll have.  A front yard is going to have a lot of texture.  Lawns arent perfectly smooth, so there is a lot of variation in the color.  A very smooth table could be represented by a solid color.

All that being said, the leaves on the tree need a bit more variation in color.  Two or three colors, lighter toward the middle, slightly darker toward the edges of each large leaf.  Also consider the direction of lighting.  The bark is usually way bumpier.  Small variations in the color of brown that represent "rings" for Palm Trees, or just a general "roughness" of the bark surface.  The greater the contrast between similar colors, the bumpier the surface will look.  Also remember shading for lights.  Slightly darker closer to the edges, and perhaps some shadows from the leaves.

Shadows

Shadows, at least in RMXP are one solid color.  That color is easily sampled with most paint programs eyedropper tool.  Shadows are also drawn where an object being drawn does not exist, or no pixels, outside the outline of your object.  Object Self Shadows need to be handled within that palette used for the textures.  Generally a tree with very large leaves, such as a Palm, will have some Self Shadows.  Its just using the darker shades of that Bark palette to maintain both casting a shadow as well as the "shape" of an object.

Small objects cast small shadows.  Just maintain the same style when possible.  Things like coffee cups might have an outline of that base system shadow color on the right.  Just keep it on the right for consistency.  Other types of objects might cast no shadows at all.  Flat surfaces.  Paper.  Rugs.  Shadows indicate height, so lots of objects may not be large enough to cast shadows at all.  Id say anthing bigger than a Hand would probably cast a shadow, but something like a pencil or a coffee cup probably wouldnt, at least one that is visible to the player.

Comparisons

Look at how our Trees are done and how something like a Pole is done.  Poles dont have much variation vertically, but there should be some variation horizontally.  This visually communicates that the surface of a pole is Round and Smooth.  A Pole would also be good for casting a Shadow using the standard Shadow Color in RM, that just typically indicates where your Light Source is in relation to said object.  When you have a "congruent style", both shadows will go in the same direction.  If they dont, something will feel "off" to the player, even if they cant really tell exactly what is "off".  Indicating there is another Light Source, either a torch on a wall, or something other than the Sun is used as a Light Source will cause shadows that go in other directions to feel less "off".  Using the Sun as a Light Source, your Shadows need to indicate the direction of the Light Source as being the same, but for Inside or Night stuff, directions of Shadows matters less.  The comparisons between a Tree and a Pole are still similar.  Assuming Shadows go in the same direction as the Sun as a Light Source, the surfaces are still similar in a way as well.  Darker shading toward the edges of the object and lighter colors go to the center.  For smooth surfaces, use very little variation vertically, but a bit more variation for rougher surfaces.  Still use the lighter colors of your limited palette toward the center and darker colors for Self Shadows and Edgework.

You can get away with using only Two Colors for an Object.  Shadows not considered as the RM Shadow color is uniform across ALL graphics and styles.  Make a Ball.  As you get closer to the edge of the object, use the darker shade more frequently.  Along the outside of the object you'll typically use almost all darker shades while the inside of the object will use almost all Lighter colors.

Characters in RM typically dont allow for more than two or three pixels to represent the shape and texture of any Object, especially small objects used by characters.  Arms, legs, eyes, hands, they usually only use one or two pixels.  Its just the spacing between each of these pixels that the player interprets as how dark, light, shiny, smooth, rough, shaded, and shape of an object.  Put one light for two dark pixels, or fifty fifty, or two dark and one light.  Its that ratio that helps use very very few colors to create the hybrid style.

Indexing

Indexing colors is often used to limit a Palette for style maintenance.  I believe RMXP styles are limited to 16 or 32 colors when indexed.  Its also a rough guideline.  Using 1024 colors where literally every single pixel in a 32x32 block is different will cause a "clash" in style.  But using two colors to define a plain sheet of paper with writing on it is just fine.  Using 18 colors instead of 16 when displaying a humanoid wearing clothing is also fine.  Its a rough guideline.  Your tree has two Base Colors.  Green and Brown.  To create more definition in the Object Model, expand your palette to four, six, or even eight shades of each.  More colors are more work, and again, rough, you can do just fine with four colors, six is probably the most definitive.

Homework

Start off with something super basic.  Sphere shapes are good practice for using shading.  So start with a small ball.  Then make another, but slightly larger.  Then larger.  Once you get to larger objects, other graphical tools may become very useful, such as Gradient Tools.  Other tools like "Noise" help to make surfaces look less smooth.  On each ball, try to give a shadow and see if it "looks right" based on its relative size.  Once you get the idea of shading down for balls, apply it to other types of surfaces.  Make the surface a bit "rougher" by putting some "noise" in.  Either manually or with a tool.  Then try other types of objects.  Maybe a teapot.  Again, vary the size, shading, and shadows.  Then you should be able to achieve better looking complex objects like Trees, Clothing, and Faces.

Just my two cents, but thats about all its worth.
Title: Re: So I tried doing pixel art
Post by: Abigaila on May 07, 2014, 09:36:22 AM
Spoiler for:
Outline is just fine.  Colors need work.

Cartoon styles typically show an outline filled in by a solid color representing the type of material.  Leaves are all green.  Bark is all brown.  Skin tones are typically exactly the same across the entire character.  Cartoons do very little in terms of gradual shading.  The example looks "cartoony".

Getting away from Cartoons.

Your grass is green.  However, in RMXP when you look at Grass, it isnt just a solid square of the exact same shade of green.  There are millions and millions of individual blades of grass, so varying the shade of green allows us to more easily interpret these varying shades of green as being grass and not just one solid color.  The more texture to a surface there is, the more variations in color you'll have.  A front yard is going to have a lot of texture.  Lawns arent perfectly smooth, so there is a lot of variation in the color.  A very smooth table could be represented by a solid color.

All that being said, the leaves on the tree need a bit more variation in color.  Two or three colors, lighter toward the middle, slightly darker toward the edges of each large leaf.  Also consider the direction of lighting.  The bark is usually way bumpier.  Small variations in the color of brown that represent "rings" for Palm Trees, or just a general "roughness" of the bark surface.  The greater the contrast between similar colors, the bumpier the surface will look.  Also remember shading for lights.  Slightly darker closer to the edges, and perhaps some shadows from the leaves.

Shadows

Shadows, at least in RMXP are one solid color.  That color is easily sampled with most paint programs eyedropper tool.  Shadows are also drawn where an object being drawn does not exist, or no pixels, outside the outline of your object.  Object Self Shadows need to be handled within that palette used for the textures.  Generally a tree with very large leaves, such as a Palm, will have some Self Shadows.  Its just using the darker shades of that Bark palette to maintain both casting a shadow as well as the "shape" of an object.

Small objects cast small shadows.  Just maintain the same style when possible.  Things like coffee cups might have an outline of that base system shadow color on the right.  Just keep it on the right for consistency.  Other types of objects might cast no shadows at all.  Flat surfaces.  Paper.  Rugs.  Shadows indicate height, so lots of objects may not be large enough to cast shadows at all.  Id say anthing bigger than a Hand would probably cast a shadow, but something like a pencil or a coffee cup probably wouldnt, at least one that is visible to the player.

Comparisons

Look at how our Trees are done and how something like a Pole is done.  Poles dont have much variation vertically, but there should be some variation horizontally.  This visually communicates that the surface of a pole is Round and Smooth.  A Pole would also be good for casting a Shadow using the standard Shadow Color in RM, that just typically indicates where your Light Source is in relation to said object.  When you have a "congruent style", both shadows will go in the same direction.  If they dont, something will feel "off" to the player, even if they cant really tell exactly what is "off".  Indicating there is another Light Source, either a torch on a wall, or something other than the Sun is used as a Light Source will cause shadows that go in other directions to feel less "off".  Using the Sun as a Light Source, your Shadows need to indicate the direction of the Light Source as being the same, but for Inside or Night stuff, directions of Shadows matters less.  The comparisons between a Tree and a Pole are still similar.  Assuming Shadows go in the same direction as the Sun as a Light Source, the surfaces are still similar in a way as well.  Darker shading toward the edges of the object and lighter colors go to the center.  For smooth surfaces, use very little variation vertically, but a bit more variation for rougher surfaces.  Still use the lighter colors of your limited palette toward the center and darker colors for Self Shadows and Edgework.

You can get away with using only Two Colors for an Object.  Shadows not considered as the RM Shadow color is uniform across ALL graphics and styles.  Make a Ball.  As you get closer to the edge of the object, use the darker shade more frequently.  Along the outside of the object you'll typically use almost all darker shades while the inside of the object will use almost all Lighter colors.

Characters in RM typically dont allow for more than two or three pixels to represent the shape and texture of any Object, especially small objects used by characters.  Arms, legs, eyes, hands, they usually only use one or two pixels.  Its just the spacing between each of these pixels that the player interprets as how dark, light, shiny, smooth, rough, shaded, and shape of an object.  Put one light for two dark pixels, or fifty fifty, or two dark and one light.  Its that ratio that helps use very very few colors to create the hybrid style.

Indexing

Indexing colors is often used to limit a Palette for style maintenance.  I believe RMXP styles are limited to 16 or 32 colors when indexed.  Its also a rough guideline.  Using 1024 colors where literally every single pixel in a 32x32 block is different will cause a "clash" in style.  But using two colors to define a plain sheet of paper with writing on it is just fine.  Using 18 colors instead of 16 when displaying a humanoid wearing clothing is also fine.  Its a rough guideline.  Your tree has two Base Colors.  Green and Brown.  To create more definition in the Object Model, expand your palette to four, six, or even eight shades of each.  More colors are more work, and again, rough, you can do just fine with four colors, six is probably the most definitive.

Homework

Start off with something super basic.  Sphere shapes are good practice for using shading.  So start with a small ball.  Then make another, but slightly larger.  Then larger.  Once you get to larger objects, other graphical tools may become very useful, such as Gradient Tools.  Other tools like "Noise" help to make surfaces look less smooth.  On each ball, try to give a shadow and see if it "looks right" based on its relative size.  Once you get the idea of shading down for balls, apply it to other types of surfaces.  Make the surface a bit "rougher" by putting some "noise" in.  Either manually or with a tool.  Then try other types of objects.  Maybe a teapot.  Again, vary the size, shading, and shadows.  Then you should be able to achieve better looking complex objects like Trees, Clothing, and Faces.

Just my two cents, but thats about all its worth.

Thanks for this amazing post. This will help me a lot.
Title: Re: So I tried doing pixel art
Post by: Heretic86 on May 07, 2014, 10:26:51 PM
Thanks for this amazing post. This will help me a lot.

I truly hope it does.  In time, the tricks you learn from practice and effort, you can share with others that also want to improve themselves.
Title: Re: Abigail's bad pixel art
Post by: Abigaila on May 09, 2014, 05:58:25 PM
I added a new picture