Menü
Anleitung / Blog & Fotobearbeitung

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:

8.953 Views
About Author

Hi, ich bin Vanessa und lebe mit meinem Mann und unseren beiden Kindern in Baden-Württemberg auf dem schönen Land. Ich liebe es mich kreativ auszutoben. Egal ob Nähen, Basteln, Malen, Kochen oder Backen - ich probiere alles aus! Hier auf meinem Blog möchte ich Dir einen Einblick in mein kreatives Leben geben!

12 Comments

  • Claudia/ganzmeinding
    13/02/2018 at 16:37

    Super erklärt! Ich sollte mich unbedingt mehr mit Bildbearbeitung beschäftigen, leider fehlt es mir an der Zeit und aufraffen kann ich mich irgendwie auch nicht. Aber deine Anregung ist super, vielleicht mach ich mich doch mal ran… liebe Grüße von Claudia

    Reply
    • Freulein Linka
      13/02/2018 at 23:09

      Hallo Claudia, vielen Dank! Kann dich gut verstehen, mir geht es manchmal auch so.
      LG Vanessa

      Reply
  • Jasmin
    13/02/2018 at 16:48

    Tolle Anleitung. Ich denke ebenso, dass ich das mal ausprobieren werde. Vielen Dank für die Motivation 🙂

    Reply
    • Freulein Linka
      13/02/2018 at 23:10

      Huhu Jasmin,
      dankeschön, freut mich sehr wenn ich dich motivieren konnte 😉
      LG Vanessa

      Reply
  • Kirsten
    13/02/2018 at 20:30

    Super erklärt, und ich weiß jetzt auch was mockups sind. Da ich Gimp auch auf dem Rechner habe , es aber echt viel zu selten benutze , sollte ich dieses kleine Tutorial vielleicht mal zum Anlass nehmen , mich daran zu setzen.
    Liebe Grüße Kirsten

    Reply
    • Freulein Linka
      13/02/2018 at 23:12

      Hallo Kirsten,
      danke dir, wenn du schon Gimp installiert hast das ist es ja nur noch ein kleiner Schritt bis zum eigenen Mockup 😉
      Ich freu mich schon total auf eure ganzen Beispiele…
      LG Vanessa

      Reply
  • Sonja
    13/02/2018 at 22:34

    Voll cool, vielen Dank!!!
    Ich werds trotzdem in Photoshop machen *lach*. Vielen Dank, da hab ich ja wieder was auszuprobieren!

    Lieber Gruß,
    Sonja

    Reply
    • Freulein Linka
      13/02/2018 at 23:13

      Hallo Sonja, bitteschön! Hihi mit Photoshop gehts natürlich auch super! Viel Spaß beim testen!
      LG Vanessa

      Reply
  • Belleprairie
    13/02/2018 at 22:47

    Liebes Frl Linka!! Ich danke dir, zum Glück gibt es keine doofen Fragen

    Vielleicht find ich mal Zeit das Tutorial zu probieren.
    Danke dafür

    Wärmste Grüße
    Nicole

    Reply
    • Freulein Linka
      13/02/2018 at 23:15

      Huhu Nicole, bitteschön. Ich wusste bis vor kurzem auch nicht wie der Fachbegriff für diese Art der Bilder heißt, man lernt nie aus und doofe Fragen gibt es schon mal gar nicht! 😉
      LG Vanessa

      Reply
  • Floyd
    07/09/2020 at 10:10

    Vielen Dank für den tollen Artikel!! Stelle gerade fest, dass ich viel zu lange viel zu viel Geld für Photoshop bezahlt habe und es auch günstiger bis kostenlos geht 😀 https://www.chris-hortsch.de/webdesign-blog.html hat ziemlich coole Mockups wie ich finde und der Download ist auch gratis. Hab die im Anschluss immer in Photoshop bearbeitet aber jetzt kenn ich dank dir eine bessere Alternative und muss dafür nicht mal einen Cent investieren 😉

    Liebe Grüße

    Floyd

    Reply
    • Freulein Linka
      07/09/2020 at 13:34

      Hallo Floyd!
      Freut mich sehr wenn mein Artikel dir geholfen hat! Dann mal viel Spaß beim (kostenlosen) Mockup bearbeiten! 😉
      LG Vanessa

      Reply

Leave a Reply