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:
Aber so sieht es aus, wenn es in seiner Webanwendung gerendert wird:
Wie wird dieser Maskierungseffekt in Photoshop erreicht?
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:
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.
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":
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:
Das ist die Ebenenmaske. Wenn Sie auf das Ebeneninhaltssymbol klicken und die Ebene Original schließen, sehen Sie das gewünschte Ergebnis:
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:
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.
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.
Welz