Mockup erstellen ohne Photoshop in 5 Schritten

Hallo Ihr Lieben,

heute möchte ich euch erklären, wie ihr schnell, einfach und kostenlos ein Mockup erstellen könnt.

WAS SIND MOCKUPS?

Der Begriff Mockup stammt aus englischen und bedeutet Attrappe, Nachbildung. Eingesetzt werden sie meist von Designern, die ihren Kunden Entwürfe für Webseiten, Visitenkarten oder Produktverpackungen präsentieren. Ein Bild von einem schicken Laptop mit ein paar passenden Accessoires sieht einfach besser aus als ein simpler Screenshot.

Wer sich in der virtuellen Welt bewegt, hat Mockups sicherlich schon des Öfteren gesehen. Denn neben den Designern haben Blogger und Influencer Mockups für sich entdeckt. Auf dem Instagram Bild wird neben den neu gekauften Stoffen oder der neuen Nähmaschine zufällig das Smartphone platziert, dass, auch ganz zufällig, die Startseite des Blogs zeigt. Ein bisschen Werbung schadet ja nie 😉

Auf meiner Pinterest Pinnwand könnt ihr euch Beispiele für Mockups anschauen und Inspirationen holen:

WIE ENTSTEHT EIN MOCKUP?

Ganz einfach, ihr legt euer Smartphone oder Tablet auf einen schönen Untergrund und platziert rundherum Dinge, die euch gefallen oder einen Bezug zu eurem Blog, Facebookseite, Instagram Profil haben. Die Möglichkeiten sind da schier grenzenlos. Den Bildschirm des digitalen Mediums lasst ihr aus, das entsprechende Bild wird nachträglich eingefügt.

Sicherlich fragt ihr euch jetzt warum der ganze Aufwand, man könnte doch einfach die Startseite aufrufen und abfotografieren? Theoretisch schon, wer aber in der Praxis schon einmal versucht hat etwas von einem Monitor etc. zu fotografieren weiß wie das dann im Nachgang aussieht. Unerwünschte Spiegelungen, Kratzer im Display etc. sind alles Dinge, die man nicht auf so einem Foto haben möchte. Des Weiteren fotografieren viele mit ihrem Smartphone und beides gleichzeitig geht nun mal nicht. Daher geht man den Weg und erstellt ein Mockup.

WIE ERSTELLE ICH EIN MOCKUP?

Eins der bekanntesten Tools um ein Mockup zu erstellen ist Photoshop. Viele Mockup Vorlagen, die man auf diversen Plattformen kaufen oder for free herunterladen kann sind als .psd Datei abgespeichert. In Photoshop kann man dann einfach das eigene Logo etc. einfügen. Das Ganze hat allerdings einige  Nachteile:

1. nicht jeder ist im Besitz von Photoshop

2. gute Mockups kosten meist etwas

3. Oft hat das dargestellte Szenario keinen Bezug zur eigenen Sache

4. Andere benutze evtl. das gleiche Mockup

Obwohl ich Photoshop besitze habe ich mich aus den Gründen 2-4 dazu entschieden meine eigenen Mockups zu erstellen. Die einzelnen Schritte zur Erstellung eines individuellen Mockups habe ich in einem Tutorial festgehalten:

IN 5 SCHRITTEN ZUM EIGENEN MOCKUP

Bevor wir an die digitale Bearbeitung gehen müsst ihr ein paar Dinge erledigen:

Ihr benötigt natürlich einen Monitor, Smartphone oder Tablet. Arrangiert darum ein paar schöne Gegenstände und macht ein gut beleuchtetes Bild. Zusätzlich benötigt ihr noch einen Screenshot eures Blogs, Logos, Profils etc.  Wie ihr einen Screenshot auf euren Tablets oder Smartphones machen könnt, findet ihr unter Google. Einfach „Screenshot“ und euer Modell eingeben. Den Screenshot könnt ihr euch dann per Mail schicken oder per USB auf den Rechner laden.

Ganz ohne Software geht es dann doch nicht, ihr benötigt zusätzlich die GIMP, ein kostenloses  Bildbearbeitungsprogramm das ihr z.B. bei Chip herunterladen könnt.

Alles erledigt? Super dann kann es losgehen.

SCHRITT 1

Öffnet GIMP. Über Datei -> Öffnen sucht Ihr auf eurem Rechner das fotografierte Szenario.

SCHRITT 2

Nach dem Öffnen eures Fotos geht ihr nochmals auf Datei und dann auf als Ebenen öffnen und sucht den Screenshot eurer Startseite.

 SCHRITT 3

Nun wird der Screenshot transformiert, also an den Bildschirm des Tablets angepasst. Hierfür geht ihr im Werkzeugkasten auf das Symbol „Perspektive“. In der dritten Zeile das vierte Symbol von links.

Über den Screenshot legt sich ein Gitternetz und an jeder Ecke erscheint ein Quadrat. Zusätzlich öffnet sich das neue Fenster Perspektive.

SCHRITT 4

Jetzt könnt ihr mit den Quadraten das Bild in die Ecken des Bildschirms ziehen und anpassen. Falls es euch schwerfällt das Bild anzupassen könnt ihr unten links die Ansicht vergrößern dann sieht man es besser. Seid Ihr fertig? Prima, dann könnt ihr jetzt im Fenster auf Transformation klicken.

SCHRITT 5

Nun könnt Ihr das fertige Foto über Datei -> Exportieren als auf euren Rechner laden.

Wichtig: unten PNG-Bild oder JPG auswählen und beim Ändern des Dateinamens ebenfalls die Dateiendung angeben, also .png oder .jpg

Fertig, jetzt habt ihr euer eigenes, ganz individuelles Mockup erstellt!

Ich hoffe das Tutorial war verständlich und hat euch weitergeholfen.

Ich wünsche euch viel Spaß beim Erstellen eurer eigenen Mockups!

LG Vanessa

Pin mich: