Voor websitebouwers: PNG-foto's met transparante achtergrond

[André Kok]

Hier nog enkele interessante links:

Over Photoshop, PNG en transparantie: http://www.davidchess.com/words/pngalpha.html

Over Photoshop Elements en PNG: http://help.adobe.com/nl_NL/PhotoshopElements/7.0_Win/WS3089C783-49BC-49c2-910A-D81A858CA3F0.html

André

[cemi]

Goede tip voor degene die het nog niet wisten.
Op een site die ik beheer voor een driebanden toernooi gebruik ik dergelijk PNG's ook...

[André Kok]

Op websites wordt in het algemeen het GIF-formaat gebruikt voor logo's, ikonen e.d. Het verbaast me dat het PNG-formaat hiervoor zo weinig wordt gebruikt. Voordelen van het PNG-formaat t.o.v. het GIF-formaat:

• Het komt uit de Open Source-hoek. Dat betekent dat er geen rechten kleven aan programma's om PNG's te maken. Die programma's zijn in het algemeen gratis.
• Het kent een alpha-kanaal. Dat houdt in dat je transparantie met een gradatie van 0 tot 255 kunt toepassen (per pixel). Daardoor zijn transparante achtergronden te realiseren waarbij de rand van het niet transparante object ontkarteld is. (GIF kent per pixel alleen volledige transparantie of geheel geen transparantie.)

Hoe maak je een foto met een transparante achtergrond? PS en PSE kennen ook een zgn. alpha-kanaal. Je kunt in PS (Elements) een nieuwe afbeelding aanmaken met een transparante achtergrond en daarin een stuk uit een foto in plakken. Klaar. Alleen dan zal de rand gekarteld zijn, hoewel het wellicht helpt als je bij het selecteren van een deel van een foto je met een zachte rand werkt.
Ik heb het op de volgende manier gedaan. Ik heb het voorwerp geplaatst op/voor een egaal gekleurde achtergrond met een kleur die niet in het voorwerp voorkomt, bijv. een geel snoepje op een blauw vel papier. Met behulp van PSE heb ik de foto verkleind en als PNG-bestand opgeslagen (nog zonder transparantie).



Met Greenfish Icon Editor Pro (een gratis editor; zie http://greenfish.extra.hu/) heb ik het bestand geopend en heb ik in één klap de blauwe kleur vervangen door transparantie. Van alle pixels (met name die langs de rand van het onderwerp) zijn de vier kanalen (rood, groen, blauw en alpha) herberekend. Verder nog wat bijgewerkt en klaar. Dit is het resultaat:



Zie PNG-demo voor een demonstratie van de toepassing van dezelfde PNG-afbeelding voor verschillende achtergrondkleuren. Zelfs de schaduw van het snoepje laat de achtergrondkleur gedeeltelijk zien.
Voor animaties is het GIF-formaat aangewezen. Voor zover ik weet zijn animaties met PNG niet mogelijk.
Zie http://www.libpng.org/pub/png/ voor alles over PNG.

André