Wie erstelle ich PNG-Bildmasken in Photoshop?

Mir ist aufgefallen, dass teespring.com ein verwendet png, das auf eine bestimmte Weise vorbereitet ist, sodass es als Maske in seiner Webanwendung fungiert. So sieht das Bild aus, wenn ich es in Photoshop öffne:im Photoshop

Aber so sieht es aus, wenn es in seiner Webanwendung gerendert wird:Geben Sie hier die Bildbeschreibung ein

Wie wird dieser Maskierungseffekt in Photoshop erreicht?

Hier ist das eigentliche Bild als Referenz:Geben Sie hier die Bildbeschreibung ein

Ich habe definitiv einen Dupe davon gesehen.

Antworten (2)

So machen Sie es in Photoshop ohne auffällige Tricks:

Beginnen Sie mit einem Foto eines weißen Hemdes. Entfernen Sie den Hintergrund mit einem Beschneidungspfad oder einer anderen Methode, die eine perfekte solide Kante hinterlässt. Zauberstab und alle farbbasierten Auswahlmethoden sind für diesen Zweck normalerweise nutzlos, wenn das Ziel ein Foto ist:

Geben Sie hier die Bildbeschreibung ein

Das Shirt ohne Hintergrund ist eine Schicht namens Original.

Fügen Sie eine neue leere Ebene "Weiß" hinzu. Treffen Sie eine Auswahl in der Ebene Original. Wählen Sie mit dem Zauberstab die Leere um das Hemd herum aus und malen Sie in die Ebene "Weiß" eine feste weiße Farbe voll der Auswahl. Verwenden Sie einen großen festen Pinsel. Verwenden Sie nicht den Farbeimer.

Geben Sie hier die Bildbeschreibung ein

Fügen Sie eine neue leere Ebene "Schwarz" ein. Kehren Sie die Auswahl um (wählen Sie bei Bedarf die Leere erneut aus, versuchen Sie nicht, das Hemd auszuwählen) und malen Sie die Auswahl vollständig schwarz in die Ebene "Schwarz":

Geben Sie hier die Bildbeschreibung ein

Gehen Sie zur Ebene Original, wählen Sie alles aus und kopieren Sie den Inhalt der Ebene in die Zwischenablage.

Gehen Sie zur Ebene Schwarz und fügen Sie eine Ebenenmaske ein.

Gehen Sie zur Ebenenmaske (= klicken Sie auf das Maskensymbol, während Sie gleichzeitig die Alt-Taste gedrückt halten). Fügen Sie das Original-Shirt aus der Zwischenablage in die Maske ein (= Strg+Shift+V).

Kehren Sie die Ebenenmaske um (Bild > Anpassungen > Umkehren). Jetzt sollten Sie Folgendes auf dem Bildschirm haben:

Geben Sie hier die Bildbeschreibung ein

Das ist die Ebenenmaske. Wenn Sie auf das Ebeneninhaltssymbol klicken und die Ebene Original schließen, sehen Sie das gewünschte Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Jetzt können Sie die Ebene Original entfernen, Ebenen Schwarz und Weiß zusammenführen und das Bild als PNG exportieren.

Wenn Sie es mit Mischmodus = Normal über ein beliebiges Bild legen, wird das Bild im Loch angezeigt und schattiert:

Geben Sie hier die Bildbeschreibung ein

HINWEIS: Es ist hilfreich, auch die mehrschichtige Bildversion zu speichern. Sie können Kurven auf die Ebenenmaske der Ebene Schwarz anwenden, um die richtige Schattierungsstärke zu finden.

Der nächste Schritt zu einem höheren Realismus wäre die Verwendung des ursprünglichen Hemdbildes als Verschiebungskarte für das eingefügte "beliebige Bild". Das würde die Falten plausibler machen. Aber das würde den Rahmen dieser Antwort sprengen.

Legendäre Antwort. Sehr sehr cool. Danke schön!

Sie können genau sehen, wie es gemacht wird, indem Sie es sich ansehen. Der „weiße Bereich“ außerhalb des Hemdes ist weiß (100 % Deckkraft), der Hemdbereich ist transparent (um das Design darunter zu zeigen) und es gibt einige Schatten, die überlagert werden können, um ihm das Gefühl zu geben, ein Material zu sein.

Um die Maske im Web anzuwenden, haben sie das PNG mithilfe von SVG über Ihr Bildmaterial gelegt. Es gibt fast definitiv einen weiteren Schritt in ihrem speziellen Prozess, da die Maske, die sie in diesem PNG haben, nicht richtig zu schattieren scheint, wenn sie nur als Maske angewendet wird. Es kann jedoch sicherlich mit einer soliden Hintergrundfarbe als Außenmaske und grundlegenden Schattierungen (und Hervorhebungen) innerhalb des maskierten Bereichs funktionieren.
Ich habe ein Beispiel angehängt.

Hintergrundfoto Transparente Maske Ergebnis

Danke, Lukas. Ich bin daran interessiert zu wissen, wie es so vorbereitet ist, dass es diese Schatten beibehält, die das Gefühl vermitteln, ein Material zu sein.
@AdamSoffer Speziell für das Web oder die Maske im Allgemeinen?
Speziell für das Web.