Transparante webafbeeldingen en webafbeeldingen met matte

Met transparantie kunt u niet-rechthoekige afbeeldingen voor het web maken. Met achtergrondtransparantie, ondersteund door de GIF- en PNG-indeling, blijven transparante pixels in de afbeelding behouden en daardoor is de achtergrond van de webpagina door de transparante gebieden van uw afbeelding zichtbaar. (Alhoewel de JPEG-indeling geen transparantie ondersteunt, kunt u met een mattekleur de transparantie van de originele afbeelding simuleren.)

Knop met en zonder transparantie
Een webknop zonder transparantie (links) en een webknop met transparantie (rechts)

Bij achtergronden met een matte wordt transparantie gesimuleerd door transparante pixels te vullen of te vermengen met een mattekleur die overeenkomt met de achtergrond van de webpagina. Dit wordt ondersteund in de GIF-, PNG- en JPEG-indeling. Achtergronden met een mattekleur werken het beste bij webpagina's met een effen achtergrondkleur en als u weet welke kleur dat is.

Als u achtergrondtransparantie of achtergronden met een matte in de geoptimaliseerde afbeelding wilt maken, moet u beginnen met een afbeelding die transparantie bevat. U kunt transparantie maken als u een nieuwe laag maakt of het achtergrondgummetje of het tovergummetje gebruikt.

Als u met GIF- of PNG-8-bestanden werkt, kunt u transparantie met harde randen maken waarbij alle pixels die in de oorspronkelijke afbeelding voor meer dan 50% transparant zijn, volledig transparant worden in de geoptimaliseerde afbeelding. Alle pixels die in de oorspronkelijke afbeelding voor meer dan 50% dekkend zijn, worden in de geoptimaliseerde afbeelding dekkend. Gebruik transparantie met harde randen als u niet weet wat de achtergrondkleur van een webpagina is of als de achtergrond van een webpagina een structuur of een patroon bevat. Houd er echter rekening mee dat transparantie met harde randen gekartelde randen kan veroorzaken in de afbeelding.

GIF-afbeelding met en zonder transparantie met harde randen
GIF-afbeelding zonder transparantie met harde randen (links) en met transparantie met harde randen (rechts)

Achtergrondtransparantie in een GIF- of PNG-afbeelding behouden

De indelingen GIF en PNG-8 ondersteunen één niveau van transparantie: pixels kunnen volledig transparant of volledig dekkend zijn, maar niet gedeeltelijk transparant. (De PNG-24-indeling daarentegen ondersteunt meerdere niveaus van transparantie. Een afbeelding kan 256 verschillende graden van transparantie bevatten, variërend van dekkend tot volledig transparant.)

  1. Open of maak een afbeelding met transparante gedeelten en kies Bestand > Opslaan voor web.
  2. Kies in het dialoogvenster Opslaan voor web GIF, PNG-8 of PNG-24 als optimalisatie-indeling.
  3. Selecteer Transparantie.
  4. Geef bij GIF- en PNG-8-indelingen aan hoe u de gedeeltelijk transparante pixels in de oorspronkelijke afbeelding wilt behandelen. U kunt deze pixels laten overvloeien in een mattekleur of u kunt transparantie met harde randen maken.

Een GIF- of PNG-afbeelding met matte maken

Als u weet wat de achtergrondkleur is van een webpagina waarop een afbeelding wordt weergegeven, kunt u de functie voor mattekleuren gebruiken om transparante pixels te vullen of te vermengen met een mattekleur die overeenkomt met de achtergrondkleur van de webpagina.

  1. Open of maak een afbeelding met transparante gedeelten en kies Bestand > Opslaan voor web.
  2. Kies in het dialoogvenster Opslaan voor web GIF, PNG-8 of PNG-24 als optimalisatie-indeling.
  3. Voer voor de GIF- en PNG-8-indeling een van de volgende handelingen uit:
    • Om volledig transparante pixels transparant te houden en gedeeltelijk transparante pixels te laten overvloeien in de mattekleur, selecteert u Transparantie. Met deze functie voorkomt u het halo-effect dat ontstaat als een afbeelding met anti-aliasing wordt geplaatst op een webpagina waarvan de achtergrond verschilt van de achtergrondkleur van de oorspronkelijke afbeelding. Hiermee voorkomt u ook de gekartelde randen die ontstaan bij een transparantie met harde randen.

    • Om volledig transparante pixels te vullen met de mattekleur en gedeeltelijk transparante pixels te laten overvloeien in die mattekleur, schakelt u Transparantie uit.

  4. Selecteer een kleur in het menu Matte:
    • Kleur pipet (als u de kleur in het voorbeeldvak van het pipet wilt gebruiken)

    • Wit, Zwart of Ander (als u de kleur wilt kiezen met de Kleurkiezer)

Transparantie met harde randen in een GIF- of PNG-8-bestand maken

Gebruik transparantie met harde randen als u niet weet wat de achtergrondkleur van een webpagina is of als de achtergrond van een webpagina een structuur of een patroon bevat. Houd er echter rekening mee dat transparantie met harde randen gekartelde randen kan veroorzaken in de afbeelding.

  1. Open of maak een afbeelding met transparante gedeelten en kies Bestand > Opslaan voor web.
  2. Kies in het dialoogvenster Opslaan voor web GIF of PNG-8 als optimalisatie-indeling.
  3. Selecteer Transparantie.
  4. Selecteer Geen in het menu Matte.

Een JPEG-afbeelding met matte maken

Alhoewel de JPEG-indeling geen transparantie ondersteunt, kunt u met een mattekleur de transparantie van de originele afbeelding simuleren. De mattekleur vult de volledig transparante pixels en vloeit over in gedeeltelijk transparante pixels. Als de JPEG-afbeelding op een webpagina wordt geplaatst die dezelfde achtergrondkleur heeft als de mattekleur, lijkt de afbeelding over te vloeien in de achtergrond.

  1. Open of maak een afbeelding met transparante gedeelten en kies Bestand > Opslaan voor web.
  2. Kies in het dialoogvenster Opslaan voor web JPEG als optimalisatie-indeling.
  3. Selecteer een kleur in het menu Matte: Geen, Kleur pipet (als u de kleur in het voorbeeldvak van het pipet wilt gebruiken), Wit, Zwart of Ander (als u de kleur wilt kiezen met de Kleurkiezer).

Als u Geen selecteert, wordt wit als mattekleur gebruikt.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid