How to make your own RMXP sprites and icons

Started by Phasedscar, June 03, 2008, 01:49:01 am

Previous topic - Next topic

Phasedscar

June 03, 2008, 01:49:01 am Last Edit: August 11, 2008, 12:56:15 am by Phasedscar
By Phasedscar


The Basics

OK, many of you want to make your own sprites and icons for RPG Maker XP, and I want to show you the steps in how to accomplish this.  Since there aren't any terribly great guides out there, I'm attempting to make my own.  This will give you the basics you need in order to make you own sprite artwork.

I'm going to show you how to color, template, and image your sprites to make your very own creations!

Anyway, lets get started...


Color

Without a doubt the single most important aspect of making a sprite.  Why?  Well because without the right colors you're sprites will end up looking flat, and unimpressive, and hey, we all want a bout of "WOW!"

So lets get started.

For any sprite you want to have no more than 4 shades of a single color.  This is mainly due to crowding of shades, which dulls out detail in many sprites you will be making with RMXP.  More on that later.



Wait a minute, why are there 6 colors?  Didn't I just say 4?  Numbers 1 and 6 are what are called super highlights.  They add depth to each image, and are extremely important, but generally make up less than 10% of the image.  Super highlights are used to augment the colors you're seeing to add more detail in cramped areas.

As you can see, super highlights are used to help seperate colors and shades in order to add more detail.

Now to pick your colors.  Understanding how to pick colors is extremely important. So here's the color wheel.

This is a little more complex then I'd like, but it best illustrates what I need you to know.

Complementary Colors, these are what is extremely important, and you need to know first.  Colors opposite of eachother on the color wheel are called Complementaries, they make eachother "pop out" more.

My choice of using blonde hair was because of the heavy blue pants she is wearing.  The red further augments and brightens the blues.  I also have a slight bit of green in the image because some of tones are more violate than blue.  These are all opposite of eachother on the color wheel, and so they complement.

Anyway, so sum this all up...

  • Get 4 shades of one color, then have a super dark and super light version of it for the Super Highlights

  • Pick colors that tend to complement eachother.  You don't need to be terribly choosy in the process, but be in the ballbark



Making the Template

Ok, enough of that boring "picking the colors" junk, I know you want to get to the actual spriting.

Well, here's where you start.

First, and formost, know what size image you need.  For icons in RMXP you are limited to 24x24 pixels, not a lot of choice there.  However, for actor sprites you can have the ranges vary anywhere from 98x98 to 1024x1024.  All you need to remember is that spriting actors requires a format that can be divided by 4, and that whatever number you choose, it will have a 4x4 grid of tiles.  This means that even if you choose a 1024x1024, each tile of the sprite will only be 256x256 pixels.

For this I'm going to use the 24x24 pixel limit that's reserved for icons, this is mainly just to making illustrating the point easier.

To make a template use basic colors you wont be using in your image.  This is to keep from getting confused, and easily seperate the image out into what you want.


Now to apply the basic colors.  I often find it's very helpful to lay out my colors and shades on the image.  Eventually you'll want to delete them out, but at this stage it's more of a help then anything.

Anyway, now that I have colors chosen, and their shades, I applied the darkest shade to where I want it.  This helps me keep track of where and what colors to use, plus it's almost always easier to see against a bright backround.

Now that we have a template ready, lets move on to shading!

To recap:

  • Know your format.  It's extremely important you're sure you have the right size for the job.  Too large and it wont appear right in your game!

  • Create a false image template just to get the basic shape you want.  It's usually best to pick colors you wont be reusing anywhere in the image, however that's not really necessary.  This is the stage where you form your image.

  • Choose the colors you want to use, and apply at least one shade of it to each part of your template.  This helps keep track of where you want your colors.



Shading

This is where the image will come to life, and all the details will show through.  But there's a couple of things to consider before you start.

Lighting, always have a light source.  Know which direction you want light to shine on your sprite.  Sometimes it helps to place a pixel in your image, or even use a piece of scotch tape on your monitor.  Anything to help you keep track of where your light source is.  This will help you keep a consistent feel over your image.

In general for icons you either want the light source coming from the upper left corner, or from the front.


Now for some lighting!

The best idea is to use your high shade (not the super highlight) closest to your light source, and the dark shade (your super shadow, in this case) on the farthest side.  This will make the basis for your shading, and will greatly increase the texture of your object.

Almost starting to look done, isn't it?

That's because we almost are!
Next step is called stipling, or rendering, the image.  All that means is you make the shades fade into eachother a little more.  Take your time on this phase, since it usually requires the most patience and will often make you use the ctrl+z a few times.  That's OK, this is where time matters most!



Clean up the image, removing all the extras you don't need anymore, and that's it.  Try that out in your game and see if you like it.  If not just keep editing it and you see a result you like.

And the finished product will look like this.

