The Basic, Still-Image Battler Tutorial

[Ratty524]

The Basic, Still-Image RMXP Battler Tutorial
By your neighborhood friendly Ratty524

INTRO:
Hello, I'm Ratty524. Some might know me as being "The most annoying person to ever grace this web-board".

I didn't find any tutorials on how to make non-sprited, still life battlers anywhere on this forum (or it might just be buried deep in the mists of dead threads), and I feel that some people really need it, as a lot of problems are often in the battlers that these "newbs" create other than lack of artistic skill. So in this tutorial, I'm going to teach you MY way of making battlers, and making sure they look good on RMXP.

This is the first tutorial I've ever made here, so bear with me. >_<

What You'll Need for this Tutorial:

1. Any type of image editing program that can support layers and create good quality images. I'm using Adobe Photoshop CS3 for this tutorial, though similar methods might work for other programs, though I haven't really experimented with them as far as battler-making is concerned. In addition, try getting used to the program so that not a lot of what I say would confuse you.
   
2. Some artistic knowlege. I'm not going to be covering basic artistic principles here such as color theory, proportions, etc. You can learn all that jazz on your own time.
   
3. Time to devote to. Artwork, or anything that has complications for that matter, takes time. Even if you are making something small and simple (like the example I quickly set up), you'd still want to put in an hour at the least. If you felt like you did this within minutes, chances are you are not doing it right.
   Those three things are all you really need. Shall we get started?
   
   PART 1: What makes a good Battler and Getting started
   
   What makes a good Battler?

   Before you say "OMG IMMA GONNA MAKE A BATTLER!!11" there is one, major you have to consider about how you are going to do it: That's making the battler "dynamic".
   
   What do I mean about making the battler "dynamic"? Well, picture this: You and your party are wondering through The Forest of X, and all of sudden an EEEEVIL monster appears. Would you stand straight up and look at the beast, or will you most likely bend your knees, raise your sword, get a mean look and get ready to attack the monster? The answer to that question should be pretty obvious, you want to make your battlers (both enemy and player) look more like they're "ready for action".
   
   For further example:
   
   - Artwork by Hethe Srodawa
   While these would be good as far as character design is concerned, they're not something that you'd ideally want as a battler. They're standing upright and they don't really suggest that "dynamic" feel that should show when making battlers.
   
   Now for the next:
   
   - Artwork by Mark Heike
   This is more along the lines of what you would want. Notice how this character pose has much more of an "action packed" feel than the other? She looks ready to kick some arse, that's the type of pose you would want.
   
   Please understand that this should apply to any battler you make. Even if you make an enemy battler that's supposed to look kirby-esque cute, you should probably give it a pose that represents SOME sort of action. Otherwise, you'd kind of give off a dull, "blah" feel to your battles instead of something more interesting.
   Getting Started

   Now that you have some understanding on what a battler should look like (some people just do it on accident, it's pretty much common sense), you can start making your own! Usually, the best way to do it is to draw your battler image on a sheet of paper and scan it into your system, make sure to draw it a little bit large, because on your computer they'll look larger than on your paper, plus it gives you room to add a lot of details.
   
   For this tutorial, I quickly drew and inked a small, goofy-looking critter to go through the process of becoming a battler:
   
   This one should be pretty easy to work with and won't take too much time compared to more complex battlers, which you might try to work with in the future.
   
   From here on, I'm going to be working with Adobe Photoshop, sorry if there are some things that might confuse you non-photoshop users.
   

   1. First, start up Photoshop and open the image you want to use as a battler. Try cropping the image so that you don't have too much space, and adjust some contrast and other levels if necessary. Make sure your image mode is set to RGB color.
      
   2. Create 5 basic layers: One for your outline, one for your base colors, one for black & white shading, one for shading color areas, and the last one for your highlights. The layers that are considered "special" would be your black & white, color shading, and highlight layers as I will demonstrate:
      
      The only reason I have this layer is because when I set the mode to "overlay", it doesn't really get the shade I want for more white/gray colors. Note that the opacity is set to 50%, you don't really need to have a super-dark shade to begin with, unless you are going for more of a DC comic book style or something.
      
      
      In the "color shading" layer. The mode is set to "Overlay". I've found that this mode is especially great if you are doing cell-shading and the like, as it makes dark colors match your "base" color in shading.
      
      
      Finally the highlights. The mode here is set to "screen". This makes what you paint on your battler a bit brighter than usual, perfect for drawing areas where light is reflected.
      
   3. After all this is done save your .psd file in whatever folder you keep such images in. It will be important to save frequently from here on. You may never know what will happen.
      
   4. Additional layers: The five I listed would be some of the basic layers you would need, but other layers might be necessary for how you want your battler to look like. Go ahead, add away, just try to keep them BELOW your "shading" layers.
      
   
   
   PART 2: Outlining and Coloring
   
   Making your outline

   For the little guy I'm using in this tutorial, making his outline is as easy as "playing with your magic wand" (Joke intended).
   
   First, try zooming in on your image so that it's easy to work with (use the "fit screen" button when you have the "Zoom" tool selected. Second, select your magic wand tool. Make sure that the tolerance is is set to a high value and that Anti-Alias is turned OFF as in the picture below:
   
   
   Hopefully, you did not get rid of that default layer "Background" in this process (if you did, I feel like I have a reason to insult you). In that default layer, use the magic wand tool to select the area of your outline. Now go to your outline layer, and select the Paint Bucket tool in your tool bar, (Important: Pay attention to what color you have set in the foreground and background) use the tool on your selected area and viola:
   
   Your outline layer should look more like this. Now that you have a more clean image to work with, get rid of the default Background layer, you won't need it anymore.
   
   (>:o) Mr. N00bie Says: "WAIT! THAT OUTLINE LOOKZ PIXELLY! WHY DON'T U SET IT 2 ANTI-ALIAS!?1111"
   
   Simple, my boy. I'll introduce you to some of my logic about this:

   • Since the image is going to be resized anyway, the pixelly outline won't really matter as a quality deduction.
     
   • It is a THOUSAND times easier to color and work with than if it was done in a bush tool type of style.
     
   • Since the outline would't be "smooth", there would be less "extra pixels" you have to take out when trying to import this to RPG Maker XP. Here's two examples of the linework with and without anti-aliasing:
     
     
     Notice the difference between the two? One looks more clean and easy to select and color, the other has a blurry residue that you'd have to try to delete repeatedly in order to get rid of. In my opinion, turning anti-alias off when making your outline is the way to go.
     

   (^_^) Mr. N00bie Says: "OOOHH KK! I THINK DAT WORKZ!!11"
   
   ... Yeah.
   
   (:D) Mr. N00bie Says: "YAY I THINK IT LOOKZ BETTER 2! NOW DAT I HAVE MY OUTLINEZ I CAN COLOR RIGHT, RIGHT!?"
   
   WRONG! Before you move on to that, take a good look at your outline. Are there any extra pixels sticking out that you don't want? Do you want something to look cleaner? This is when you'll use the eraser and the pencil tool together.
   
   Select the Eraser tool, and set the mode to "pencil". You'd also want to right click your brush tool and change it to pencil if you haven't already done so.
   
   Now just clean up your outline until you get something you are happy with. Remember: This is a process that has many steps to it and takes T-I-M-E. Once you have an outline to your satisfaction, it is time to color and shade it.
   
   (^v^) Mr. N00bie Says: "YAAAAAY I LUV COLORING!!!111"
   
   Coloring and the likes

   Now that you have your outline, you can start adding the "base colors" of your battler.
   
   Select the magic wand tool, and highlight the areas that you want to have colored. Important: NEVER, EVER use pure white as your color. Selection down a few notches so that it appears to have a tint of gray to it, but not so much that it looks like a light gray. The reason for this is that white can easily become a transparent color, and you don't want it too look weird when importing it to RMXP.
   
   This is the colored version of the monster battler for this tutorial. I've added additional layers for the pink spots around the sides of its mouth and a tongue. While I won't try to go into too much depth on how to improve your artwork, you should choose colors that aren't highly saturated or "pure". It's what separates something that looks completely cheesy and something that looks slightly more professional.
   
   
   Now that you have that done, you'll be selecting from the color layer from here on. Do that and go to one of your shading layers, select a color that is around a darker shade of gray, and shade away. Use both the paintbrush (set it to that tool if you haven't already), and the eraser tool (set to "paintbrush" mode) in unison to fix up and add some shading to it.
   
   Here are a few general tips about shading your piece:
   

   1. Know where your light source is coming from, and shade according to that.
      
   2. Try avoiding to shading/adding highlights with pure blacks and pure whites.
      
   3. Determine how dark or how light you want the shading/adding highlights to be. Experiment with the darkness of your colors to see which results suit you best.
      Here is my finished result:
      
      I've decided to give this guy a more cell-shaded type of style, but any technique that floats your boat will work here. By this time you should have utilized all the layers you have set up. Now for the final part, I will cover resizing and importing.
   
   PART 3: Pluggin' it in to XP
   
   Resizing and Importing

   One annoying problem that I see by the masses is that they do not seem to understand the size you should consider when trying to fit it into RMXP. For this, try exporting an RTP battler and opening it in photoshop to get the dimensions of the "standard RMXP battler".
   
   These are the dimensions of the "Aluxes" battler, 111 pixels in width and 170 pixels in height. While that may look pretty small to you, on RMXP it's considered a pretty "middle sized" battler.
   
   By now I have already flattened the layers of my image. Use the sample RTP battlers and compare the sizes. Do you want your battler to look smaller than the average battler, same size, or larger? Experiment with the image size option in the "Image" tab, until you get what you want it to be. Important: When resizing your battlers, make sure you have "Constrain proportions, check marked and that your "resample image" check box is set to Bicubic.
   
   Now that you have your desired image size (I made mine the same height as the Aluxes battler), go to Image > Mode > Indexed Color to change the mode from RGB color to indexed color.
   
   When you do select this mode, this window appears. I usually keep the settings the same, just make sure that "Transparency" is check marked, and click ok.
   
   Now your default layer will say "index", and any brush-type tool will behave in a way similar to the pencil tool. Select that white "background" like so:
   
   Keep in mind that you might want Anti-Aliasing to be on and the tolerance to about 50 or a little higher. You want to make sure that "Bad pixels" are selected to be deleted without losing some details on your outline and/or colors.
   
   After deleting the white background, your battler would look something like this.
   
   (^,^) Mr. N00bie Says: "OMG YEZ IM DONE RIGHT!?"
   
   No, no, NO! Don't always think you are instantly "done" with something like this. There may be some ugly pixels sticking out that you don't want. You'd be pretty much repeating the step of cleaning your outline, you want to clean up the battler so that it looks better to you. Another recommendation, for the areas you colored "gray-tint white", zoom in on those areas to make sure there are no "pure white" specs around it, and edit it so that would be the case.
   
   This is what my battler now looks like on photoshop, and here is my finished product:
   
   Save your finished work as a .png file into wherever you keep your battler resources.
   
   Now for importing, you will be asked to specify the transparent color before it is added to your material folders, just select that white background and you're good to go. If you followed directions, your battler would look about as clean as this:
   
   There you have it. A good battler that looks nice on the system. :)
   
   (:o) Mr. N00bie Says: "OMG THX RATTY I MADE MY BATTLER HERE IT IS!111"
   
   
   ...
   
   (:S) Mr. N00bie Says: "... WUT?11"
   Other methods?

   As I've said earlier, this is only my way of making battlers. There are some alternate methods of doing this that might work as well:
   

   1. If you didn't ink your work before you scanned it, simply go to your "outline" layer and use the pen tool to trace over your lines. Remember to have it in "pencil" mode, and the width I recommend for brush sizes is 3 pixels, or more if you want to add a more thicker outline.
      
   2. I've recently discovered that you can spruce up your outline by using the "blending options", which you can access by right-clicking your layer. Select "outer glow", change the color to a dark, outline color, set the mode to "normal" and "precise", change the "size" and "spread" gauges to zero pixels and you'd get a nice outline that really pops out. Try it out and see the results.
      
   
   Conclusion:
   I hope this tutorial was a help for some of you, and I hope I didn't screw up TOO much. If you have any comments, criticisms, or suggestions on other methods you could use for making battlers feel free to post them.