Tutorial about generating transparent PNG's for use as tokens in a VTT or similar.

[Redrobes]

This is part tutorial or at least the process by which I achieve them, part call for people to add how they do them and part gratuitous attempt to get rep points to recover my place with GP and keep ahead of Ascention. Ok not really, but since I know your all thinking that I thought id mention it first

A chap who is using my app has discovered that to make tokens you need to make transparent images and is worried that he will spend half a lifetime drawing alpha transparency masks for all the images he wants to use. He is making a sci-fi world so I thought id use some non copyright NASA images to show what can be done and why its not going to take as long as one might initially think if you know a few tricks.

I use PSP 7 which is old enough that it does not cope with transparent PNGs natively apart from the type which has a single color index assigned to clear - like GIF say. I believe its actually better to deal with the alpha mask or transparency layer as a separate image but then I am forced to. PSP7 can deal with images with transparency but it lacks the capability to save them in PNG format. I believe that later versions do not lack this file format problem and Gimp / PS users definitely don't have an issue. Also, image magick can deal with them easily too though I know I am of a small minority of people which use it.

So back to basics and to recap some things which many will already know but its good to be complete here. Most image file formats have color information and no transparency information at all. These formats have red green and blue info or RGB. The common formats in this category are JPEG and BMP and both of these two can have full color images - like 16 million colors or so. Next up is GIF which holds 256 colors max - known as a color index format. You can optionally assign one of them to the transparent color. Then when viewed with the right viewer - like a web page browser (firefox / IE etc) it appears with 255 palette of discreet colours out of the 16 million possible and the one assigned to clear showing the background of the web page through the image. But that GIF is either totally clear or totally opaque. PNG has many colour options but the one we focus on is the RGBA where it has a channel called the Alpha channel and that is a greyscale layer assigned to transparency. So it can show any of the 16 million colors and it can also show them as fully opaque, fully transparent and also anything in between. In a VTT or stamp based tool you can use this effect to have image tokens which have a shape and fades - like fading out shadow portions of the image.

[Redrobes]

Right, so lets say you have a pic off the web thats a non copyright image, CC or otherwise able to rip. Its RGB like a JPEG image and you want to make it into a PNG token with a cut out shape. Heres an example. HiRes pics from here http://grin.hq.nasa.gov/subject.html but I am using smaller versioned ones for examples.

You could do this in a number of ways but this is the way I use. Starting with the X36 plane pic, look for a color that is definitely not in the image - like bright red. Get the single line tool and draw around it. What I tend to do is put the start point down near to where I want to start but a little away from the edge I am trying to follow. Then drag out the line and put the end point down exactly where I need it. Then without moving the mouse, start a new line and drag back to the starting point again but this time set the end point down exactly where it needs to be. The reason I do it this way is that you dont have to guess the angle exactly in one go. Like image below but end point 3 past the corner. Note, turn off anti aliasing for the line. Let it have jaggy edges. Otherwise it will blend red into the image and we will want to pick up the red in a mo.

[Redrobes]

So you have lined out the whole plane, use the selection magic wand tool and set the match color tolerance really high and pick a point in the background region of the plane. It should select all the background and up to but not including the red line. If its not hitting that then you need to adjust the tolerance. Normally something really high like 100 or so should do it tho if the red is sufficiently different to the image. Once that has done its thing then you can use the selection menu and use the expand selection by a few pixels - the number of pixels depends on the line size but basically set it to half the line width. If you have the 'marching ants' selection border showing it should now run through the middle of the red lines. Select the fill tool and set the fill match to none. Ie. Fill everything. Put that down in the background area and it should fill everything in the selection area giving a solid red background.

[Redrobes]

Touch up any missing little bits and then use the brightness tool to increase brightness by a large margin - like 50% or something like that.

Then select the fill tool again, set the match tolerance to 0 and set the color to black. Fill the light red area to black.

Now make the image greyscale using the color menu. Then use the brightness control again and add 127 brightness and 100% contrast. This should make everything not black into white. A touch of soften to smooth the edges down and your done.

[Redrobes]

Here is an example of the X36 token.

[Redrobes]

So that was a simple shape that had straight lines to cut out. How about something harder. This is not so bad *if* you can get a picture with a background color that is constant so that we can differentiate the image from its background. Images with a constant black or white background are best, then ones with all solid color. Here is the old and now burnt up Mir Space Station. Its pretty complicated to cut out but we can do most of that previous cut out process on it.

[Steel General]

Nice job RR! *bonk*

[Midgardsormr]

You've left out a step. Once you have your alpha mask, how do you connect it to your original image to form the PNG?

Obviously, as a Photoshop user, my interest is merely academic, but I've always been curious about how you get the PNG if your software can't save it that way to start with.

And since you mentioned Image Magick obliquely in your post, a primer on the use of that utility would not go unappreciated (at least by me), if you have the time someday. I'd really like to get to know it better for the batch processing capabilities.

[Redrobes]

Yes good point. OK lets hit two birds with one stone.

To convert a color image file_C.png and an alpha mask file_A.png into an RGBA transparent file.png you can call :-

composite %1_A.png -compose copy-opacity %1_C.png -depth 8 %1.png

in a batch file using image magick and pass in the name 'file' as the batch file parameter ( %1 ). Then you can call that batch file from another with a list of files that need converting if you wanted to - which is similar to what I do for Kimmo's character tokens.

In my app you load them in as a pair - see image - and save out the corresponding file.

[Redrobes]

I was going to post some more about ImageMagick but got distracted for a few hours....

Image magick is a command line script based set of programs which can manipulate images. There is no user interface so that puts a lot of people off but on the other hand it can be embedded into stuff like this forum for example which Arcana has said uses it to generate some of the attachment icons. Its very widely used if not widely known to be being used if you know what I mean.

For doing interactive stuff its completely useless but for doing stuff which has to be done time and time again its a strong tool. Gimp and many other apps are now embedding a scripting language into them to be able to do similar stuff so for those people they would stick with the UI launched scripts. But you can get IM on a lot of platforms with a small download and if you can get a command line shell prompt then you have a pretty big image wrench at your disposal.

There are about 4 commands but most people use just the one. Convert. It was called that because in the old days it used to convert one image file format into another and that was it. Then all the other stuff got added until its now fully featured. But make no mistake about it, even though it looks clunky and it is pretty slow, it does each job requested very very well indeed. Where there's an option to do a short and rough cut, it does not take it.

So to resize an image called in.png to out.jpg you can call

convert in.png -resize 800x600 out.jpg

and it will do it but if the aspect of the image was not 4:3 then it maintains the aspect of the original. If you definitely want it that size then call

convert in.png -resize 800x600! out.jpg

If the image was larger than 800x600 then it down samples it using a lanczos filter and if going up it uses the Mitchell filter. To put that simply, it uses very good algorithms in both directions. It uses pretty good defaults for just about everything in fact.

To go into detail about a lot of what it can do would take many many pages and there's oodles of spec and tutorial stuff for it out there. My seamless tiling script is windows batch file calling IM commands to do it so you can have a look at that to see it doing more complicated stuff.

My advice tho is go to the usage pages and see the zillion examples to do all the fancy stuff it can do if you know how. I have to look up loads and loads of stuff its too much to remember.

http://www.imagemagick.org/Usage/