(I however altered the image to fit in more with my icon workshop's 1 handed sword subsection)

Recap:

  • Pick a light source.

  • Start rendering your image, and if needed, change your template somewhat to get the effect you want.

  • Double check your work, if you like what you see and feel satisfied, then you're done!



I hope that this guide helps everyone to making their own art.  I plan to eventually release another tutorial in how to use Photoshop to further enchance your sprites.
Spoiler: ShowHide
My own game project & My resource workshop! (respectively)
http://forum.chaos-project.com/index.php?topic=608.0 http://forum.chaos-project.com/index.php?topic=682.0



What that is? Affection area for flails. - Blizz-ABS, the ultimate ABS

The pictures in your signature may altogether be no more than 200kB. The height must not exceed 200 px and the width must not exceed 800 px. Altogether they may take up an area of 160000 px2. Every signature not matching this criteria is a subject of the moderator team to remove and leave this rule as message in your signature.

Blizzard

Yay, a better color wheel than the one I had so far! :D

*moves to database*
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

DeathLock

Nice tutorial, I could definitely follow this tut.


winkio

Yay!  Good job.  I have been trying to make my own sprites and icons for my game, but I can never seem to get the shading right.  This will help A LOT!

Sally

June 03, 2008, 09:35:59 pm #4 Last Edit: June 03, 2008, 09:43:12 pm by Susys
woot he has shared his awsomeness, now no-one go and try to become better then him... his icons are god.

also, did you add this icon to your databace?

Starrodkirby86

I'm surprised no one added this sort of effect to the color wheel...

It would really benefit in looking at the colors...if you handle the sheer ugliness of the spins.

And that is a beautiful how-to, Super Highlights have such a funny name, but that's the sort of lingo you can have I suppose... ::)

I'm always challenged with light sources, so I have no idea what will easily go where...Gosh, need to get better at that. But kudos to you for making such an extraordinary procedure manual.

What's osu!? It's a rhythm game. Thought I should have a signature with a working rank. ;P It's now clickable!
Still Aqua's biggest fan (Or am I?).




Blizzard

AAAAAHHHH!!! STOP SPINNING THAT THING! #_#

I usually do my shading in Photoshop if I need any. I think that it's fairly capable of creating shading, even on pixelated pictures.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.


winkio

Phasedscar I'm still having trouble picking the right colors/shades for the faces.  Do I go with shades of brown or pink or in between?
Also, I have noticed that most RGSS sprites have a dark-purplish-brownish outline.  What are the advantages of using that over black?

Phasedscar

Ok, sorry for my long hiatus (again), but so you know I'm just getting started on this tutorial.  Anyway, now for the Q&A!

@ Susys
I'll eventually add that icon along with a few dozen others, I just want to clean it up and add some effects to it before I go and do that.

@Starrodkirby
The reason the color wheel is set up the way it is is to give a clear definition between the primary colors and the complementary colors.

For light the primary colors are blue, green and red, and mixing them gives us all the colors in between.  To make muddied or brown colors you mix a primary with it's complementary.  For example red+bluegreen = olive or brown.  If you mix all the primary colors you end with white.

As for light sources, well, the best thing to do is just use the same light source throughout the scene.  Most of the RMXP resources have the light source coming from just in front and over an object.  Generally speaking though, for sprites you want to have things at 45ยบ angles, meaning the light source(s) should come from either the corners or the sides of the image.  Try using the "dot method" for defining your light source and it should help out.

@Blizzard
I intend to make an addition to this tutorial about how to use Photoshop to edit the images further to get different effects, transparencies, and the like.
Patience Nejombe :)

@Winkio
Fleshtones are one of the hardest to achieve colors only because our eyes are so critical of them.  But in general think of how skin acts with light.  There's different layers in skin, and generally the top layer gives most of the pigment, however the lower layers of skin tend to be more translucent and have blood running through them since that's the live tissue, meaning it gives a slightly rosy color to everything.

So to get a good skin tone, start with a rose color (255 red, 200 blue, 200 green should be close) then layer in the fleshy color you want afterward, which should be a tope for a white guy, dark brown for black, and taracata for a tanned person.  There really isn't much of a science to this, it's mostly through feel.  Until you get the hange of finding the right flesh tones, I suggest just copying the colors from the RTP characters.

There's nothing wrong with using black, it just outlines the image better, meaning it'd look a little more cartoon-like.  The RTP tends to use pastel colors and methoding, meaning that super-shades are used instead of outlines.  Another reason for it is that it can seperate other parts of the image without appearing out of place. 

For example you don't want black on a character's hands when he's wearing it a black outfit, it tends to make the image feel* like it's muddy and dark.


*the Feel of an image is generally a term used to discribe how the overall appearence of an image looks.  The best way to find a Feel for sprites is to use the Thumbnail window that almost every image program has.

Anyway, hope I answered everyone's questions :)
Spoiler: ShowHide
My own game project & My resource workshop! (respectively)
http://forum.chaos-project.com/index.php?topic=608.0 http://forum.chaos-project.com/index.php?topic=682.0



What that is? Affection area for flails. - Blizz-ABS, the ultimate ABS

The pictures in your signature may altogether be no more than 200kB. The height must not exceed 200 px and the width must not exceed 800 px. Altogether they may take up an area of 160000 px2. Every signature not matching this criteria is a subject of the moderator team to remove and leave this rule as message in your signature.

Mystic Mage

April 26, 2011, 12:15:55 am #10 Last Edit: April 26, 2011, 12:17:41 am by Mystic Mage
This is very helpful for the basics and I admit I did not know that images for RMXP were composed of 4x4 pixel tiles.
Unfortunately, many of the images have lost their links so it is not as useful as it should be. Please update it so that it will be complete again. Thank you in advance!
I do see that this was made in 2008 so... if Phasedscar is not around much anymore sorry for the necropost.

Also... on a side note. The color violate is my favorite color. Can't get much better than violate!

WhiteRose

Quote from: Mystic Mage on April 26, 2011, 12:15:55 am
This is very helpful for the basics and I admit I did not know that images for RMXP were composed of 4x4 pixel tiles.
Unfortunately, many of the images have lost their links so it is not as useful as it should be. Please update it so that it will be complete again. Thank you in advance!
I do see that this was made in 2008 so... if Phasedscar is not around much anymore sorry for the necropost.

Also... on a side note. The color violate is my favorite color. Can't get much better than violate!


You can check if a user has been active by clicking on their name, taking you to their profile. There you can see the date they last logged in, which, in Phasedscar's case, was February 2010.