Benutzerhandbuch Abbrechen

Verwenden von Transparenz und Hintergrundfarben

Suchen

Zuletzt aktualisiert am 22. August 2023

Transparente Webbilder und Webbilder mit Hintergrund

Durch Transparenz wird es möglich, Bilder für das Web zu erstellen, die nicht rechteckig sind. Hintergrundtransparenz, die von den Formaten GIF und PNG unterstützt wird, behält transparente Pixel im Bild bei und lässt in den transparenten Bereichen des Bildes den Hintergrund der Webseite durchscheinen. (Transparenz wird im JPEG-Format zwar nicht unterstützt, du kannst aber eine Hintergrundfarbe festlegen, um die Transparenz im Originalbild zu simulieren.)

Schaltfläche mit und ohne Transparenz — Webschaltfläche ohne Transparenz (links) und mit Transparenz (rechts)

Durch die von den GIF-, PNG- und JPEG-Formaten unterstützte Hintergrundfarbe wird Transparenz simuliert, indem transparente Pixel mit einer gewählten Hintergrundfarbe gefüllt werden, sodass sie mit dem Webseitenhintergrund übereinstimmen. Hintergrundfarbe funktioniert am besten, wenn der Hintergrund der Webseite aus einer Farbfläche besteht und du die Farbe kennst.

Das Originalbild muss transparente Pixel enthalten, damit du im optimierten Bild Hintergrundtransparenz oder -farbe erzeugen kannst. Du kannst Transparenz beim Erstellen einer neuen Ebene erstellen oder hierzu die Werkzeuge „Hintergrund-Radiergummi“ oder „Magischer Radiergummi“ verwenden.

In GIF- und PNG-8-Dateien kannst du Transparenz mit harten Kanten erstellen: Alle Pixel, die im Originalbild zu mehr als 50 % transparent sind, werden im optimierten Bild vollständig transparent und alle Pixel, die im Originalbild zu mehr als 50 % deckend sind, werden im optimierten Bild vollständig deckend. Verwende Transparenz mit harten Kanten, wenn du die Hintergrundfarbe einer Webseite nicht kennst oder der Hintergrund eine Struktur oder ein Muster enthält. Denke jedoch daran, dass durch Transparenz mit harten Kanten gezackte Kanten im Bild entstehen können.

GIF mit und ohne Transparenz mit harten Kanten — GIF ohne Transparenz mit harten Kanten (links) und mit Transparenz mit harten Kanten (rechts)

Beibehalten der Hintergrundtransparenz in einem GIF- oder PNG-Bild

Die Formate GIF und PNG-8 unterstützen eine Transparenzstufe, das heißt, Pixel können vollständig transparent oder vollständig deckend sein, jedoch nicht teilweise transparent. (Im PNG-24-Format dagegen wird abgestufte Transparenz unterstützt, das heißt, in einem Bild können bis zu 256 Transparenzstufen enthalten sein, von deckend bis zu vollständig transparent.)

Öffne oder erstelle ein Bild mit Transparenz und wähle „Datei“ > „Für Web speichern“.
Wähle im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“, „PNG-8“ oder „PNG-24“.
Aktiviere „Transparenz“.
Gib für die Formate GIF und PNG-8 an, wie teilweise transparente Pixel im Originalbild behandelt werden sollen. Du kannst diese Pixel an eine Hintergrundfarbe angleichen oder Transparenz mit harten Kanten erstellen.

Erstellen eines GIF- oder PNG-Bildes mit Hintergrund

Wenn du die Hintergrundfarbe der Webseite kennst, auf der ein Bild angezeigt werden soll, kannst du mit der Hintergrundfarboption transparente Pixel mit einer Hintergrundfarbe füllen, die mit dem Hintergrund der Webseite übereinstimmt bzw. die Pixel an diese Farbe angleichen.

Öffne oder erstelle ein Bild mit Transparenz und wähle „Datei“ > „Für Web speichern“.
Wähle im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“, „PNG-8“ oder „PNG-24“.
Führe beim GIF- und PNG-8-Format einen der folgenden Schritte durch:
- Wenn vollständig transparente Pixel transparent bleiben und teilweise transparente Pixel an die Hintergrundfarbe angeglichen werden sollen, aktiviere „Transparenz“. Durch diese Option wird der „Kranz“-Effekt vermieden, der entsteht, wenn ein geglättetes Bild auf einer Hintergrundfarbe platziert wird, die sich vom Bildhintergrund unterscheidet. Außerdem werden gezackte Kanten vermieden, die bei Transparenz mit harten Kanten entstehen.
- Wenn transparente Pixel mit der Hintergrundfarbe gefüllt und teilweise transparente Pixel an die Hintergrundfarbe angeglichen werden sollen, deaktiviere „Transparenz“.
Wähle im Menü „Hintergrund“ eine Farbe:
- „Pipettenfarbe“ (um die Farbe im Pipettenfeld zu verwenden)
- „Weiß“, „Schwarz“ oder „Andere“ (um eine Farbe mit dem Farbwähler zu wählen)

Erstellen von Transparenz mit harten Kanten in einer GIF- oder PNG-8-Datei

Verwende Transparenz mit harten Kanten, wenn du die Hintergrundfarbe einer Webseite nicht kennst oder der Hintergrund eine Struktur oder ein Muster enthält. Denke jedoch daran, dass durch Transparenz mit harten Kanten gezackte Kanten im Bild entstehen können.

Öffne oder erstelle ein Bild mit Transparenz und wähle „Datei“ > „Für Web speichern“.
Wähle im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“ oder „PNG-8“.
Aktiviere „Transparenz“.
Wähle aus dem Menü „Hintergrund“ die Option „Ohne“.

Erstellen eines JPEG-Bildes mit Hintergrund

Transparenz wird im JPEG-Format zwar nicht unterstützt, du kannst aber eine Hintergrundfarbe festlegen, um die Transparenz im Originalbild zu simulieren. Vollständig transparente Pixel werden mit der Hintergrundfarbe gefüllt, teilweise transparente Pixel werden daran angeglichen. Wenn du die JPEG-Datei auf einer Webseite platzierst, deren Hintergrund mit der Hintergrundfarbe übereinstimmt, wird das Bild scheinbar an den Hintergrund der Webseite angeglichen.

Öffne oder erstelle ein Bild mit Transparenz und wähle „Datei“ > „Für Web speichern“.
Wähle im Dialogfeld „Für Web speichern“ als Optimierungsformat „JPEG“.
Wähle unter „Hintergrund“ eine Farbe: „Ohne“, „Pipettenfarbe“ (um die Farbe im Pipetten-Feld zu verwenden), „Weiß“, „Schwarz“ oder „Andere“ (um eine Farbe mit dem Farbwähler zu wählen).

Wenn du „Ohne“ auswählst, wird Weiß als Hintergrundfarbe verwendet.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?