News: The Storyline Service! Get your inspiration and support here!
Pages: [1]
  Print  
Author Topic: How to make your own RMXP sprites and icons  (Read 9619 times)
Phasedscar
Ethereal Devastator
****

Level: 21
Offline Offline

Gender: Male
Posts: 303


Oh god not monday again!


View Profile
« on: June 03, 2008, 07:49:01 AM »

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.
« Last Edit: August 11, 2008, 06:56:15 AM by Phasedscar » Logged

(click to show/hide)
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
This sexy
Administrator
has over 9000 posts
*****

Level: 614
Offline Offline

Gender: Male
Posts: 19083


God created Stan in His own image


View Profile WWW
« Reply #1 on: June 03, 2008, 02:40:23 PM »

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

*moves to database*
Logged

Get King of Booze for Android, for iOS, for OUYA or for Windows!
Visit our website.
You can also love/hate us on Facebook or the game itself.


Get DropBox, the best free file syncing service there is!

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

Quote from: Barney Stinson
When I get sad, I stop being sad and be awesome instead. True story.
DeathLock
Astral Trancist
*****

Level: 53
Offline Offline

Gender: Male
Posts: 586



View Profile
« Reply #2 on: June 03, 2008, 03:16:25 PM »

Nice tutorial, I could definitely follow this tut.
Logged


winkio
Epiq
Administrator
Guardian of Chaos
*****

Level: 192
Online Online

Gender: Male
Posts: 4374


I am lying.


View Profile
« Reply #3 on: June 03, 2008, 05:39:42 PM »

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!
Logged

I am currently working on Blizz-ABS, since Blizzard has retired.  If you have any suggestions, post them here: http://forum.chaos-project.com/index.php/topic,6164.msg104939.html#msg104939
Sally
Sallygirl :P
Chaos User
******

Level: 12
Offline Offline

Gender: Female
Posts: 1283


View Profile
« Reply #4 on: June 04, 2008, 03:35:59 AM »

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?
« Last Edit: June 04, 2008, 03:43:12 AM by Susys » Logged
Starrodkirby86
Kirby de Varita Estelar
Guardian of Chaos
********

Level: 194
Offline Offline

Gender: Male
Posts: 3282


~!


View Profile WWW
« Reply #5 on: June 04, 2008, 06:18:40 AM »

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... :Happy

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.
Logged


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
This sexy
Administrator
has over 9000 posts
*****

Level: 614
Offline Offline

Gender: Male
Posts: 19083


God created Stan in His own image


View Profile WWW
« Reply #6 on: June 04, 2008, 11:52:19 AM »

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.
Logged

Get King of Booze for Android, for iOS, for OUYA or for Windows!
Visit our website.
You can also love/hate us on Facebook or the game itself.


Get DropBox, the best free file syncing service there is!

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

Quote from: Barney Stinson
When I get sad, I stop being sad and be awesome instead. True story.
Sally
Sallygirl :P
Chaos User
******

Level: 12
Offline Offline

Gender: Female
Posts: 1283


View Profile
« Reply #7 on: June 04, 2008, 09:11:23 PM »

http://www.georgeaugustkoch.com/ImageFolder/Wheel.gif kreapy
Logged
winkio
Epiq
Administrator
Guardian of Chaos
*****

Level: 192
Online Online

Gender: Male
Posts: 4374


I am lying.


View Profile
« Reply #8 on: June 08, 2008, 05:36:39 AM »

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?
Logged

I am currently working on Blizz-ABS, since Blizzard has retired.  If you have any suggestions, post them here: http://forum.chaos-project.com/index.php/topic,6164.msg104939.html#msg104939
Phasedscar
Ethereal Devastator
****

Level: 21
Offline Offline

Gender: Male
Posts: 303


Oh god not monday again!


View Profile
« Reply #9 on: June 15, 2008, 09:05:48 AM »

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 Happy

@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 Happy
Logged

(click to show/hide)
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
Trained Member
*

Level: 1
Offline Offline

Gender: Male
Posts: 25


A boon I proffer to you. The gift of inspiration.


View Profile
« Reply #10 on: April 26, 2011, 06: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!
« Last Edit: April 26, 2011, 06:17:41 AM by Mystic Mage » Logged
WhiteRose
Trying to code in Ruby
Moderator
Lexima Warrior
***

Level: 125
Offline Offline

Gender: Female
Posts: 2334


<3


View Profile
« Reply #11 on: April 26, 2011, 06:41:18 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.
Logged

Pages: [1]
  Print  
 
Jump to:  


*
*
Shoutbox
Latest Shouts
View All
October 22, 2014, 10:46:13 PM Blizzard: Freaking awesome. <3 http://www.dorkly.com/post/69751/the-most-incredible-custom-n64s-ever
October 22, 2014, 01:26:08 PM gameus: It really helps when you have a PS3 and a PS4. You need PS+ to play online with the PS4 now so it's worth having just for that. Considering I've dealt with the whole Xbox live subscription before, this really wasn't any different. Plus, it gets you free games every month. I know you have to keep paying to keep them, but the collection does build up. I've got so many games across all 3 systems now. xD
October 22, 2014, 08:47:45 AM MarkHest: Boo
October 22, 2014, 07:53:26 AM WhiteRose: For some reason, PS+ has never really appealed to me, because you have to keep paying for it in order to keep playing your free games. I know that the price is so cheap that it's worth it, but I think I don't feel that any PS+ games are part of my "collection," if that makes sense. There's probably some sort of psychological thing that explains it. Haha. Tongue
October 22, 2014, 06:38:40 AM gameus: Too bad you don't have PS+. I got that game free awhile ago.
October 22, 2014, 04:22:04 AM WhiteRose: Dragon's Crown is 50% off on the PSN sale, and the gameplay looks fun... but.... I guess some of the art style is a little... different than what I might normally play. I'm kind of on the edge about whether to get it or not.
October 21, 2014, 04:53:40 PM Zexion: I dunno how to play it so i gave it away, but i think you just need to collect certain peices
October 21, 2014, 04:53:11 PM Zexion: okay, so I think i gave a $3000 monopoly prize away yesterday ._. this
October 21, 2014, 03:57:17 PM Blizzard
(click to show/hide)
October 21, 2014, 07:18:23 AM Blizzard: Wow, just wow. It's like that pokemon game by PETA. In itself it can actually pass as a decent game. But it's bloated with PETA propaganda.

View All


HB Games RpgMaker.org