There isn't anything special with making images, just make the edges so there is only alpha and no mask color. For specific techniques it depends on what image editing software you use.
There are other issues when it comes to drawing at runtime.
Spineboy with non-premultiplied alpha:
Spineboy with premultiplied alpha:
The premultiplied tends to look dirty around the edges, but this isn't seen when blended correctly. Look at the eye images, you might need to open 2 browser tabs and switch between them.
With OpenGL blending you blend non-premultiplied alpha using GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA:
rgba = src.rgba * src.a + dst.rgba * (1 - src.a)
This is "traditional" blending. The reason this is problematic is looking at just alpha:
a = src.a * src.a + dst.a * (1 - src.a)
The first term is a*a, which isn't what you want. You'll see this is a halo around your images that should have clean edges. You can fix this with glBlendFuncSeparate, which lets you have separate blending for rgb and a. You would use GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA for rgb and GL_ONE, GL_ONE_MINUS_SRC_ALPHA for alpha:
rgb = src.rgb * src.a + dst.rgb * (1 - src.a)
a = src.a * 1 + dst.a * (1 - src.a)
Now your alpha doesn't get hosed.
With premultiplied alpha you do "src.rgb = src.rgb * src.a" either by processing the image file beforehand, at image load time, or at runtime (eg using a shader). Then you blend using GL_ONE, GL_ONE_MINUS_SRC_ALPHA:
rgba = src.rgba * 1 + dst.rgba * (1 - src.a)
This avoids the src.a * src.a problem and the result is the same as with glBlendFuncSeparate, because the src.rgb * src.a has already been done.
