I'm not a trained artist. But I am a guy who knows what he likes, and when you're dealing with a canvas 32 pixels square, that and a little bit of patience is usually all you need. You're short on patience, you say? Guess what: so am I, and that's why a lot of my tips are going to deal with ways of making the icon editor do the work for you.
Let me first introduce you to the notion of the "go-to color". This is a color that you don't intend to use in your finished icon, and preferably one that will stick out like a sore thumb. In the examples here, I'm going to use neon green as my go-to color. If you're working on an icon that actually requires neon green, then choose tangy orange, or midnight blue, or anything that you'll be able to spot easily.
Now I'll draw up a little icon for us to work with.
| Meet Applehead! In real life, Applehead is a benign Ferrara Pan candy, but for our purposes we'll say he's a fearsome demon pulled from the pages of Appalachian folklore. You can get your own copy of the Applehead icon with this link (feel free to use him in your games). Our first trick with Applehead is a little technique I call "color infection": creating an icon state that has the same shape as Applehead, but none of the colors. This is very easy to do (as long as your icon doesn't contain too many colors). First, I make a copy of the original icon state: I single-click on it, press ctrl-C to copy it, and and ctrl-V to paste a new copy of it. Then I double-click the new icon state to bring up the pixel editor. And I click the Swap button. |
I've swapped the arm color with neon green by clicking on the arm, then on the color palette.
I've swapped the dark red with neon green by clicking Applehead's chin, then clicking the green arm right next to it. No need to reach back over to the color palette -- from here on out, you just click on two pixels right next to each other!
I continue swapping non-green with green throughout the icon.
Voila! Assimilation is complete.
Now we have a completely green Applehead. At this point, you're probably wondering why we took the trouble. Well, there are two reasons. The first reason is that mastering this "color infection" technique is a valuable exercise that teaches you more than you think... kind of like the old "wax on, wax off" routine. The second reason -- well, you're just about to see. Make a copy of this icon and enter the pixel editor again. Now take these steps to expand the icon one pixel in each direction:
|  |
Now for the piece de resistance. Copy the original Applehead icon and paste it on top of this:
  | Applehead has a crisp, clean outline! Swap with whatever outline color you like; basic black is always tasteful. But try to use a different shade of black than you use in the rest of the icon -- that way you can swap the outline color again later without messing up everything. Now, why did I have you do all this work when you could have just drawn the outline yourself? Because for large icons with irregular outlines, this method is actually faster (at least once you've practiced it a few times). But if you're skeptical, let's go to part two and I'll show you another way to use the "color infection" technique. |
| Now we're going to give Applehead something nice to wear. I'll use blue as the go-to color here, just to confuse you. I want to swap the outline color with the go-to color, because I want to be able to see where I need to add new outline once I draw the outfit. Here's Applehead, with the outline color swapped and some of the other colors swapped just to keep things simple. I've given Applehead a new outfit. See that black dot there? That's a new bit of outline, so the dress will fit in with the rest of the graphic. I use the "color infection" technique to replace all the original icon with the transparent (gray) color. All that's left is the outfit, which can be used as an overlay.
|   |
During the game, you can overlay this outfit whenever you want. Applehead feels fresh as a daisy in his pretty summer dress!
 And finally, now that we've seen all this fancy stuff, we'll finish up with a trick that should seem pretty simple if you've been paying attention. We're going to create a new version of Applehead as a Granny Smith apple, by swapping the shades of red with shades of green.Now we have a second type of monster, and it only cost us about ten seconds of work! And since this is based on the original Applehead icon, the Green Applehead can still wear the same dress. |
You might only use these techniques once in a while. But if you master them, you'll have a better understanding of the power of the icon editor... and we may be seeing these techniques again, later down the road.
