PNGs

[garbanzo]

does anybody know a good web resource for learning more about working with PNG graphics? i've not used the format much, so i'm struggling to recreate some of the amazing transparency effects i've seen in skins posted here (like ThaPorthole - how???)

i've seen other skinned applications do similar things - use transparency with gradients to create 3D effects with the underlying desktop image. i've had some luck recreating it myself, but only very basic inset effects and the like.

a little research has suggested photoshop is not the best program to use because of quirks with the way it deals with PNG transparency. what do others use?

any pointers would be very much appreciated :)

edit - i can replicate all the effects i want using photoshop but only in grayscale, there is no transparency. what i really need is a tool/method to convert a black and white image to a transparent PNG, where pure white is 100% transparent and pure black is 0% transparent. any ideas?

[OtisBee]

well, i cannot confirm about any of the quirks you've been talking about.
i've always been satisfied with the way PS handles transparency on png's.

however it is important to create all your elements on a transparent background or at least on a canvas that you would be able to switch off when it comes to saving your output files.
this canvas could be anything. a wallpaper, a plain background, well anything.
all the elements you would create in the followup then, would be functioning as layers.
layers where you can apply different layer effects on (i.e. dropshadow, gradient overlay, bevel and so on).

when i design a skin i'd create the entire skin as a psd file (photoshop document) first and then i would use the marquee tool to select the whole workspace. in the next step i would deselect all the layers (make them invisible) that wouldn't be needed in the element i'm about to create. for example if i would like to create a play-button file, i'd have to deselect all the other skin elements until only the play-button would be left.
if the play-button is made from more then one layer i would select (singleclick) all the according layers by holding the ctrl-key at the same time.
when i'm done i'd click on edit >> copy to one layer and then i would create a new file (with transparent background) and paste the play-button into it.

then i would start all over again for all the other elements i designed to be part of my skin.

i've never used anything else but PS, so i can't say anything about other image editors.

however i've heard some rumours that paint.NET (http://www.getpaint.net/) is getting pretty big.
besides it's free and created by the open source community i guess.

macromedia fireworks, paint shop pro or the gimp are other PS-like apps, but again... i've always used PS and so i can't tell anything about them.

maybe others can. ;)

[garbanzo]

thanks OtisBee for the tips, they are definitely helpful!

as for the photoshop quirks, i only read about them. something with gamma, i didn't really understand. anyway i agree, it's been saving transparent PNGs fine for me.

it's interesting that you work on a transparent background. do you do your shading and highlights by hand? i'm very fond of photoshop's lighting effect filter that does it all for me, but it needs pixels to work with, it doesn't like to play with transparency! i wish i could paint shadows and highlights by hand, but my brain just doesn't work that way...

i'll just keep using photoshop and see where it takes me. thanks again!