Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > PNG experts out there?

PNG experts out there?
Thread Tools
Demonhood
Administrator
Join Date: Mar 2000
Location: Land of the Easily Amused
Status: Offline
Reply With Quote
Aug 9, 2004, 06:56 PM
 
This is both a web and art question, so we'll see who can find the answers.
Is it possible to save a PNG file with only an alpha channel, no actual image content?

To do what I want to do I need to be able to save a blank PNG with a unique alpha channel OR find a way to have multiple files use the same alpha channel (via css, xhtml, js, whatever).

This stuff impossible?
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Aug 9, 2004, 09:38 PM
 
Do you mean essentially a one color png with transparency? I'm confused. But I believe that's what you are getting at, and sure, you could do that.

Alternately, with CSS you can create the appearance of transparency by using a few fixed background images Like Eric Meyer's Complex Spiral.

I'm not sure of either of those will suit your needs, but it's a start. Or, there's a javascript solution, but I'm not sure if that's what you had in mind either.
     
Simon Mundy
Grizzled Veteran
Join Date: Jun 2001
Location: Melbourne, Australia
Status: Offline
Reply With Quote
Aug 9, 2004, 10:53 PM
 
Originally posted by Demonhood:
This is both a web and art question, so we'll see who can find the answers.
Is it possible to save a PNG file with only an alpha channel, no actual image content?

To do what I want to do I need to be able to save a blank PNG with a unique alpha channel OR find a way to have multiple files use the same alpha channel (via css, xhtml, js, whatever).

This stuff impossible?
I think I can see what you're getting at, but I'm unsure as to how you would achieve it. It looks like Imageready creates an alpha mask from the transparency mask of each active layer, so without any image data it wouldn't create any alpha masks...

I can't even see if it's possible to do this with PHP/GD as the PNG alpha seems directly linked to its image.

What's the visual effect you're trying to achieve - maybe there's a different way to look at the problem?
Computer thez nohhh...
     
Demonhood  (op)
Administrator
Join Date: Mar 2000
Location: Land of the Easily Amused
Status: Offline
Reply With Quote
Aug 9, 2004, 11:22 PM
 
Here is essentially what I want to do:

Start with an image I want to mask:


Make an alpha channel for the image (this is the PNG. aka, the tricky part):


Get third, masked image as result:


Now, I can already do this using CSS and XHTML. The only problem is that I have to decide on a background color. I'd like more flexibility. I want a zero color PNG image whose sole purpose is to act as a mask. This would enable me to use code like this:

Code:
div.maskme { background: #ccc url(lighthouse.jpg) no-repeat top left; } <div class="maskme"><img src="mask.png" align="left" /></div>
to mask the original image, regardless of background color. The background color could be defined in that one CSS declaration. Or even set to inherit. I'm starting to think, since I've been googling for a solution for the past few hours, that this may not be possible.
     
Simon Mundy
Grizzled Veteran
Join Date: Jun 2001
Location: Melbourne, Australia
Status: Offline
Reply With Quote
Aug 9, 2004, 11:58 PM
 
Originally posted by Demonhood:
Here is essentially what I want to do:

Start with an image I want to mask:


Make an alpha channel for the image (this is the PNG. aka, the tricky part):


Get third, masked image as result:


Now, I can already do this using CSS and XHTML. The only problem is that I have to decide on a background color. I'd like more flexibility. I want a zero color PNG image whose sole purpose is to act as a mask. This would enable me to use code like this:

Code:
div.maskme { background: #ccc url(lighthouse.jpg) no-repeat top left; } <div class="maskme"><img src="mask.png" align="left" /></div>
to mask the original image, regardless of background color. The background color could be defined in that one CSS declaration. Or even set to inherit. I'm starting to think, since I've been googling for a solution for the past few hours, that this may not be possible.
Yeah, that's what I thought you were after. It would be lovely to add a new attribute to CSS to allow image masking with another image... Sigh...

Why not create a Flash movie where you can pass a width, height, colour and image URL via GET parameters? Or do you want to account for users not having Flash?
Computer thez nohhh...
     
Demonhood  (op)
Administrator
Join Date: Mar 2000
Location: Land of the Easily Amused
Status: Offline
Reply With Quote
Aug 10, 2004, 06:47 PM
 
i hadn't considered the flash angle really.

i might just end up using a solid color to match the background color on the page. not as versatile, but i get the same effect.

it's too bad this might not be possible. it would be pretty darned useful. it'd likely even degrade well, since the PNG would just be layered on top of the original image. i'll keep looking and i'll let you all know if i find a solution. thanks.
     
MindFad
Posting Junkie
Join Date: Sep 2001
Status: Offline
Reply With Quote
Aug 13, 2004, 03:20 PM
 
Originally posted by Demonhood:
i might just end up using a solid color to match the background color on the page. not as versatile, but i get the same effect.


This is what I was going to suggest since I am not sure about the CSS/other code jive, and I'm not sure you can save a PNG's alpha channel and cut out the image data. This way will probably be easier to do, though not quite as technical as you'd hoped.

it's too bad this might not be possible. it would be pretty darned useful. it'd likely even degrade well, since the PNG would just be layered on top of the original image. i'll keep looking and i'll let you all know if i find a solution. thanks.
Agreed, that's a very cool idea you had if it's not possible. That would be handy. A type of built-in layer blending for the web. Would give you quite a bit of control over images.

Good luck with it, though.
     
ReggieX
Professional Poster
Join Date: Oct 2000
Location: Toronto, ON
Status: Offline
Reply With Quote
Aug 14, 2004, 01:19 PM
 
Just remember to not use Adobe's PNG exporter, it sucks.
Use Graphic Converter, PNGcrush or SuperPNG
The Lord said 'Peter, I can see your house from here.'
     
philzilla
Occasionally Useful
Join Date: Jun 2001
Location: Liverpool, UK
Status: Offline
Reply With Quote
Sep 14, 2004, 04:08 AM
 
did you ever solve this? did you try Fireworks?
"Have sharp knives. Be creative. Cook to music" ~ maxelson
     
Demonhood  (op)
Administrator
Join Date: Mar 2000
Location: Land of the Easily Amused
Status: Offline
Reply With Quote
Sep 14, 2004, 07:20 PM
 
i didn't solve it, no.
i don't think i have a copy of fireworks around here.
at this point i don't think it's possible using PNGs and HTML. i've scoured the web for more info, but i can't find anyone who has asked a similar question.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 04:32 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,