ID:35156
 
Okay, a lot of the facts presented in this article are no longer facts (such as the 255-color limit mentioned in the very first sentence), thanks to 4.0 and also thanks to a 21st-century monitor which makes it clear that the colors I considered dark weren't really all that dark except on my dim 20th-century monitor. Plus I think a lot of this stuff was covered in a better article on TheMonkeyDidIt's blog not long ago. But I took the time to write this article and capture the screenshots, and I'll be doggoned if I'm not going to reheat it and serve it up again!


Though BYOND's color palette can only hold 255 colors for any given icon, those colors can be anything you want them to be. But that doesn't do you any good unless you know how to use the color picker to its full potential. Here are a few tips on how to use the picker, and I'll also throw in, at no extra charge, some new uses for the Swap button.

First let's take a moment to revisit something I touched on in a previous article, because it deserves a closer look than I gave it back then: the "custom colors" area. When you bring up the color picker (by double-clicking a color in the palette), you'll notice that this bar includes your currently selected color, plus some of its neighbors.

Notice where the arrow is pointing. Now take a look at the colors to the right and left of it, and we'll double-click to bring up the color picker for this color...

...and we'll see this custom colors area. The arrow in this illustration is pointing to the color we selected (BYOND puts a highlight box around it). As you can see, the colors surrounding it are the same colors that surround it in the palette. Except... why is it that the row of colors on the palette ends with a bright red-orange, while the colors in the custom colors section end with aqua? Simple. The palette row contains only twelve colors, but the "custom colors" area has sixteen. So the last color of the custom colors is actually the fourth color of the next palette row. (For a more vivid visual anchor, see that salmon pink in the custom colors? That's the first color on the row underneath the row we chose. Look back and forth a few times and it'll all make sense.)

That's how it works. But why should you care? Well, here's one big reason: BYOND's icon editor doesn't provide a "copy color" command, and copying colors can be very helpful -- especially when you want to make a bunch of shades of the same basic color. You could copy them by writing down the RGB values of the old color and entering those values in for another color, but it's a whole lot easier to keep your similar colors in the same row, and copy them from a single neighboring "base color" in the custom colors area.

Now that you understand how to copy colors, you might want to know some tricks for creating variations on them. BYOND's color picker is very helpful in this regard, because it gives you the option to use RGB values or HSL values. RGB stands for "Red, Green, Blue", and it's the standard method computers use for storing color information. Have you even looked at a TV screen up close through a magnifying glass? It's actually made up of very tiny bars of red, green, and blue. Every color a screen displays is created by displaying combinations of these three colors at various brightnesses. (You may have noticed that's not the same way you mix colors when using paint. With paint, red, blue, and yellow are the basic colors. When you're combining light instead of paint, all the rules change.)

It's not hard to get the hang of how RGB values work, once you understand how the colors combine together (for example: red plus green makes yellow, and if you add blue to that, you get white). But some egghead decided that this wasn't the way people normally think about colors, and developed a method of converting RGB colors into a different scale: "Hue, Saturation, Luminance," or HSL. You can think of HSL as corresponding to the fine-tuning controls on a TV set. "Hue" is Tint, which changes the actual base color (from pink to purple to yellow or whatever you like); "Saturation" is Color (which lets you range from black-and-white through normal color up to way-overboard, where a decent suntan can make a person look like an Oompa-Loompa); and "Luminance" is Brightness. It's a very handy way to work. If a color looks too bright and cartoonish, I lower the saturation. If I need to create a darker shade of a color, I lower the luminance. Pretty simple. Here are a few examples, all using the same hue (green), but varying saturation and luminance:

Here, the S and L values are at about half-power (these are at 120, and 128 is the exact halfway mark). This results in a nice medium green that would make a good base for a well-kept lawn.

I've upped the brightness (luminance) and lowered the color (saturation). This gives us an institutional gray-green. (If you didn't realize it yet, lowering saturation to 0 always results in a shade of pure gray, or black or white, with no color at all.)

Same luminosity as the previous example, but much more saturation. The extra color produces a perky, vibrant green that'd be perfect for a feisty widow's polyester pantsuit.

Even though the saturation is really cranked up on this sample, it doesn't look too colorful. That's because the luminance is very low. I find that saturation makes a lot more difference with brighter (higher luminance) colors.

While we're observing the tricky, treacherous nature of low luminosity, here's another thing to watch out for.

There's hardly any color here at all, right?

Now this has a little more.

Here you can clearly see the color.

You've probably guessed that all three ovals are the same color. But since it's a very dark color, it's hard to distinguish all the subtleties of it unless it's shown against a darker background. And it isn't just the immediate background that makes a difference; BYONDscape uses a very light background for its pages, and that's making the green look darker even within the black square.

The moral of the story: don't be surprised if, when you're trying to design graphics with dark colors in the icon editor, you have to go back and tweak the colors because they suddenly look too bright when you display them in your game. (You can anticipate this, in some cases, by using the Swap button and temporarily altering the editor's background color, as shown in the examples above.)

And there's a corollary to the moral of the story: don't get too crazy when designing dark, angst-ridden graphics, because people may try to play your game in a brightly lit room, and they won't be able to see all the nuances of your design. In fact, if the room is bright enough, they might not see anything at all. (This is actually a common complaint among players of horror video games -- some of them have to be played in a dark room or you can't see what's going on.)

We'll finish up this installment with a quick technique to save you time when drawing icons. The idea is to imitate what professional artists usually do: they sketch their art before they worry about the fine detail. The icon editor's Swap button makes this easy.

I'll do a very rough outline in light blue.

I'll do a second pass, drawing right over the first sketch, to bring out more detail.

I don't need the first sketch any more, so I swap the light blue with the background color.

I define my general color areas, and then swap away any remaining sketch marks. At this stage you don't need to worry about picking the exact color -- just pick something close enough, and you can change it later using the color picker. (In this case you'll notice that most of the colors carry over into the next icon; that's not because I picked them right on the first try, but because I changed some of colors. Always remember that your color palette affects every state in the current icon. If I draw a red rose and a red apple using the exact same color, and I change the red apple to a green apple, I could be in trouble. If I use the Swap button to change the apple's color, I'm fine; but if I actually change the red palette entry, then the rose will change too. This is probably the main reason why BYOND puts those little dots in the palette for already-used colors.)

Finally I add detail for the finished icon. (Yeah, his face looks kinda funny at this close-up level, but it looks pretty decent when he's shrunk down to a tiny icon. I won't go into too much detail about that now, though, because there'll probably be a whole article about it sooner or later.)

And now it's time for me to be on my way. You know, years ago, one of my co-workers caught one of his kids with his finger up his nose, and he said, "There's no winners up there." He was right. But there are plenty of winners among the sixteen million colors BYOND can display, so get picking.

hmm nice!..