Tuesday, July 31, 2012

A graphical puzzle

Yesterday, I tried to understand this graphical puzzle involving how alpha mask textures work. The idea is to replicate the effect accurately in Photoshop.

First up was the easy stuff. I'll use the WiiSpeak icon from Rock Band 3 as an example.
The texture has the alpha mask directly below the color. The icon is just going to be white.

In Photoshop, I split the alpha mask from the color region and trim down the canvas. Then overlap them. So now it looks like this.
Ideally, the mask would be used directly over the white color layer. Unfortunately, the only way I know for Photoshop to do that involves the use of selections. Selections are limited in that pixels that aren't above a certainly visibility are automatically removed from the selection. This means you'll lose detail. So with that in mind, a simple copy-paste to a layer mask will get the desired result.

So somehow, if green could be specified as an alpha color, it should act like white and "cut through" the color layer. The result with the green color is a partially transparent icon but otherwise, a perfect cut. At least that's how I expected it to work.

Moving on to a more complicated example, there's this menu graphic from Super Smash Bros. Brawl.
In-game, it's supposed to be color text that glows. However, all I have is this alpha mask thing. Obviously I've never worked with game textures so the best way I can understand it is that somehow the transparent part has to be color and the black must be screened out.

The solution I'm looking for should be simple, flexible, and involve no selections. Simply making all black transparent and clipping with the color layer, I get this.
The glow feels kind of dark but at least it's transparent. Unfortunately, filters which affect the opacity of certain colors like screen and multiply don't have any effect if there is transparency below. This means it didn't behave like I intended it to. However, clever blending tricks over an actual background reveals the results I expected.

It just makes sense. I have the PSD you may look at to further understand this.


city said...

thanks for sharing.

Post a Comment