The Man in the Icon Mask: The Ol' Switcheroo

by Gughunter

Part One

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:

  1. type ctrl-C (Copy)
  2. click the up arrow button to rotate the icon upwards one pixel
  3. type ctrl-V (Paste)
  4. click the down arrow button twice
  5. type ctrl-V (Paste)
  6. click the up arrow button once
  7. click the left arrow button once
  8. type ctrl-V (Paste)
  9. click the right arrow button twice
  10. type ctrl-V (Paste)
  11. click the left arrow button once
Our green icon is a little more chunky!

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.

Part Two

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!

Part Three

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.

I feel somewhat intrigued by this topic title!
I suggest uploading the tutorials and articles as HTML files with a similar layout to the guild. Then using a custom content box (like what's already there) to link them.

The only problem is, that fails when it needs the DM tag.
I also happen to never care enough to download and view .rtf or .doc files, especially since they don't open up natively in my browser window, so maybe it wasn't the best solution. =/

Edit: Point being, hassle = bad, and I might not be the only person that is [not at all] lazy to the point of not opening up such files.
I was bored, so I converted it to HTML for you. And I made it pretty.

I zipped up the files for you. The HTML should already be set up to look for the pictures in the Guild's files. All you have to do is upload them and copy&paste the HTML from the file into a post.

Also, that process for creating an outline looks very useful! I'll have to try it next time :)
Gosh, you guys are hard to please! :)

Actually Tom pointed out that the RTF text isn't searchable via the blog search, so we're hoping to make the articles all HTML all the time.

DarkCampainger, thanks very much for the conversion. As it turns out, we need to use a slightly different directory structure, plus the HTML needs to be in the blog posts instead of HTML files (to be searchable), but I am grateful you cared enough to make the effort!
Ah, my mistake. Also, I forgot that when posting, all the actual returns in the html would show. If you could just humor me for a few more moments:

Upload the images (I altered the HTML to use the same directory as the images you have up now)

Preview a post containing this text.

It should only take a minute or two. I've already tested it on my blog, and it all works.
It should only take a minute or two. I've already tested it on my blog, and it all works.

I don't have access to the directory structure just yet (I do for the old BYONDscape site, but Tom did the file copying to the new site) -- I'll email Tom and see if he'll give it a whirl. Thanks!
Done! It looks good!
Magnificent! Thanks, DC and Tom.
I liked the bit on the icons outlining, didn't really know that one myself, as for step two that tied in really well. Step three is something that anyone can do really though.
Tiberath wrote:
I suggest uploading the tutorials and articles as HTML files with a similar layout to the guild. Then using a custom content box (like what's already there) to link them.

The only problem is, that fails when it needs the DM tag.

You could just use the pre tag. (preformatted text)