Photoshop how-to: perfect fringeless alpha/perfect edgelines

News & General Discussion
1

This may be redundant, but my searches came up empty, so hopefully this is something useful! A Photoshop (or PNG) with alpha will have a white fringe in Unity (especially if viewed large). The Wiki has a great PDF tutorial that changes the fringe from white to black, which can be less noticeable, but is still a problem with light textures on light backgrounds, or when textures are viewed greatly enlarged.

EDITED: SEVERAL IMPROVEMENTS MADE TO THE PROCESS.

This Photoshop procedure will insure there is NO fringe at all. (It makes the semi-transparent fringe pixels have the true intended colors of the image, and then surrounds them with an additional layer of similar pixels for when the alpha channel is greatly enlarged causing it to bleed). It also works without needing to save a second copy of the image:

  1. View your Photoshop document with a transparent background, as intended, and Select All.

  2. Copy Merged (Command-Shift-C), then Paste to create a new layer (drag to the top of the list if you wish).

  3. Align the new layer precisely with the rest of the document (double-click Magnify to insure 100% view, use Move tool and arrow keys to nudge; Difference mode can help align–it goes black when perfectly aligned).

  4. Option-click the new layer’s eye icon (to hide all other layers). Then Command-click the layer to get a marquee.

  5. From the menus, choose Select > Save Selection (no name is needed) to store the alpha channel. Hit Command-D to deselect.

  6. Repeat the following pair of actions EIGHT times (jagged edges will appear):
    a. Drag the layer to the New/Duplicate icon (turning page) at the bottom.
    b. Press Command-E (Merge Down).

  7. Make four more duplicates (don’t merge) and nudge (arrow keys) the bottom four copies (NOT the top copy) one pixel in the four directions. Nudge one layer up, one down, one left, and one right.

  8. If you have a Background layer with the name in italics, make it visible. If you don’t, make a black (or other color) empty background layer and choose Layer > New > Background From Layer. (Without a true italicized Background layer, Unity will not use your alpha channel.)

The document will now be fringe-free in Unity.

When you need to make changes, discard the alpha channel and the newly-created top layers, make your changes, and repeat the steps.

Additional tip: a slight black fringe can actually help a foreground object stand out. But the usual “accidental” fringe is uneven, appearing only in places. To get a perfect hairline edge, add this step BEFORE making all the duplicate layers:

5a. Make an extra duplicate of the layer (separate from all other steps), on top, and add a Stroke. Color = black (or other color), size = 2 pixels (or try more–actual line will be half that), position = Center (important). Opacity sets how strong the edge is: try 100% for a distinct (thin) line, or 50% for some extra edge sharpness without looking like an obvious line.

Quick keyboard version:

  1. Command-A, Command-Shift-C, Command-V.
  2. Align layer at 100% view (v for Move). Option-click eye.
  3. Command-click layer, Select > Save Selection, Command-D. (3a. Add stroked layer if desired.)
  4. 8 x ( Duplicate layer, Command-E )
  5. 4 x Duplicate layer, nudge all but the topmost (up/down/left/right)
  6. Make sure you have an italicized Background.

(The alignment step is the problem with creating a recorded Action–I can’t get Photoshop to paste back in the same location that was copied from, so you must align manually. The rest could be an Action once I’m sure this is the best process.)

That’s all kind of a pain, especially when you need to make changes and have to repeat the process. True native alpha processing in Unity (which took the soft edge pixels at their true RGB values instead of mixing to white) would be great someday. But this is the best process I can come up with that truly has perfect results. Am I making this needlessly difficult? Is there a better way to have zero fringe? If not, I’ll add this to the Wiki!

2

This is a good tip. I always do alphas this way. The trick is to either “Contract” the selection down one pixel from the image, or better yet, create a second layer with the image blurred slightly to pick up the colors of the edges. You’ll get clean alphas every time with no white/black artifacts… the edges pick up the outer colors surrounding the alpha channel.

It’s actually surprising how many games you run into that don’t do this. One example is the GTA series, you can see the white borders around all their trees/plants in the environment close up. It might be an artifact of the relatively low resolution of the textures, but it completely destroys the “suspension of disbelief”.

[Edit] Anyone creating their alphas from PNGs… this is never going to work. Take the time to create proper alpha channels using the Tiff format where you can embed a “real” alpha channel.

3

I was using targas for my alphas generated from a single semi-transparent layer. When saved as a 32bit tga the alpha is automatically generated and the semi-transparent pixels made the correct colour without the need for any flattening. A nice and quick method. However, any unused pixels are made white, this would be ok but white creeps into the texture and low mip levels due to the interpolation.
Now I’m using the solidify plug from Flaming Pears free plug in pack.
http://www.flamingpear.com/download.html
Create your image and save your alpha from the transparency as in the wiki tutorial. Then, rather then flattening, apply the solidify plug in to the layer. It will bring all the pixels up to full opacity and fill all the unused areas with colour based on the surrounding pixels. Thus creating perfect alphas.
Been meaning to post this for a while but been busy graduating :slight_smile:

1 Like
4

Looks like its time to update that tutorial, now I just need to find the time :stuck_out_tongue: Thanks for the info guys. Jeff

5

Thanks. Flaming pear sounds like a real time-saver! That’s what my 8x step achieves.

However, even fully-solid pixels will STILL give you a SLIGHT fringe unless you expand beyond the borders by another pixel. A blur is a quick way to approximate that, or my 4x step achieves it fully.

6

Guys, it will be super helpful if youtube video can be made for this tutorial. I hope somebody do it

7

THIS POST IS ELEVEN YEARS OLD.

6 Likes
8

Unnecessary necro.

2 Likes