Share
In diesem Tutorial zeige ich Ihnen, wie Sie Ihr flaches Design nehmen (wie in zweidimensional, nicht eben wie im aktuellen Designtrend) und fügen Sie etwas Leben hinzu, indem Sie es auf einer 3D-Ebene in Perspektive darstellen. Dies dient dazu, Ihr Design dynamischer zu präsentieren und ihm mehr Tiefe und visuelle Anziehungskraft zu verleihen. Dies kann ein sehr effektiver Weg sein, den Kunden Visuals zu präsentieren.
Es gibt mehrere Möglichkeiten, diesen Effekt zu erzielen, z. B. die Verwendung eigener Photoshop-3D-Werkzeuge und das Erstellen von 3D-Ebenen. Ich bin jedoch mit der Verwendung von geeigneter 3D-Software wie 3ds Max sehr viel bequemer, da sie viel mehr Kontrolle über die Kamera bietet und Ihnen ermöglicht, sich um die 3D-Ebene zu drehen und die Beleuchtung und Schattierung besser steuern zu können. Anfangs sieht es vielleicht komplizierter aus, aber wenn Sie dies einmal getan haben, können Sie später innerhalb weniger Minuten Ihre Arbeit verspotten.
Wenn Sie noch nicht mit 3D vertraut sind, haben wir eine Fülle von Tutorials für den Einstieg… Die hier vorgestellten Prinzipien sind anwendungsneutral. Sie können sie auf jede 3D-Software anwenden. Um mitzumachen, sollten Sie sich in Photoshop auskennen und mindestens ein 3D-Werkzeugprogramm geöffnet haben.
Für dieses Tutorial werde ich jedenfalls das Design unserer neuesten App namens TriplAgent verspotten, die sich auf diesen Interwebs wie ein Lauffeuer verbreitet. Sie können das gesamte Design in meinem Behance-Portfolio sehen.
Öffnen Sie Ihre 3D-Anwendung. Ich verwende 3ds Max 2012, aber wie bereits erwähnt, können Sie nahezu jedes 3D-Tool verwenden.
Ich verwende Vray als Haupt-Rendering-Engine, da es realistische Beleuchtung und Schatten bietet. Stellen Sie sicher, dass Sie sich einschalten Indirekte Beleuchtung, Sie können jedoch auch den Standard-Renderer von Max verwenden und ähnliche Ergebnisse erzielen.
Wenden Sie ähnliche Einstellungen wie in den Screenshots an.
Nun ist es Zeit, den Hintergrund zu erstellen. Gehe zu Erstellen> Wählen Sie unter Standardprimitive VRayPlane aus. Ein Flugzeug erscheint wie in der Abbildung unten. Ziehen Sie es einfach zur Seite, egal wo.
Der VRayPlane ist der Hintergrund Ihrer Szene. In Ordnung, erstellen wir die tatsächliche Ebene, auf der Ihr Design platziert werden soll. Wieder gehen Sie zu Erstellen> Standardprimitive> Box. Geben Sie unter "Parameter" die Abmessungen wie folgt ein (dies ist die Bildschirmgröße für ein iPhone 5)..
Natürlich können Sie alle gewünschten Maße eingeben, solange Ihr Design die gleichen Proportionen einhält. Jetzt müssen wir eine UV-Karte anwenden, damit sich das Design gut um die Ecken der Ebene legt. Gehen Sie im Panel auf der rechten Seite auf "Ändern" und wählen Sie UVW-Zuordnung aus der Modifikatorliste. Vergewissern Sie sich, dass "Planar" ausgewählt ist.
Zeit, die Materialien anzuwenden, also öffnen Sie die Materialeditor in der oberen rechten Ecke der Hauptsymbolleiste. Erstellen Sie zwei VRay-Materialien, eines für Ihren Hintergrund (das VRay-Flugzeug) und eines für Ihre gerade erstellte Box. Ziehen Sie das Material per Drag & Drop auf jedes Objekt.
Lassen Sie uns ein schnelles Rendern durchführen. Klicken Sie auf die Render-Produktion (das Teekannensymbol)…
Etwas grau und nackt, aber es ist ein guter Anfang. Gute Arbeit, Zeit, ein schönes Kleid anzuziehen. Wir müssen unser aktuelles Modellbild als Material auf das 3D-Objekt anwenden. Öffnen Sie den Materialeditor und klicken Sie auf das Material, das Sie der Box zugewiesen haben.
Scrollen Sie nach unten, bis Sie das Karten-Rollout sehen. Klicken Sie dann auf Diffuse> Maps> Standard> Bitmap und navigieren Sie zu dem Ordner, in dem Sie Ihr Design gespeichert haben.
Hinweis: Meine Datei war eine PNG-Datei mit einer Größe von 1136 x 640 Pixel.
Sie sehen jetzt Ihre Datei um die Kugel im Materialschlitz gewickelt. Klicken Sie auf das karierte Symbol, und Sie sehen das Design in perspektivischer Ansicht um Ihre Box. Vergessen Sie nicht, den Unschärfewert auf 0,01 zu setzen, um ein scharfes Rendering Ihres Bildes zu erhalten.
Schlagen Machen…
Voila! Das Design passt sich gut um Ihre Box. Speichern Sie diese Datei als PNG oder TIF. Zeit, die Hintergrundfarbe zu ändern und die Dinge aufzufrischen…
Es gibt zwei Möglichkeiten, die Hintergrundfarbe zu ändern. Sie können entweder die Farbe des Materials ändern, das Sie Ihrer VRayPlane zugewiesen haben, oder Sie können die Farbe in Photoshop ändern. Ich zeige Ihnen, wie Sie dies in Photoshop tun, denn es ist viel einfacher, die Farbe zu ändern, ohne die Szene erneut zu rendern.
Lass uns weitermachen. Klicken Sie mit der rechten Maustaste auf Ihre VrayPlane und klicken Sie auf "Auswahl ausblenden"..
Wir müssen den Hintergrund ausblenden, damit er nicht im Rendering angezeigt wird. Schlagen Machen und klicken Sie auf das Alpha-Symbol (siehe Abbildung unten). Speichern Sie das Bild als .png und wir sind hier fertig.
Zeit, zu Ihrem besten Freund, Photoshop, zu wechseln.
Mit dem Alphakanal können wir eine Maske erstellen und den Hintergrund isolieren. Nehmen Sie die gerade gespeicherte Alpha-Datei und öffnen Sie sie in Photoshop. Gehe zu Channels und wählen Sie (CMD + A) den Alphakanal unten aus. Kopieren Sie es in die Zwischenablage.
Öffnen Sie Ihr gerendertes Bild, das Sie zuvor gespeichert haben. Gehen Sie wieder zum Kanalfenster und fügen Sie den gerade kopierten Alphakanal ein. Diesmal müssen wir die aktuelle Maske auswählen. Halten Sie CMD gedrückt und klicken Sie auf die Maske.
Stellen Sie sicher, dass die Maske ausgewählt ist. Öffnen Sie das Ebenenfenster. Halten Sie die CMD Schlüssel, Linksklick auf Ebenenmaske hinzufügen wie unten zu sehen. Das Flugzeug sollte vom Hintergrund gut isoliert sein.
Den Hintergrund entfernen und das Flugzeug isolieren. Erstellen Sie eine neue Ebene und füllen Sie sie mit einer beliebigen Farbe. So lange es gut aussieht. Mkay.
Jetzt fügen wir Schatten hinzu. Sie können den Schatten im Bild beibehalten, aber diesmal verwenden Sie die Schatten von Photoshop. CMD + Klicken Sie erneut auf Ihre Maske und erstellen Sie eine neue Ebene. Füllen Sie die Auswahl mit einer dunklen Farbe, die Ihrem Hintergrund entspricht. Öffnen Sie die Ebenenstile und spielen Sie mit dem Schatteneffekt, bis Sie etwas finden, das Ihnen gefällt.
Stellen Sie sicher, dass der Winkel der Schatten richtig aussieht. Gute Arbeit, wir sind fertig! Eine schönere Art, ein 2D-Design zu betrachten, meinen Sie nicht?
Das könnte man am Ende mit:
In diesem Lernprogramm wurde erläutert, wie ein 2D-Entwurf in ein 3D-Modell mit Perspektive umgewandelt wird. Ich vermute mal, dass viele von euch von der ganzen 3D-Sache ein bisschen eingeschüchtert waren, aber es ist wirklich einfach, wenn man den Dreh raus hat.
Ein interessanter nächster Schritt wäre, mit verschiedenen Ebenengrößen zu experimentieren, verschiedene Kamerawinkel zu verwenden und auch das Kameraobjektiv zu wechseln, um eine perspektivische Verzerrung zu erzielen. Sie können das gesamte Design in meinem Behance-Portfolio sehen und die mobile App TriplAgent ausprobieren. Danke fürs Mitmachen!
Sie haben keine Zeit oder Fähigkeiten, um mit Photoshop zu arbeiten? Lass dich nicht davon abhalten.
Placeit ist ein Modellgenerator; ein Online-Tool, mit dem Sie Ihre eigenen Designs (UI-Designs, Logos, andere Branding-Elemente) in fotorealistische Szenen einbetten können. Definitiv eine schnelle und einfache Alternative zu Photoshop.
Kätzchen neben einem iPhone X Mockup, der über einem Buch auf einem Mädchenbett liegt
iPhone X-Vorlage, die auf eine Weinlese-Tabelle liegt
Accentsconagua