Verwenden von Transparenz und Hintergrundfarben

Suchen

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, Sie können aber eine Hintergrundfarbe festlegen, um die Transparenz im Originalbild zu simulieren.)

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 Sie die Farbe kennen.

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

In GIF- und PNG-8-Dateien können Sie 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. Verwenden Sie Transparenz mit harten Kanten, wenn Sie die Hintergrundfarbe einer Webseite nicht kennen oder der Hintergrund eine Struktur oder ein Muster enthält. Denken Sie jedoch daran, dass durch Transparenz mit harten Kanten gezackte Kanten im Bild entstehen können.

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.)

  1. Öffnen oder erstellen Sie ein Bild mit Transparenz und wählen Sie „Datei“ > „Für Web speichern“.
  2. Wählen Sie im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“, „PNG-8“ oder „PNG-24“.
  3. Aktivieren Sie „Transparenz“.
  4. Geben Sie für die Formate GIF und PNG-8 an, wie teilweise transparente Pixel im Originalbild behandelt werden sollen. Sie können diese Pixel an eine Hintergrundfarbe angleichen oder Transparenz mit harten Kanten erstellen.

Erstellen eines GIF- oder PNG-Bildes mit Hintergrund

Wenn Sie die Hintergrundfarbe der Webseite kennen, auf der ein Bild angezeigt werden soll, können Sie mit der Hintergrundfarboption transparente Pixel mit einer Hintergrundfarbe füllen, die mit dem Hintergrund der Webseite übereinstimmt bzw. die Pixel an diese Farbe angleichen.

  1. Öffnen oder erstellen Sie ein Bild mit Transparenz und wählen Sie „Datei“ > „Für Web speichern“.
  2. Wählen Sie im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“, „PNG-8“ oder „PNG-24“.
  3. Führen Sie 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, aktivieren Sie „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, deaktivieren Sie „Transparenz“.

  4. Wählen Sie 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

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

  1. Öffnen oder erstellen Sie ein Bild mit Transparenz und wählen Sie „Datei“ > „Für Web speichern“.
  2. Wählen Sie im Dialogfeld „Für Web speichern“ als Optimierungsformat „GIF“ oder „PNG-8“.
  3. Aktivieren Sie „Transparenz“.
  4. Wählen Sie aus dem Menü „Hintergrund“ die Option „Ohne“.

Erstellen eines JPEG-Bildes mit Hintergrund

Transparenz wird im JPEG-Format zwar nicht unterstützt, Sie können 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 Sie die JPEG-Datei auf einer Webseite platzieren, deren Hintergrund mit der Hintergrundfarbe übereinstimmt, wird das Bild scheinbar an den Hintergrund der Webseite angeglichen.

  1. Öffnen oder erstellen Sie ein Bild mit Transparenz und wählen Sie „Datei“ > „Für Web speichern“.
  2. Wählen Sie im Dialogfeld „Für Web speichern“ als Optimierungsformat „JPEG“.
  3. Wählen Sie 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 Sie „Ohne“ auswählen, wird Weiß als Hintergrundfarbe verwendet.

Mehr

Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie

[Feedback V2 Badge]