Es sieht gut aus, ist genial und überzeugt – Das Perspective App Screen Mock-Up

Bild

Ich liebe schönes Design und mag es, wenn auch andere überzeugt von meiner Arbeit sind. Deshalb schreibe ich in meinem ersten Blogbeitrag bei den Liechteneckers darüber, wie wir schöne Apps und Webseiten gut verpacken können.
Wir stecken sehr viel Zeit in unser Design, denn es muss perfekt sein und unsere Arbeit soll den Kunden überzeugen. Im Idealfall sind wir einige Tage vor dem Pitch mit der Umsetzung fertig und bereits neue Projekte warten schon auf uns. Doch da wir unser Design lieben, wollen wir es überzeugend in Szene setzen. Im Internet findet man viele Gratis-Mock-Ups für die private und kommerzielle Nutzung, die uns dabei helfen.
Ich suche mir meine Mock-Ups meist auf GraphicBurger oder PSD Covers, da ich von einer Holzgravur bis hin zum neuen iPhone alles finde. Noch dazu haben die Bilder eine hohe Auflösung. Kreative aus aller Welt stellen dort ihre neuesten Mock-Ups zur Verfügung. Die 3D-Grafiken sind professionell aufbereitet und nach dem Download einfach auf das eigene Projekt zu adaptieren.

Das Auge isst mit

So ein Rendering macht einen sehr professionellen Eindruck und der Kunde kann sich das finale Design viel besser vorstellen. Wir Kreative sind es gewohnt, unsere Ideen zu visualisieren und uns diese vorher auszumalen, den Kunden sollte man mit bei seiner Interpretation unterstützen.
Es gibt unzählige Vorlagen, mit denen man mit wenigen Klicks und in nur wenigen Minuten ein tolles Rendering vorbereiten kann. Die Kulissen sind von sehr elegant und minimalistisch bis hin zu knalligen Farben im Hintergrund oder real-life-Szenen und mitten drin – unser Design. Ich zeige euch anhand eines Beispiels wie einfach es geht, die derzeit modernen und schicken Perspective-App-Screen-Designs zu erstellen. Dieses habe ich auf Pixeden gefunden. Es sind drei Ansichten der App. Den Effekt macht die gekippte Optik aus und die Tiefe des Layers. So wird es mit einem flachen Smartphone verglichen oder, wenn man weiter denkt, mit futuristischen devices.

Schritt 1

Bild

Das Ausgewählte Mock-Up downloaden und in Photoshop öffnen.

Schritt 2

Bild

Bild

Mit Doppelklick auf die Ebene „Put your design here“ öffnet sich ein neues Fenster.

Hier den Screenshot einfügen und platzieren. Mehrere Ebenen sind möglich. Dadurch kann man das Design auch erst in diesem Schritt gestalten. Sobald das Layout fertig ist – speichern und das Fenster schließen.

Schritt 3

Bild

Man gelangt wieder zur Ursprugsdatei zurück. Nun verläuft der Prozess immer gleich, bis man alle „Put your design here“-Ebenen adaptiert hat. Wenn man nicht alle drei Screens haben möchte, kann die gewünschte Ebene ausgeblendet werden. Nun kann man auch den Hintergrund an dem App-Design anpassen oder ein Pattern gestalten. Die Screens können auseinander oder enger zusammen geschoben werden. Es gibt noch die Möglichkeit, Screens zu duplizieren, wobei man hier darauf achten muss, dass das Smartobject mit Rechtsklick „Neues Smartobject durch Kopie“ dupliziert wird. Ansonsten würde auch der kopierte Screen verändert werden.

Na? Sieht doch gleich besser aus als eine klassische Frontansicht.

Abwechslung ist garantiert

Es ist dieselbe Grundidee, aber jedes Design ist anders und man kann es selbst noch so verändern, dass es zum Corporate Design der jeweiligen App passt.
Graphicburger – Isometric Perspective Mock-Up
Freepick – 3D Perspektive Mock-Up
Wenn man diese Anwendung öfters verwendet, kann man sich für $ 19 ein PSD-Plugin kaufen, welches genau diese Funktion erfüllt. Es können Screens hinzugefügt werden, Positionen verändert werden, Schlagschatten näher oder entfernter setzen, stärker oder schwächer.