[Visual] Abigail's bad pixel art

0 Members and 1 Guest are viewing this topic.

***
Rep:
Level 37
N
2014 Zero to Hero


Updated 9. may.
« Last Edit: May 25, 2015, 06:00:23 PM by boe »

*
Rep:
Level 97
2010 Best Veteran2014 Best Use of Avatar and Signature Space2014 Best IRC Chatterbox2014 Most Mature Member2014 Best Writer2014 Best Counsel2014 Favorite Staff Member2014 King of RMRK2013 Favorite Staff MemberSecret Santa 2013 ParticipantFor the great victory in the Breakfast War.Secret Santa 2012 Participant2011 Best Writer2011 Best Counsel2010 Funniest Member2010 Best Writer
looks good make more
you awoke in a burning paperhouse
from the infinite fields of dreamless sleep

*
A-pow 2015
Rep:
Level 81
2014 Best RPG Maker User - GraphicsFor frequently finding and reporting spam and spam bots2013 Most Unsung MemberSecret Santa 2013 ParticipantFor taking arms in the name of your breakfast.a^2 + b^2 = c^2How can I help you? :DSecret Santa 2012 ParticipantSilver - GIAW 10Silver - GIAW 9Bronze - GIAW HalloweenGold - Game In A Week VII
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.



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

***
Rep:
Level 37
N
2014 Zero to Hero
I tried again:



Thanks for all your great tips Acolyte (:

***
Rep:
Level 69
RMRK Junior
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.
Heretic's Vehicles XP (Boat and Magic Carpet)

Heretic's Collection XP Ver 2.3 - Updated to include Dynamic Lighting, Moving Platforms, Vehicles, and much much more!

***
Rep:
Level 37
N
2014 Zero to Hero
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.
« Last Edit: May 09, 2014, 12:34:55 AM by Queen yuyubabe »

***
Rep:
Level 69
RMRK Junior
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.
Heretic's Vehicles XP (Boat and Magic Carpet)

Heretic's Collection XP Ver 2.3 - Updated to include Dynamic Lighting, Moving Platforms, Vehicles, and much much more!

***
Rep:
Level 37
N
2014 Zero to Hero
I added a new picture