Jump to content

Variable transparency PNG?

Recommended Posts



I have a lot of experience with Photoshop (going back to the days of Aldus Photostyler). But, I stopped upgrading a 3-4 versions ago, just when they added PNG support. I haven't gained much PNG experience because that initial support was limited.

I've searched the forum and tutorials for my question. (Found a lot of useful info that I wasn't looking for, and made notes for future reference.).



I know PNG-32 can have a range of transparency for each pixel. What I don't understand is how to manipulate that "alpha" value. For example, how to create the kind of variable PNGs seen here (variable transparency sky).

I know how to create a layer with 50% opacity, save the image as PNG-32, and when I display it on a web page, it lets the web page's background color show through. The same level of transparency across the entire image.

But, what I don't understand is how to get a variable transparency like the sky example linked above. What tool do you use to create more transparency at the top, and less at the bottom? Or, feather the edge of a font to be less transparent near the font, and more transparent a few pixels away (so it's not jagged)?

I guess what I'm getting at is: With my older versions of Photoshop I know how to blend a transparent GIF into a color that matches the web page's background color. What I'm not understanding is how to do the same blending with the "a" channel of PNG's RGBA. I'm lost on how to translate my old GIF techniques using variable color to variable transparency.

If there is a tutorial that shows how to manipulate the transparency of various parts of an image, please refer me.


Link to comment
Share on other sites

I found the answer in the tutorial Beginner Image Merging which demonstrates the gradient tool's transparency mode. Now I see how to create a variably transparent sky like the example .PNG linked in my first post above.

I'm still not understanding how to manipulate transparency around the image of objects. Such as a smooth, transparent transition around a font's edge.

Link to comment
Share on other sites

variable transparency like the sky example linked above

The Gradient tool can be set to transparent and applied to opaque pixels.

The Gradient tool can be set to color, with either the primary

or secondary color set to zero Alpha -Transparency.

This can be applied to transparent pixels and produce an alpha gradient.

Alpha masking can also be used to make variations in alpha/opacity.

feather the edge of a font...so it's not jagged

Use Feather Object or AA'sAssistant


Feather Object

AA's Assistant

Alpha Mask Import

Edited by Sarkut
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...