Beim Speichern von PSD in PNG mit Ebenentransparenz gehen Ebeneneffekte verloren

Ich habe eine PSD eines Hemdmodells mit mehreren Effektebenen für Lichter und Schatten und dann Ebenen für Hemdfarben.

Ich versuche, dies in einem webbasierten Editor zu verwenden, in dem ich die Hintergrundfarbe programmgesteuert festlegen kann, ohne ein separates Bild pro Farbe laden zu müssen - das Basis-PNG wäre eine Überlagerung, durch die die Farbe durchscheinen kann.

Ich muss das Modell in einem transparenten PNG ohne Hemdfarben speichern - nur die Lichter und Schatten.

Wenn ich jedoch als PNG speichere oder als PNG für das Web speichere, ohne dass eine der Hemdfarbebenen sichtbar ist, behält das resultierende PNG die Transparenz nicht bei.

Hier ist die Beispieldatei: https://www.dropbox.com/s/f1j5bj4nk48l9l0/tee-mockup.psd

Die Schattierungsgruppe ist auf Passthrough eingestellt, und die Ebenen darin sind auf Color Dodge, Screen, Color Burn und Multiply eingestellt.

Ich kann für mein ganzes Leben nicht, wie ich dies als PNG mit intakten Transparenzen / Ebeneneffekten speichern kann. Ich weiß, dass dies möglich ist, weil viele Online-Redakteure solche Mockups verwenden. Gibt es dafür eine bestimmte Methode? Jede Hilfe wird sehr geschätzt. Danke!

Hey Pat, willkommen bei GDSE und danke für deine Frage. Wenn Sie mehr über die Website erfahren möchten, besuchen Sie bitte das Hilfezentrum oder pingen Sie einen von uns im Chat an , sobald Ihr Ruf ausreichend ist (20). Tragen Sie weiter bei und genießen Sie die Seite!
Hey Pat, der Link, den du angegeben hast, gibt mir einen 404 Not Found-Fehler, könntest du bitte überprüfen, ob er richtig ist?

Antworten (2)

Mischmodi in Photoshop werden NICHT in das PNG-Format übersetzt . Es ist keine Frage des „Wie“. Es ist eine Frage, ob dies nach dem Stand der Technik nicht möglich ist.

Damit ein PNG ordnungsgemäß funktioniert, müssen alleNormal Ihre Photoshop-Ebenen auf den Mischmodus eingestellt sein . Das bedeutet, dass Sie beim Einrichten in Photoshop keine Mischmodi verwenden müssen .

Mischmodi verwenden Zwischenschichtberechnungen, um ein Erscheinungsbild zu formulieren.
Im Wesentlichen führt Photoshop eine Berechnung durch:
(this pixel / blending mode) + Underlying pixel = appearance

Im PNG-Format gibt es keine Kommunikation zwischen den Schichten. In einem PNG ist alles 1 Ebene und ein Pixel ist eine Farbe und ein Alpha, das war's. Sie können einem PNG nicht sagen, dass es "die Farbe dieses Pixels basierend auf dem Pixel darunter ändern soll", da das PNG kein Pixel darunter kennt .

Kurz gesagt, Sie können mit PNG-Bildern einfach keine Interaktionen zwischen den Ebenen erreichen. Wenn Sie PNGs für Lichter und Schatten verwenden, können Sie am besten dunkle und helle Pixel erstellen und dann das Alpha für diese Pixel anpassen, aber Sie können einfach keine Mischmodi verwenden.

Danke für die Info. Leider habe ich keine Wahl, wie die Ebenen eingerichtet werden - der Kunde hat eine Mockup-PSD im gleichen Format/Layout wie die von mir freigegebene Beispiel-PSD bereitgestellt. Was ich wissen muss, ist, wie ich die PSD in das NG-Format exportieren kann, damit die Schatten/Lichter des Modells immer noch transparent sind. Danke für jeden Rat.
@PatFriedl Wie ich gepostet habe ... kannst du nicht . Die aktuelle Technologie erlaubt es Ihnen nicht, ein PNG mit Mischmodi zu speichern. Sie haben keine andere Wahl , als die PSD zu ändern, und selbst dann erhalten Sie nie das gleiche Erscheinungsbild wie bei der Verwendung von Mischmodi in Photoshop. es ist einfach nicht möglich. Es kommt nicht auf die richtigen Schritte an. Was Sie (oder Ihr Kunde) verlangen, ist unmöglich.
Fürs Protokoll, die anderen "Online-Redakteure" verwenden mehrere Bilder ... ein Bild für jede Farbe eines Kleidungsstücks. Oder sie verwenden in einigen Fällen Dinge wie Flash und SWF. Sie überlagern kein PNG auf einem farbigen Hintergrund.
Eigentlich sind sie es nicht - teespring.com, teechip.com, represent.com und viele mehr verwenden alle ein Bild, das dem in der von mir geteilten PSD sehr ähnlich ist. Hier ist das Overlay-Bild, das im Editor von Teepsring verwendet wird: d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/… Und das ist das Bild, das auf Represent.com verwendet wird: d2v48i7nl75u94.cloudfront.net/blanks/thunder/… Wenn Sie diese Bilder speichern , sehen Sie, dass es sich um Überlagerungen handelt. Ich weiß also, dass dies möglich ist, aber ich kenne mich mit PS einfach nicht gut genug aus, um es durchzuziehen. Danke
Ja ... wie ich bereits sagte, dunkle und helle Pixel mit einem Alpha ... keine Mischmodi.

Sie müssen die Deckkraft jeder Ebene im normalen Mischmodus auf einen Wert einstellen, der den nächsten Effekt erzielt, wenn er in seinem Mischmodus sein könnte. Fügen Sie eine Hintergrundebene mit der gleichen Farbe oder dem gleichen Bild wie der Website-Hintergrund ein und Sie können den Effekt leicht überprüfen, aber wenn Sie die gesamte PSD in PNG speichern, vergessen Sie nicht, den Hintergrund unkenntlich zu machen.