Bloggen

Tutorial: Mockup erstellen ohne Photoshop in 5 Schritten

12. Februar 2018

Hallo Ihr Lieben,

heute möchte ich euch erklären, wir 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 bischen 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. Desweiteren fotografieren viele mit ihrem Smartphones und beides gleichzeit 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 los gehen.

 

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

Nun könnt ihr mit den Quadraten das Bild in die Ecken des Bildschirms ziehen und anpassen. Falls es euch schwer fä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:

||||| 3 I Like It! |||||
  • Reply
    Claudia/ganzmeinding
    13. Februar 2018 at 4:37 pm

    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. Februar 2018 at 11:09 pm

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

  • Reply
    Jasmin
    13. Februar 2018 at 4:48 pm

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

    • Reply
      Freulein Linka
      13. Februar 2018 at 11:10 pm

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

  • Reply
    Kirsten
    13. Februar 2018 at 8:30 pm

    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. Februar 2018 at 11:12 pm

      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. Februar 2018 at 10:34 pm

    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. Februar 2018 at 11:13 pm

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

  • Reply
    Belleprairie
    13. Februar 2018 at 10:47 pm

    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. Februar 2018 at 11:15 pm

      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

Leave a Reply