- Joined
- Oct 13, 2012
- Messages
- 3,740
- Reaction score
- 25,335
- First Language
- German
- Primarily Uses
- N/A
You got your perfect idea for your hero, but then, oh no! The generator lacks the parts to make it become reality.
I often hear things like “Well, if I had your talent...” but seriously, no one starts with a high pixel art skill. And since everybody starts at some point, why not make this your start?
I would always recommend characters if you want to start making pixelated graphics for RPG Maker, as you have a huge variation of references - literally all generator pieces and characters - and a base as well.
But before we start we need another thing, the character we want to display.
You don’t need a full artwork, but if you don’t it really helps to google for some references regarding the hairstyle and the clothing so you can make sure the result looks right.
In my case, the hero I want to be able to put into an RPG Maker MZ game is…
Step 1: Open your base and references in the graphic program of your choice
My graphic program of choice is graphicsgale, but that is all up to you. I kept hiddenone’s profile pic, my reference in a new empty image so I can have a quick look without leaving the program.
The base comes from the folder with the generator parts, and is in the generator->TV->female folder.
As references for both style and color I picked people1 and people3, as they have all the colors and references I need for this style.
Step 2: The image you actually work on
Then I start with a new image that is larger than just the charset, because that enables me to copy a reference next to my work so I can have quick access to the colors.
Also that ensures you never accidentally overwrite the original files. You could reinstall them, but why bother with that if you can avoid it.
Since I am going to use several layers, I’ll name this one “Base” and I also switched on a 48*48 grid, so I know where the borders of my frames are.
Also I can now have a look at the base and the reference and make a plan, where to start and what I need to do.
In that case it is easy to see: we don’t need to change the eyes.
For most characters I start with the hair. The hair can cover clothing or accessories and therefore I like to have it done first - imagine you have specific clothing, spend hours to do it right just to have most of it being totally covered by long hair.
Step 3: The hair
Whenever you create something that is a new “part”, make a new layer and label it. In this case, I created the layer “hair” and copied two characters from my references onto it:
I need the princess for the color, her hair color is just perfect. And since the red-haired civilian girl as a similar length and style (not quite the same, but about right) I added her so I can make sure my result looks stylewise similar to hers in the end.
We are starting with a rough shape as base. Therefore I pick the middle tone marked in the color ramp I picked from the princess’ hair (the darkest one is just outline anyways) and just draw how it should look like.
Then I use the two darkes colors for the outlines and some shading. In this step you can also start to highlight separate strains. This is where the reference comes in very handy, as it is important to display the strains in a natural way.
After that, we use the tone between the midtone and the outline tones to soften the outlines, to shade the darker parts and to finish separating the strains. Even if I break up these lines again, I now have ensured that all lines that are in there are logically right.
Rule of thumb: The light in the RTP comes from the upper left, but sometimes characters are shaded with light from the upper middle, so they can easier be mirrored. You can see that in the base for example.
For characters, you usually need no dithering, that means no “checkboard pattern” in the shading, as they are too tiny to put that to a good use. There are few examples if you want to display scales or chainmail, but for regular hair and clothing you should avoid that!
After all the dark shading is done, add in the highlights, coming with the second lightest tone and following the strains you already drew.
Add in the last highlights and add your final tweaks. Maybe some lines were just not that right or you want to break up the lines that separate the strains a little?
Now you can use your front hair as base for the back hair:
After “deleting” the front structure and adding the new outline parts you can proceed to shade the same way you did with the front.
Tip: make sure you mirror the front hair if you use that approach, because we look at the hair from the other side here!
For the side you can either start from scratch and do it the same way we did the front or try to use this hack:
With pieces of the front and back hair I already made I am able to quickly put together a base I can use for the side view hair. It needs some care to be shaded according to the side though, but that way you can save a lot of time and make sure all the sides look very similar.
Now we need to animate it:
For all sprites in the left column you move the hair tips slightly to the left and for all sprites in the right one you move them to the right. Afterwards you fix the pixels that look off. This is repeated for all frames.
Of course we cannot have her running around like this, so the next step is to add clothing.
In our reference we can just see the blue shirt, but I assume it would look nice with jeans and white sneakers.
Make sure to add a new layer for the clothing first, that goes between the base and the hair.
If you have more complicated clothing you might want to split it up between several layers, in this case one is enough.
Tip: I usually disable the layer with the hair when making the clothing. That way I get a full set of clothing I can use with extra NPCs and generator hairstyles for example. It is also easier to get the shading right if you don’t have the hair in your way.
Step 4: Clothing
Before I start anything I pick my color references:
The shirt on the top is the color I need for my shirt, the dress is the clue for the jeans and the hair covering is the white for the shoes.
Unlike the hair where I prefer to first color the whole area and then add the shading, for normal clothing I prefer drawing the outlines and adding the shading then. That way I can use the shading of the base as direct reference and have an easier time to place the shadows and highlights.
This of course depends on the type of clothing - armors, skirts or capes are made by me the same way as hair.
Since the clothing is symmetrical, we can take a shortcut at some places. I marked all frames that have to be made, everything else can be filled with a mirrored version of another frame. This is important to keep in mind as it saves you a lot of time in the workflow.
Even if you have asymmetrical clothing, maybe you can seperate the asymmetrical elements on a seperate layer to save some time here?
For the movement, I copied the clothing over to the frame on the upper left. By toggling the layer with the clothing on and off you can piece by piece crop and move the parts that have to be different into the right places. Now we mirror that frame and add it into the frame in the upper left and the upper row is done!
For the back you can use half of your front clothing either as reference, or as I did here, as base. Since I am about to mirror the clothing anyways (as it is symmetrical) I can use the bare base on the right as reference on how to adjust the clothing. The movement frame is created the same way as the one for the front and we are already done with most of the clothing!
For side views I usually use a mixture of editing and pixelating to cover the three frames. With a complete front and back you have plenty of material to use as a guideline on how to create the clothing.
For the shirt I usually use a part of the front shirt as base to create the sideview and in this case it really worked well.
The pants and shoes were made from scratch on each leg, as they can be just added the same way you would color a book using the base as reference.
We are getting closer to the end, but there are two steps remaining.
Step 5: Accessories
Accessoires can add that extra detail to your character to make it stand out. There are a huge amount of possibilities here and I usually add them at last. In this case, we needed glasses and U used the Sci-Fi Heroine with the purple hair as reference on how to design them.
Since I added them at last and seperate, it is possible to reuse the other parts in other characters.
Step 6: Finishing
Everything casts a shadow. Now that we have all layers finished, it is time to add the shadows where they are needed.
The glasses cast a shadow on the skin and the hair casts a shadow on the clothing. By just adding a few dark pixels the whole character will look a lot smoother and less like random parts thrown together.
If you want to reuse the parts I’d recommend adding the shadows on a seperate layer, as a shorter hairstyle would cast a different shadow on clothing and base and so on.
And now we are done, or are we?
And this is the point where you might see small issues you did not notice before:
So, there is always the…
Bonus Step 7: Fixing your minor mistakes
In my case, I had forgotten to animate one frame of her front hair and I am not happy with how the sleeves in the front look like in the walking cycle.
Tip: Always make sure to carefully check how your result looks!
Just blindly working your way through a piece will have you ending up with glitches!
And now we got it!
I often hear things like “Well, if I had your talent...” but seriously, no one starts with a high pixel art skill. And since everybody starts at some point, why not make this your start?
I would always recommend characters if you want to start making pixelated graphics for RPG Maker, as you have a huge variation of references - literally all generator pieces and characters - and a base as well.
But before we start we need another thing, the character we want to display.
You don’t need a full artwork, but if you don’t it really helps to google for some references regarding the hairstyle and the clothing so you can make sure the result looks right.
In my case, the hero I want to be able to put into an RPG Maker MZ game is…
Step 1: Open your base and references in the graphic program of your choice
My graphic program of choice is graphicsgale, but that is all up to you. I kept hiddenone’s profile pic, my reference in a new empty image so I can have a quick look without leaving the program.
The base comes from the folder with the generator parts, and is in the generator->TV->female folder.
As references for both style and color I picked people1 and people3, as they have all the colors and references I need for this style.
Step 2: The image you actually work on
Then I start with a new image that is larger than just the charset, because that enables me to copy a reference next to my work so I can have quick access to the colors.
Also that ensures you never accidentally overwrite the original files. You could reinstall them, but why bother with that if you can avoid it.
Since I am going to use several layers, I’ll name this one “Base” and I also switched on a 48*48 grid, so I know where the borders of my frames are.
Also I can now have a look at the base and the reference and make a plan, where to start and what I need to do.
In that case it is easy to see: we don’t need to change the eyes.
For most characters I start with the hair. The hair can cover clothing or accessories and therefore I like to have it done first - imagine you have specific clothing, spend hours to do it right just to have most of it being totally covered by long hair.
Step 3: The hair
Whenever you create something that is a new “part”, make a new layer and label it. In this case, I created the layer “hair” and copied two characters from my references onto it:
I need the princess for the color, her hair color is just perfect. And since the red-haired civilian girl as a similar length and style (not quite the same, but about right) I added her so I can make sure my result looks stylewise similar to hers in the end.
We are starting with a rough shape as base. Therefore I pick the middle tone marked in the color ramp I picked from the princess’ hair (the darkest one is just outline anyways) and just draw how it should look like.
Then I use the two darkes colors for the outlines and some shading. In this step you can also start to highlight separate strains. This is where the reference comes in very handy, as it is important to display the strains in a natural way.
After that, we use the tone between the midtone and the outline tones to soften the outlines, to shade the darker parts and to finish separating the strains. Even if I break up these lines again, I now have ensured that all lines that are in there are logically right.
Rule of thumb: The light in the RTP comes from the upper left, but sometimes characters are shaded with light from the upper middle, so they can easier be mirrored. You can see that in the base for example.
For characters, you usually need no dithering, that means no “checkboard pattern” in the shading, as they are too tiny to put that to a good use. There are few examples if you want to display scales or chainmail, but for regular hair and clothing you should avoid that!
After all the dark shading is done, add in the highlights, coming with the second lightest tone and following the strains you already drew.
Add in the last highlights and add your final tweaks. Maybe some lines were just not that right or you want to break up the lines that separate the strains a little?
Now you can use your front hair as base for the back hair:
After “deleting” the front structure and adding the new outline parts you can proceed to shade the same way you did with the front.
Tip: make sure you mirror the front hair if you use that approach, because we look at the hair from the other side here!
For the side you can either start from scratch and do it the same way we did the front or try to use this hack:
With pieces of the front and back hair I already made I am able to quickly put together a base I can use for the side view hair. It needs some care to be shaded according to the side though, but that way you can save a lot of time and make sure all the sides look very similar.
Now we need to animate it:
For all sprites in the left column you move the hair tips slightly to the left and for all sprites in the right one you move them to the right. Afterwards you fix the pixels that look off. This is repeated for all frames.
Of course we cannot have her running around like this, so the next step is to add clothing.
In our reference we can just see the blue shirt, but I assume it would look nice with jeans and white sneakers.
Make sure to add a new layer for the clothing first, that goes between the base and the hair.
If you have more complicated clothing you might want to split it up between several layers, in this case one is enough.
Tip: I usually disable the layer with the hair when making the clothing. That way I get a full set of clothing I can use with extra NPCs and generator hairstyles for example. It is also easier to get the shading right if you don’t have the hair in your way.
Step 4: Clothing
Before I start anything I pick my color references:
The shirt on the top is the color I need for my shirt, the dress is the clue for the jeans and the hair covering is the white for the shoes.
Unlike the hair where I prefer to first color the whole area and then add the shading, for normal clothing I prefer drawing the outlines and adding the shading then. That way I can use the shading of the base as direct reference and have an easier time to place the shadows and highlights.
This of course depends on the type of clothing - armors, skirts or capes are made by me the same way as hair.
Since the clothing is symmetrical, we can take a shortcut at some places. I marked all frames that have to be made, everything else can be filled with a mirrored version of another frame. This is important to keep in mind as it saves you a lot of time in the workflow.
Even if you have asymmetrical clothing, maybe you can seperate the asymmetrical elements on a seperate layer to save some time here?
For the movement, I copied the clothing over to the frame on the upper left. By toggling the layer with the clothing on and off you can piece by piece crop and move the parts that have to be different into the right places. Now we mirror that frame and add it into the frame in the upper left and the upper row is done!
For the back you can use half of your front clothing either as reference, or as I did here, as base. Since I am about to mirror the clothing anyways (as it is symmetrical) I can use the bare base on the right as reference on how to adjust the clothing. The movement frame is created the same way as the one for the front and we are already done with most of the clothing!
For side views I usually use a mixture of editing and pixelating to cover the three frames. With a complete front and back you have plenty of material to use as a guideline on how to create the clothing.
For the shirt I usually use a part of the front shirt as base to create the sideview and in this case it really worked well.
The pants and shoes were made from scratch on each leg, as they can be just added the same way you would color a book using the base as reference.
We are getting closer to the end, but there are two steps remaining.
Step 5: Accessories
Accessoires can add that extra detail to your character to make it stand out. There are a huge amount of possibilities here and I usually add them at last. In this case, we needed glasses and U used the Sci-Fi Heroine with the purple hair as reference on how to design them.
Since I added them at last and seperate, it is possible to reuse the other parts in other characters.
Step 6: Finishing
Everything casts a shadow. Now that we have all layers finished, it is time to add the shadows where they are needed.
The glasses cast a shadow on the skin and the hair casts a shadow on the clothing. By just adding a few dark pixels the whole character will look a lot smoother and less like random parts thrown together.
If you want to reuse the parts I’d recommend adding the shadows on a seperate layer, as a shorter hairstyle would cast a different shadow on clothing and base and so on.
And now we are done, or are we?
And this is the point where you might see small issues you did not notice before:
So, there is always the…
Bonus Step 7: Fixing your minor mistakes
In my case, I had forgotten to animate one frame of her front hair and I am not happy with how the sleeves in the front look like in the walking cycle.
Tip: Always make sure to carefully check how your result looks!
Just blindly working your way through a piece will have you ending up with glitches!
And now we got it!
