Photoshop Sprites With Alpha Channel

Sage
Posts: 1,066
Joined: 2004.07
Post: #1
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.
Quote this message in a reply
Moderator
Posts: 365
Joined: 2002.04
Post: #2
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).

Neil Carter
Nether - Mac games and comic art
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #3
Thanks for the help. I'll give that a try and keep looking.
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #4
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.
Quote this message in a reply
Moderator
Posts: 365
Joined: 2002.04
Post: #5
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!

Neil Carter
Nether - Mac games and comic art
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #6
I would like to know what the difference between anti-aliased and aliased edges?
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #7
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.
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #8
Ok those helped. Thanks.
Quote this message in a reply
Founder
Posts: 1,138
Joined: 2002.04
Post: #9
Why TIFF? Why not PNG? PNG supports alpha channel and creates smaller files, with SUPERPNG, a free plug-in. Smile

Carlos A. Camacho,
Founder
iDevGames
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #10
Thanks. I'll check that out.
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #11
The built-in Save For Web works fine for PNG.
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #12
With the PNG is there anything "special" I have to do for the alpha channel?
Quote this message in a reply
Member
Posts: 156
Joined: 2002.11
Post: #13
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.
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #14
Ok thanks.
Quote this message in a reply
Moderator
Posts: 522
Joined: 2002.04
Post: #15
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
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Photoshop sizing and dpi Chamse 5 9,185 Apr 13, 2011 10:35 PM
Last Post: Anomalous Interactive
  Your favorite Photoshop tutorials Carlos Camacho 6 6,139 Nov 18, 2005 04:08 AM
Last Post: Fenris
  Photoshop transparency/alpha channels willman256 17 12,725 Oct 29, 2005 05:21 AM
Last Post: TomorrowPlusX
  Creating anti-aliased sprites in Photoshop Malarkey 9 11,195 Mar 7, 2005 09:52 PM
Last Post: arekkusu
  Generating Skybox Images in Photoshop Nick 9 14,305 Feb 24, 2005 08:15 AM
Last Post: jamie