Spriting 2- Transparency

[Amethyst]

Hello again, everybody! Today, since I've seen many people struggling with this for a while now, we're going to do something actually not all that difficult, but a pain to explain over and over. What, you ask? Scenario: You just came from [url="http://www.pokemonreborn.com/index.php?showtopic=483"]5 Minute Recolor Tutorial[/url] getting yo' swag on with your newly pimped out recolored sprite, but then... But then! The white background comes along and is crampin' yo style.
Such a background can be found below, as well as the end result:
[img]http://www.pokemonreborn.com/images/st/s2.0.png[/img][img]http://www.pokemonreborn.com/images/st/s2.6.png[/img]
Remember, this tutorial assumes that you already have Graphics Gale installed. If you don't, [url="http://gale.jpn.org/setgalefreeus.exe"]Do Something About That.[/url]
I'm also assuming you've reviewed the techniques from previous spriting lessons, and are comfortable enough with those to put them to future use. This tutorial won't have any cross over though, so that hardly matters.

So, to start, let's load up the image we're going to be murdering the background of in Gale. Oh, look, here's ours:

[url="http://www.pokemonreborn.com/images/st/s2.1.png"]http://www.pokemonreborn.com/images/st/s2.1.png[/url]

Grab the Color Selector Tool, it's that blue oval circled in the below image. You may want to double check that the Tolerance is set to 0, or something very close to that, via that drop down arrow nearby. Using the Color Selector, you can instantly choose all instances of a given color in the image. This makes it easy to select the background in an instant.

[url="http://www.pokemonreborn.com/images/st/s2.2.png"]http://www.pokemonreborn.com/images/st/s2.2.png[/url]

So do so. Left click the background with that tool, and you should see all the white areas light up with an outline.

The Outlined area is the part of the image that will be transparent. This means that you can really make any area transparent just by selecting it with whatever means please you, be that the Rectangular Selector, Color Selector, or Magic Wand- whatever floats your boat.

Once you have that, go to the Image tab up top, and choose "Make Alpha Channel". In the window that pops up, match the options to these:

[url="http://www.pokemonreborn.com/images/st/s2.3.png"]http://www.pokemonreborn.com/images/st/s2.3.png[/url]

Hit OK and the magic is done!

[url="http://www.pokemonreborn.com/images/st/s2.4.png"]http://www.pokemonreborn.com/images/st/s2.4.png[/url]

...Wait, it doesn't look like anything happened. The background of the image as you see it may or may not change depend on some hidden settings of the image itself. It doesn't really matter. What does matter is that you should see that little "a" on the layer viewer turn black from its normal inactive grey. It's difficult to see, so I've circled it in that image.
If that "a" is black, that means the image has an Alpha Channel, or transparent background. You can also click it to toggle it on or off.

That's basically, it, but don't go jammin Ctrl+S and calling it a day just yet. This is one slight nuance that Graphics Gale has, and that is that it won't save the transparency of an image unless you tell it to.
Go to File > Save As

[url="http://www.pokemonreborn.com/images/st/s2.5.png"]http://www.pokemonreborn.com/images/st/s2.5.png[/url]

Notice in the saving window, towards the bottom right, there's an option to check "With alpha channel". That means, save it with transparency. If you don't make sure this is checked through Save As, your changes probably will not be saved, so don't forget this!

Successfully saved, here we are, web ready, and white background-free:
[img]http://www.pokemonreborn.com/images/st/s2.6.png[/img]
Total working time: Less than a minute

[Dragonz996]

However if you're just doing a simple recolor (eg. editing of shirt). All you need to do is edit the original sprite and leave the background untouched, at least thats what I did.

[Yuki]

[quote name='Dragonz996' post='8892' date='Jan 5 2011, 08:23 AM']However if you're just doing a simple recolor (eg. editing of shirt). All you need to do is edit the original sprite and leave the background untouched, at least thats what I did.[/quote]
That's been covered in a separate topic.

However, I use paint.net GIMP and Photoshop Elements 9 for all of my graphical work. Paint.net has all the basics, is easy to use, and is typically the only one I end up using. When I'm making an animated GIF, I use GIMP. And for anything that either of those programs doesn't cover, (maybe I want a specific filter or text,) PhotoShop makes up for.

[Amethyst]

[quote name='Dragonz996' post='8892' date='Jan 5 2011, 06:23 AM']However if you're just doing a simple recolor (eg. editing of shirt). All you need to do is edit the original sprite and leave the background untouched, at least thats what I did.[/quote]

Yeah, that may or may not be the case depending on what sprite you work from, and what you do with it. I know Knight in particular had some issues with transparency after working on the Recolor Tutorial, which is what prompted this one.

[Godot]

[img]http://i1100.photobucket.com/albums/g405/DominsWolf/Sprites/DJWolfTrainerSprite.png[/img]