Mockups: schnell gemacht mit Photoshop-Smartobjekten

Designentwurf: bereits fertig.
Kundenpräsentation: schon morgen.
Mockup: schnell gemacht.
Erfahrt in diesem Tutorial, wie ihr ein Mockup in Photoshop CS6 anfertigt.

Als Designer stellen wir häufig mithilfe von Mockups Entwürfe für Kundenpräsentationen oder auch fürs eigene Portfolio zusammen. Reale Fotos von Endgeräten wie Bildschirmen, Smartphones oder auch Druckmedien, in die wir unsere Designs – konzipierte Websites oder Corporate Designs – einfügen vermitteln einen realistischen Eindruck von den Produkten. Mockups bieten also eine schnelle Visualisierungsmöglichkeit des Gestaltungsvorschlags und machen Produkt somit greifbarer.

Smartobjekte – eine besonders schlaue Lösung.

Wie der Name schon vermuten lässt, handelt es sich bei Smartobjekten um eine sehr nützliche Erfindung: es sind besondere Ebenen, die wie Folien funktionieren. Damit können Objekte (Text, Zeichnungen, Fotos) auf einem Hintergrund platziert und dann angepasst werden. Der große Vorteil dabei: wenn diese Anpassungen erst mal getätigt sind, werden diese für spätere Importe gespeichert. Soll heißen: wenn ein anderes Bild an gleicher Stelle einfügen werden soll, bleiben Perspektive und Effekte erhalten. Reinladen und fertig! Die Austauschbarkeit spart viel Zeit und das Ergebnis ist zudem immer einheitlich. Anzumerken ist, dass die Quelldatei in diesem Zug nicht mit verändert wird. Von Vorteil ist außerdem, dass der Inhalt eines Smartobjekts angepasst wird, sobald die Quelldatei modifiziert wird.

Mockups. Smartobjekte. Und wie geht das jetzt?

Für euer Mockup braucht ihr zwei Bilder: eine Fotovorlage, in die der Entwurf eingebaut werden soll und der Entwurf an sich (in unserem Fall ein Screenshot). Ein zweites Layoutbild ist optional: damit demonstrieren wir lediglich die Flexibilität der Smartobjekte.

Schritt 1: Fotovorlage öffnen

Fotovorlage (Quelle: mockupworld.co)

Schritt 2: neue Ebene anlegen und Layoutbild einfügen

Über das Ebenenbedienfeld erstellt ihr eine neue Ebene. Hinterher geht ihr über Datei > Platzieren und wählt das Layoutbild aus.

Schritt 3: anpassen und transformieren

Über Bearbeiten > Transformieren findet man vielzählige Möglichkeiten, das Foto realistisch entsprechend der Perspektive und des Formats anzugleichen. Anschließend die Transformation mit »Enter« bestätigen (oder mit »esc« abbrechen).

Schritt 4: Feinschliff

Wenn ihr mit der Platzierung zufrieden seid, solltet ihr einen kleinen Schatten hinzufügen, damit die Montage nicht so »geshopt« aussieht. Öffnet bei angewählter Ebene die Ebeneneffekte-Funktion mit dem fx-Symbol. Danach wählt ihr »Schatten nach innen«. Hier dann eine geringe Deckkraft und wenige Pixel Abstand einstellen. Probiert einfach aus, was zu eurem Motiv passt.

Bestätigt anschließend mit »ok«, wenn ihr das Gesamtbild als natürlich empfindet.

Jetzt ist das Mockup fertig und bereit für den Einsatz (vergesst nicht, es unter einem passenden Namen zu speichern). Hier seht ihr unser Ergebnis:

Wir haben noch ein anderes Layout, welches wir auch in die Fotovorlage platzieren wollen. Das tauschen wir gleich gegen Layoutbild 1 aus. Die Fotovorlage bleibt dabei unverändert. Bleibt dazu im eben bearbeiteten Dokument.

Schritt 5: in Smartobjekt umwandeln

Als erstes müssen wir dafür die obere Ebene (mit Layout 1) in ein Smartobjekt umwandeln. Die obere Ebene wandeln wir in über Ebene > Smartobjekt > in Smartobjekt konvertieren um (im Ebenenbedienfeld seht ihr dann das entsprechende Symbol).

Schritt 6: Bild ersetzen

Wählt die Ebene des Smartobjekts an. Geht jetzt über Ebene > Smartobjekte > Inhalt ersetzen. Dort könnt ihr ein beliebiges Bild auswählen (hier: Layout 2). Anschließend bestätigen und dann ist dieses fix und fertig eingefügt! Sowohl der Schatten als auch die Transformation bleiben erhalten.

Übrigens: falls euch keine Mockup-Bilder zur Verfügung stehen, findet ihr bei z.B. mockupworld oder graphicdesignjunction kostenlose Fotos.

Wenn ihr neugierig auf andere Tutorials geworden seid, stöbert doch einfach mal in unserem Blog. Dort findet ihr auch Neues aus der Agentur oder abgeschlossene Projekte.