PNG24 opacity

J
Posted By
Jeff
Feb 21, 2008
Views
269
Replies
2
Status
Closed
I’m a new user of Photoshop. On the PC I have elements and on the Mac I have CS. I’d rather work on the PC if possible.

What I’d like to do is create a gradiant and set an opacity for that. Target use is the web and this would be PNG24. I see that there is a transparency option in the "save for web" dialog. But it is always grayed out. I’ve tried the "foreground to transparent" option on the gradient and then I tried everything else I could think of.

I’m sure there is something simple I’m missing. What do I need to do?

Jeff
Related Tags
opacity

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

T
Tacit
Feb 22, 2008
In article ,
Jeff wrote:

What I’d like to do is create a gradiant and set an opacity for that. Target use is the web and this would be PNG24. I see that there is a transparency option in the "save for web" dialog. But it is always grayed out. I’ve tried the "foreground to transparent" option on the gradient and then I tried everything else I could think of.

You have to create the image to be transparent in the first place.

Create a new image. Set the background to transparent in the New Image dialog. You will see a checkerboard pattern. The checkerboard indicates transparency.

Create your gradient, using the gradient tool in Foreground to Transparent mode.

Save the image as a transparent PNG using Save for Web.

When you have done this, be prepared to be disappointed; Internet Explorer 6 and earlier won’t display it properly. Sorry…

—
Photography, kink, polyamory, shareware, and more: all at http://www.xeromag.com/franklin.html
J
Jeff
Feb 22, 2008
tacit wrote:
In article ,
Jeff wrote:

What I’d like to do is create a gradiant and set an opacity for that. Target use is the web and this would be PNG24. I see that there is a transparency option in the "save for web" dialog. But it is always grayed out. I’ve tried the "foreground to transparent" option on the gradient and then I tried everything else I could think of.

You have to create the image to be transparent in the first place.
Create a new image. Set the background to transparent in the New Image dialog. You will see a checkerboard pattern. The checkerboard indicates transparency.

Create your gradient, using the gradient tool in Foreground to Transparent mode.

Save the image as a transparent PNG using Save for Web.

Thanks ever so much for the step by step. Much appreciated.
When you have done this, be prepared to be disappointed; Internet Explorer 6 and earlier won’t display it properly. Sorry…

Just FYI, there is a "hack" for IE5.5 and up.

I’ve got a little color design page. Normally you would have to create a new gradient for each color adjustment you want. But if you nest two divs and set a background-image for the inside you just have to set a background-color for the outside to change the gradient color. Of course, you need opacity for that!

Once more, thanks.

Jeff

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections