Warum sieht mein transparentes PNG nicht gut aus?

Meiner Erfahrung nach besteht der Haupttrick zum Hinzufügen glatter Transparenz zu einem Bild in GIMP darin, das Werkzeug Ebene → Transparenz → Farbe zu Alpha ... zu verwenden. Natürlich müssen Sie wissen, wie man es effektiv einsetzt – es alleine lässt Ihre Bilder nur lustig und durchscheinend aussehen.

Wenn ich das Bild, das Sie oben gepostet haben, nehme und einfach Color to Alpha darauf laufen lasse (natürlich Weiß für die transparente Farbe auswähle), bekomme ich Folgendes:

Wie Sie sehen können, sieht dieses Bild auf einem hellen Hintergrund gut aus. Leider verschwinden auf einem dunklen Hintergrund die grauen Elemente vollständig, und die blauen Teile sehen auch nicht so gut aus:

Das Problem ist, dass das Color to Alpha - Tool das tat, was es tun sollte: Es wandelte das gesamte Weiß im Originalbild in Transparenz um. Das bedeutet, dass die grauen Linien zu halbtransparenten schwarzen Linien wurden und das Hellblau zu halbtransparentem Dunkelblau.

Was wir jedoch wirklich wollen , ist vermutlich, dass die Grundfarben des Textes und der anderen Elemente des Logos undurchsichtig bleiben und nur die geglätteten Pixel an ihren Rändern halbtransparent werden sollen. Um dies zu beheben, müssen wir den Farben wieder etwas Weiß hinzufügen. Eine Möglichkeit, dies für ein Bild wie dieses zu erreichen, bei dem die undurchsichtigen Bereiche hauptsächlich aus einzelnen Farben bestehen, ist dies:

1. Duplizieren Sie die Ebene.

2. Konvertieren Sie auf der unteren Ebene die Transparenz in eine Maske, indem Sie Ebene → Maske → Ebenenmaske hinzufügen ... und „Alphakanal der Ebene übertragen“ auswählen.

3. Nachdem Sie die Transparenz auf eine Maske übertragen haben, machen Sie die untere Ebene vollständig weiß (z. B. mit dem Füllwerkzeug im Modus "Gesamte Auswahl füllen").

4. Sie haben jetzt allen Farben des Bildes etwas Weiß hinzugefügt, aber das Innere der Buchstaben und Zahlen ist immer noch nicht vollständig deckend. Dazu müssen wir die Maske auf der unteren Ebene normalisieren – aber da die verschiedenen Teile des Bildes unterschiedliche Farben und Helligkeiten haben, müssen wir dies für jeden Teil separat tun.

   Klicken Sie dazu im Ebenendialog auf die Maske der unteren Ebene, um sie zu bearbeiten, und wählen Sie mit dem Rechteckauswahl-Werkzeug jeden einzelnen Teil des Bildes (das „B“, das „NANO“ und die Zeichnung darüber) aus drehen und bei jeder Auswahl Farben → Auto → Normalisieren ausführen.

Nachdem Sie all das getan haben (und optional die Ebenen zusammengeführt haben), sollte das Ergebnis so aussehen:

Wenn Sie dies mit dem ersten Bild oben vergleichen, gibt es fast keinen Unterschied zu sehen. Aber sehen Sie, was passiert, wenn wir es auf einen schwarzen Hintergrund setzen:

Jetzt sehen die Farben undurchsichtig aus, aber der Hintergrund ist immer noch transparent und die Kanten sind glatt.

Leider sieht man auch einige graue Ränder um die Buchstaben herum, besonders um das "B". Ich vermute, dass dies hauptsächlich daran liegt, dass das ursprüngliche JPEG-Bild in diesen Bereichen aufgrund der verlustbehafteten Komprimierung bereits unter Farbverlust litt, es war auf einem weißen Hintergrund einfach nicht so deutlich. Es gibt zwei Möglichkeiten (die ich kenne), um zu versuchen, das zu beheben: Sie können entweder die Maskenfarbpegel auf der weißen Ebene manuell anpassen, um die Farbsäume zu reduzieren, oder Sie können versuchen, die Volltonfarben aus den Buchstaben im Originalbild abzutasten und Ersetzen Sie das Weiß auf der unteren Ebene durch weiße Volltonfarben (Rechteckauswahl, Eimerfüllung). Oder Sie können sogar beides ausprobieren.

All dies ist jedoch wirklich etwas, das Sie nur ausprobieren sollten, wenn Sie keine andere Wahl haben. Eine viel bessere Lösung besteht darin, zu versuchen, die ursprünglichen Vektordateien (AI, SVG, EPS, PDF usw.) zu finden, aus denen diese Logos sicher gerendert wurden – sie sollten vollständige Transparenzinformationen enthalten, frei von Komprimierungsartefakten und auch skalierbar sein ! Nur wenn es wirklich unmöglich ist, die Originale zu erhalten, sollten Sie überhaupt in Betracht ziehen, mit niedrig aufgelösten JPEG-Dateien wie diesen zu arbeiten.

Auch wenn Sie am Ende die Bitmaps verwenden, könnten Sie immer noch ein viel saubereres Ergebnis erzielen, indem Sie einige der Elemente neu zeichnen – insbesondere den Text, der einfach Copperplate zu sein scheint .

Das Problem dabei ist, dass das Bild an den Rändern einen "Fade-to-White" aufweist, den Sie nicht entfernt haben. Das Verblassen oder Anti-Aliasing wird unter Verwendung von Grautönen erreicht, die gegenüber dunkleren Farben einen hohen Kontrast erhalten.

Ich verwende GIMP nicht, aber einfach gesagt, der einfachste Weg, damit zu arbeiten, besteht darin, eine neue Ebene am unteren Rand des Ebenenstapels zu erstellen und sie mit einer Farbe zu füllen, die offensichtlich, kontrastreich und im Allgemeinen nicht im Bild ist. Ich verwende oft RGB(255,0,0). Dadurch werden sofort alle Bereiche hervorgehoben, die Sie entfernen oder anpassen müssen, damit das Bild auf jedem Hintergrund funktioniert. Sie müssen die Bereiche in den oberen Schichten entfernen (nicht weiß färben), damit Sie das Rot der unteren Schicht sehen können. Wenn Sie fertig sind, entfernen oder blenden Sie die Kontrastebene aus, bevor Sie das PNG exportieren. Diese Kontrastebene ist besonders hilfreich, da Sie das Endergebnis sehen können, ohne es zum Testen exportieren zu müssen.

Was Sie am Ende haben möchten, ist im Wesentlichen eine einzelne Schicht, bei der alle transparenten Teile entfernt sind (nicht weiß, sondern transparent). Ich verwende dafür im Allgemeinen Ebenenmasken, da es nicht destruktiv ist, aber tue, was immer getan werden muss.

Ich denke jedoch, dass Sie bessere Ergebnisse erzielen, wenn Sie die Elemente rekonstruieren, anstatt nur das JPEG zu importieren. Außerdem sind die Linien darin wirklich dünn und hell, und auf Schwarz könnten sie ausfallen.

In manchen Fällen ist es besser, sich das Logo als Stempel oder Aufkleber vorzustellen, die inneren Bits weiß zu lassen und eine 5 Pixel breite weiße Linie um die äußeren Ränder zu ziehen.