Ice Shadow Dolls: Tutorial

Tutorial: Getting Rid of Extra Background

I've run a few contests, now, and I've noticed something interesting. A lot of dollers either do not know how to avoid excess background on their dolls, or they haven't gotten the message that more than a pixel around the edges is unnecessary. All these people can't be intentionally ignoring the rules, so I'm betting not everyone knows how to do it properly.

Why don't you want extra background? Good question. First, many contests have size restrictions. If your doll is close to the limit, any extra space might make it too big to enter. Besides, a doll doesn't reasonably need more than a pixel around the edges. It increases the file size and makes site layout more difficult. All that blank space isn't doing anything, so why keep it?

Extra background will make you look like a novice doller, even if you aren't.

Would you want a sprite like this? Of course not... there's just too much background. The same applies to dolls. Just to prove my point, we're going to see exactly how big this file is.

The real problem is that there's just too much background, and we'll deal with that in a minute.

Checking the Size in MS Paint

It's really very easy. Just go to Image > Attributes or press CTL+E.

My goodness! That file is large enough to be a whole doll. A sprite should be somewhere around 30 pixels, certainly no more than 40 or 50. (Dolls can be any size, but some contests won't take dolls larger than a given size, usually 300x300 pixels.)

Phew, that's out of the way. Now that we've found the problem, let's see what we can do about it!

Cropping the Background in MS Paint

	First, I open the sprite in Paint. It looks exactly like the image above with all that white background. This won't do! I need to move the sprite itself to the upper right corner of the image. Moving the sprite is pretty simple. I pick the Select box from the tool bar, position a box around the sprite, then move her up to the top right corner. Hmm, it's looking better, but we haven't done anything with all that extra white space!
	The next step is easy, too. I need to find the corner of the image (marked here by a red box), and move it up to the edge of the sprite. Not familiar with this feature? In Paint, there are small boxes positioned around the edges of the image. If you put your mouse over one of them it becomes an arrow, and you can drag in the edge. It shouldn't be hard to find the small box at the corner... because it's at the corner. Eventually, I'll trim down the image so that there is only one pixel of free space around my sprite. I'll probably have to zoom in, reposition the sprite, and drag in the edges to make small adjustments until it's just right.
	Tada! No wasted space here, as there is only one extra pixel on each side. It's almost time to save the sprite. But, because we want it to be transparent eventually, there is one last step.
In order to make the sprite transparent, the background needs to be a very obvious color that isn't in the sprite itself. White won't work. I usually use a nice neon green, because it stands out and I don't usually use it in dolls. So, I pick bright green from the colors, then select the Fill tool (the paint bucket) and fill in the background. I have to make sure to get every little bit that is background, including the tiny area under one of her sleeves. Yay! It's done! Now we just need to save her, and she'll be ready to become a transparent GIF. Save the file as a 24-bit Bitmap. Nothing else will do. Paint can't handle GIF or JPEG conversions, and you'll destroy all the quality you've worked so hard for. Check out these examples... the files on the left, saved in Paint, just don't look good. The version on the right—saved as a bitmap then saved as a GIF in Irfanview, looks more like the original.

To finish her off, we'll just open her in Irfanview and make the file transparent. (Don't know how? Xandorra's GIFs in Irfanview tutorial will take you through step-by-step.)

Voila!

~top~