Skip to content

How best to draw icons?

Icons, for spells and abilities that is, are giving me a lot of trouble. There are several conversions I have to go through for every one - resizing, adding transparency, editing, and then resizing a transparent image becomes a problem... and this often several times over, again and again as I try to match the colors and shading of the colors BGEE uses. Just a little more green, no, too much, just a little lighter. The background is too light, nothing to do but open it in Paint again and edit it by the pixel, then it loses transparency and I have to pick a color there as well, all on a 32 x 32 pixel square. It doesn't stop there either - every icon has to be imported in a BAM through Near Infinity, which takes several steps too every time. I'm getting the carpal tunnel syndrome from this.

The icons in the game, if you squint down to them with what's left of your eyes, are well-drawn, especially the newer ones. They are anatomically correct if they show a creature, they have smooth gradient shading, and the abilities icons especially - the ones you click on to activate one - have these added highlights and dark spots over a stone background. I've given up on trying to match them for my icons, but I want some normal look for mine, at least. How did the designers do it? It really seems like every icon was originally a big picture, done with shading and highlights with a digital or a real brush, then shrunken way down perfectly without losing smooth transitions - whereas if I try to shrink something done beforehand to 32 pixels on the side, I get a mess that takes sorting out by the pixel. And they have so many of these icons, too, for everything. Not 5 or 10 but maybe 200.

I use Paint, FastStone for viewing and overall color adjustments, an online editor for transparency. Poor tools, but I doubt that something sophisticated like Photoshop would do much more good. What tools do you use for icons, if any?

Comments

  • semiticgoddesssemiticgoddess Member Posts: 14,903
    I don't know anything about creating icons, but I think that the devs probably did not create large images and shrink them down to 32 x 32 pixel images. The more you shrink down an image, the more details get lost, and often those details are the only reason the large version looks right.

    It would probably be in your best interest to use conventional brushes only to create a basic outline with very few details. Then, after you're shrunk it down and you have the basic look, you can fine-tune the details more or less pixel-by-pixel--which I believe is how the devs would have done it. It may seem time-consuming, but it's faster than, say, adding 5 pixels at a time, shrinking them down by 90%, and then trying to figure out where those 0.5 pixels went.

    In short, if your end result is 32 x 32, you should start with something very close to that number. Going pixel by pixel isn't so bad if your starting image only has a few of them.
  • chimericchimeric Member Posts: 1,163
    This was what I thought myself too, but if you look closely, you see different. Extract a spell icon BAM with Near Infinity and zoom in to it several hundred %. You'Il see that the color transitions are perfectly smooth, that the details are just where an artist would put them. Burning Hands, for example, has correctly drawn hands, where you can almost see the fingers, and with highlights on the knuckles area. It's just not something you can replicate if you try doing it pixel-by-pixel on a 32 x 32 pic under a huge zoom. You'll never get the transitions and shading right, it's torture. I began to have much better results when I started using a 500 x 500 "concept," against a contrasting background, which I then shrink down.

    I can't actually draw, but I can make a basic, more or less convincing shape. When I shrink it, hints of details remain - but ones that don't look right when you zoom out, those you have to invent by the pixel. The original icons have no trace of this doctoring, they look just wonderful at 100% zoom. And you really can't put in the shading right on the pixel level. Here is the extracted BAM for Gate. Zoom in on this and be astonished.

  • ThelsThels Member Posts: 1,416
    If you're currently stuck with programs like MS Paint, you may want to give Paint.net a try. It's a free program that has all the capabilities of MS Paint, and a ton more, including layers and transparency, as well as directly saving into various different formats.
  • chimericchimeric Member Posts: 1,163
    I'll check it out, thanks.
Sign In or Register to comment.