Mockup in Photoshop erstellen
Photoshop

Mockup in Photoshop erstellen

Mockups sind ein beliebtes und zeitsparendes Hilfsmittel zur Präsentation von Produkten oder Design-Projekten. Im Netz gibt es hierzu mittlerweile unzählige PSD Vorlagen und Tools, die man kostenlos nutzen kann. Oder man erstellt seine eigene Vorlage. Wie einfach man mittels Smartobjekt ein Mockup in Photoshop erstellen kann, erkläre ich im folgenden Tutorial.

Bildauswahl

Bevor wir ein Mockup in Photoshop erstellen können, benötigen wir zunächst ein geeignetes Bild:

  • Machen Sie selbst ein Foto von einem Laptop, Computer oder Handy in hoher Auflösung. Achten Sie darauf, den Hintergrund etwas unscharf zu stellen, um das Objekt in den Focus zu rücken. Außerdem sollten Sie den Laptop einsschalten, damit die Konturen für die spätere Bearbeitung besser sichtbar sind.
  • Wenn Sie nicht selbst fotografieren möchten, können Sie auch einfach ein Bild von einem kostenfreien Bildanbieter downloaden. Für dieses Mockup Tutorial habe ich ein Bild von pixabay verwendet: CQuadratNet / Lizenz: CC0 Public Domain

screenshot01

Bild: pixabay von CQuadratNet

So erstellst Du ein Mockup in Photoshop

1. Bild in Photoshop öffnen

Wenn Sie das Bild in Photoshop geöffnet haben, können Sie zur besseren Orientierung Hilfslinien an den Ecken des Laptop-Rahmens setzen.

screenshot02

 2. Rechteck erstellen

Wählen Sie das Recheck-Werkzeug (U) und platzieren Sie die Form auf dem Bildschirm. Hierbei können Sie sich an die zuvor gesetzten Hilfslinien halten.

screenshot03

3. In Smartobjekt konvertieren

Klicken Sie nun mit der rechten Maustaste auf die Formebene und wählen Sie den Befehl „In Smartobjekt konvertieren“.

screenshot04

 4. Smartobjekt einpassen

Wählen Sie im Menü Bearbeiten -> Transformieren -> Verzerren und verschieben Sie die Ecken des Rechtecks so, dass der Bildschirm ausgefüllt wird.

mockup05b

 

mockup06

5. Eigenes Bild platzieren

Nachdem Sie das Rechteck positioniert haben, können Sie nun per Doppelklick auf die Smartobjekt-Ebene das Smartojbekt öffnen und Ihr eigenes Bild platzieren.

mockup07

Für dieses Tutorial habe ich einen Screenshot der designtrax-Webseite genommen und mit STRG+V eingefügt.
Skalieren Sie nun den Screenshot oder das gewünschte Bild auf die entsprechende Größe und speichern Sie ab.

mockup08

6. Fertiges Laptop Mockkup

Wechseln Sie nun wieder zur ursprünglichen Mockup-Datei und Sie sehen Ihr Bild perfekt eingepasst im Laptop.
Ihnen gefällt das eingefügte Bild doch nicht? Dann öffnen Sie einfach wieder das Smartobjekt und fügen ein anderes Bild ein.

mockup09

7. Feintuning

Um dem eingefügten Screenshot eine realistischere Wirkung zu verleihen, habe ich noch einen Ebeneneffekt Verlaufsüberlagerung hinzugefügt mit folgenden Einstellungen:

Füllmethode: Multiplizieren
Deckkraft: 20%
Art: Reflektiert
Verlauf umkehren
Winkel:90°
Je nach Geschmack können Sie auch mit weiteren Effekten oder Filtern experimentieren.

mockup10

Die PSD-Datei zum Mockup-Tutorial können Sie hier downloaden:

Mockup downloaden

Letzte Aktualisierung am 23.11.2017 / Affiliate Links / Bilder von Amazon Product Advertising API

Über den Autor

Sonia

Sonia

Sonia, Gründer von designtrax.de, ist Webmaster in einem Freiburger Ausbildungsinstitut und arbeitet nebenberuflich als WordPress Freelancer.

1 Kommentar

Kommentar hinterlassen

  • Die Beschreibung vom Erstellen eines Mock-ups hat mir sehr geholfen, als ich plötzlich vor dem Problem stand,
    schnell eine Präsentation für unseren Kunden machen zu müssen. Vielen Dank und beste Grüße, Albert