iDevGames Forums
Photoshop Sprites With Alpha Channel - Printable Version

+- iDevGames Forums (http://www.idevgames.com/forums)
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Designer's Studio (/forum-6.html)
+--- Thread: Photoshop Sprites With Alpha Channel (/thread-6306.html)

Pages: 1 2


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 02:35 PM

Does anybody know where I can find help/tutorials for using Photoshop to create TIFF files with the alpha channel surrounding a character is set to 0 for OpenGL transparency (not sure if this is better suited here or OpenGL forum)? I'm pretty much as confused as you could possibly be so any help is appreciated.


Photoshop Sprites With Alpha Channel - NCarter - Aug 24, 2004 03:05 PM

I don't know of any tutorials, but I can point you in the right direction.

There are two main ways of doing this: you can draw your sprites on a transparent background or you can use a solid background.

If you use a transparent background, you can make a mask like this:
  • In the Layers palette, drag the sprite's layer onto the Add Layer Mask button at the bottom of the palette. This adds a mask which only includes the opaque bits of your sprites.
  • Go to the Channels palette, where you'll see a new channel with a name like "Layer 1 Mask". Drag this channel onto the New Channel button at the bottom of the palette to create an extra copy of the mask. You might want to click on the combined RGB channel while you're here.
  • Go back to the Layers palette and drag the layer mask (the right hand thumbnail) onto the Delete Layer button. Tell it to discard it when the dialog appears.
  • Finally, save in a format that supports alpha channels, such as TIFF or TGA (not JPEG).
Obviously, that's really long-winded so you might want to record it as an action!

If you want to use a solid background, do it this way:
  • Choose Select->Color Range from the menu.
  • Turn the fuzziness down to zero (if you don't need anti-aliasing) and click on the background colour in the image. Hit OK to select all areas of the specified colour.
  • Go the the Channels palette and press the Save Selection as Channel button to create a new mask channel.
  • As before, save your image in an appropriate format.

Incidentally, the first technique is better if you need antialiased edges. Also, I'm completely ignoring the possibility that you need to premultiply your alpha channel because I don't really understand how it works or why it's necessary (but it's only an issue if you need partial transparency).


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 03:24 PM

Thanks for the help. I'll give that a try and keep looking.


Photoshop Sprites With Alpha Channel - arekkusu - Aug 24, 2004 03:55 PM

You can use premultiplied alpha, or not, with GL. It just depends on your blendfunc and/or your texture combine settings. Unlike with CPU-based Quartz compositing, there's no real speed gain with premultiplied alpha; there is silicon in place to do the extra multiply per pixel.

Photoshop exports NON premultiplied alpha, of course.


Photoshop Sprites With Alpha Channel - NCarter - Aug 24, 2004 04:20 PM

Thanks for that information, that's helpful. What's the reason images need to be premultiplied in any case? Does it cause colour haloes or something?

arekkusu Wrote:Photoshop exports NON premultiplied alpha, of course.
Hey, after a bit of messing about with Photoshop CS and tiffutil, I think I've figured out how to make it save a premultiplied TIFF:
  • Make sure you're working on a transparent background (get rid of the Background layer).
  • Save as TIFF, and in the options dialog, turn on Save Transparency.

This generates a TIFF file which doesn't cause tiffutil to complain about premultiplication. Also, if you do it this way, you don't need to set up an alpha channel in the Channels palette at all!


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 04:24 PM

I would like to know what the difference between anti-aliased and aliased edges?


Photoshop Sprites With Alpha Channel - arekkusu - Aug 24, 2004 04:39 PM

Premultiplication is exactly what it sounds like- multiplying the RGB by the A prior to compositing. if you are going to composite the same image many times (i.e. scroll it around or whatever) then this is an optimization. Here's Apple's explanation. The optimization is worth doing when the compositing is done on the CPU, but not so important in GL. (You could of course come up with a complex texture combine mode where the extra multiply wouldn't fit in your available number of texture units... but for general blended texturing purposes it is free.)

You'll get wrong RGB values (i.e. halos) in translucent areas if you try to composite a non-premultiplied image as a premultiplied one, or vice versa.



Here's aliased edges.

Here's antialiased edges.


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 05:21 PM

Ok those helped. Thanks.


Photoshop Sprites With Alpha Channel - Carlos Camacho - Aug 24, 2004 05:48 PM

Why TIFF? Why not PNG? PNG supports alpha channel and creates smaller files, with SUPERPNG, a free plug-in. Smile


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 06:55 PM

Thanks. I'll check that out.


Photoshop Sprites With Alpha Channel - arekkusu - Aug 24, 2004 07:07 PM

The built-in Save For Web works fine for PNG.


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 09:03 PM

With the PNG is there anything "special" I have to do for the alpha channel?


Photoshop Sprites With Alpha Channel - FCCovett - Aug 24, 2004 11:15 PM

Just draw the sprites on top of a transparent background and the plug-in should generate the alpha channel from that.

Another alternative is to save your files as PSD, open them with Preview.app and then export them as PNG from Preview. You can open the Preview's NIB file to edit it and create a short cut for the Export menu item, or find a cheap ($10) batch converter on Macupdate.com.


Photoshop Sprites With Alpha Channel - Nick - Aug 24, 2004 11:42 PM

Ok thanks.


Photoshop Sprites With Alpha Channel - aarku - Aug 25, 2004 08:33 AM

FCCovett Wrote:Just draw the sprites on top of a transparent background and the plug-in should generate the alpha channel from that.

Another alternative is to save your files as PSD, open them with Preview.app and then export them as PNG from Preview. You can open the Preview's NIB file to edit it and create a short cut for the Export menu item, or find a cheap ($10) batch converter on Macupdate.com.

It's kinda obvious, but just to clarify that if he's using Photoshop he can just do a batch script to convert a bunch to png using the SuperPNG exporter. You don't need to be able to write in any scripting language -- you just record your action and go. Good stuff.

-Jon