Behalten Sie beim Exportieren einen transparenten Hintergrund bei PNG

Ein transparentes Asset enthält einen Alphakanal, der beschreibt, welche Pixel sichtbar sind. Das unterscheidet sich von einem Bild eines Schachbretts. Wenn Sie einen Screenshot heruntergeladen haben, der ein Schachbrett hinter einem Logo zeigt, handelt es sich bei diesen Quadraten möglicherweise um normale sichtbare Pixel. Wenn Sie diesen Screenshot als PNG speichern, werden sie nicht entfernt. Öffnen Sie das reale Asset in einem Editor und prüfen Sie, ob der Hintergrund tatsächlich durchscheint.

Dieser Arbeitsablauf ist nützlich für einen vorhandenen Ausschnitt, ein Rasterlogo oder ein Overlay, das eine kleinere Lieferversion benötigt. Es kann kein Motiv identifizieren, keinen Hintergrund löschen oder eine schlecht geschnittene Kante ersetzen. Nehmen Sie diese Änderungen zuerst im Originaldesign vor. Behalten Sie einen bearbeitbaren Master und exportieren Sie daraus ein transparentes PNG. Verwenden Sie diese Seite dann, wenn Sie eine andere Rastergröße benötigen, ohne den Hintergrund absichtlich zu reduzieren.

Die Voreinstellung behält die Originalpixel bei, wählt PNG und schaltet die Schärfung aus. PNG ist hier die Ausgabe, die die vorhandene Transparenz beibehält. Die JPEG- und WebP-Exporte dieses Tools verwenden einen undurchsichtigen weißen Hintergrund. Wählen Sie sie daher nicht für ein Asset aus, das über verschiedene Seitenfarben funktionieren muss. Der Qualitätsschieberegler steuert nicht die verlustfreie Komprimierung von PNG.

Für eine kleinere Kopie wählen Sie „Anpassen“ und geben Sie das verfügbare Feld ein. Dadurch bleiben die ursprünglichen Proportionen erhalten, ohne dass die Kanten abgeschnitten werden. „Exakte Größe“ schneidet auf die gewählte Form zu und entfernt möglicherweise einen Schatten oder einen Teil der Markierung. Verwenden Sie es daher nur, wenn Sie diesen Zuschnitt wünschen. Vermeiden Sie eine unnötige Byte-Obergrenze für ein Master-Asset. Um eine enge Obergrenze zu erreichen, kann eine Pixelreduzierung erforderlich sein, wodurch ein kleines Logo oder ein schmaler Umriss möglicherweise schwer lesbar sind.

Sehen Sie sich das heruntergeladene PNG sowohl vor hellem als auch vor dunklem Hintergrund an. Ein Ausschnitt kann blasse Randpixel aus einer früheren Bearbeitung mit weißem Hintergrund enthalten. Die Transparenz kann technisch intakt sein, während der Lichthof in einem dunklen Bereich immer noch falsch aussieht. Ebenso kann es vorkommen, dass ein dunkles Logo auf einer dunklen Seite verschwindet, obwohl der Export korrekt ist. Beheben Sie diese Designprobleme in der Quelle, anstatt sie wiederholt zu komprimieren.

Überprüfen Sie das Bild in seiner tatsächlichen Anzeigegröße. Halbtransparente Schatten und schmale Striche können sich beim Verkleinern optisch verändern, selbst bei der PNG-Ausgabe. Legen Sie für die Webveröffentlichung die Abmessungen des Elements fest und stellen Sie nützlichen Alternativtext bereit, wenn das Bild Informationen vermittelt. Eine dekorative Überlagerung erfordert möglicherweise eine andere Barrierefreiheitsbehandlung als ein verlinktes Firmenlogo. Laden Sie einen Testexport herunter und platzieren Sie ihn im realen Layout, bevor Sie eine Gruppe übereinstimmender Assets verarbeiten. Ihre Quelle bleibt während der Konvertierung auf Ihrem Gerät.

Versuchen Sie es mit einem dunklen Logo mit weichem Schatten und einem zweiten Logo mit dunklem Hintergrund. Platzieren Sie beide heruntergeladenen PNGs in einem temporären hellen Bereich und einem dunklen Bereich Ihres Layouts. Schauen Sie sich die schmalen Striche und die Schattengrenze bei der vorgesehenen Anzeigegröße an. Wenn eine Version unsichtbar wird, wählen Sie die richtige Quellvariante aus, anstatt sie auf eine andere Hintergrundfarbe zu reduzieren. Wenn ein weißer Lichthof erscheint, überprüfen Sie den ursprünglichen Ausschnitt noch einmal. Eine Datei kann ihren Alphakanal behalten und dennoch optisch schlecht zu einer bestimmten Seite passen. Überprüfen Sie beide Eigenschaften, bevor Sie gemeinsame Einstellungen auf alle Varianten anwenden.