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

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

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections