Blogbilder mit Mockups und Smartobjekten erstellen

Als ich meine Seite veröffentlichte, war eine der ersten Fragen: „Sieht so Dein Schreibtisch aus?“ Nein, wirklich nicht, leider. Mein Headerbild habe ich mit einem sogenannten Mockup erstellt. Was das ist, wofür Du Mockups einsetzt und wie Du selber eins machen kannst, zeige ich Dir hier.

Was sind Mockups?

Der Begriff Mockup stammt aus dem Englischen und bedeutet Attrappe, Modell oder Nachbildung. Viele verwenden solche Modelle, von der Luftfahrtindustrie bis zum Zahnarzt. Eingesetzt werden sie vor allem von Designern, die ihre Entwürfe in stimmungsvolle Bilder einbauen und so ihren Kunden Entwürfe für Webseiten, Visitenkarten oder Produktverpackungen präsentieren. Ein Bild von einem schicken Laptop mit ein paar passenden Accessoires wirkt einfach besser als ein simpler Screenshot.

Auch in Blogs finden sich solche Bilder immer öfter, zum Beispiel das Smartphone auf dem Tisch mit der eigenen Webseite auf dem Display. Sowas selber zu fotografieren kann aufwendig sein. Mit einem Mockup sind es dagegen nur ein paar Klicks bis zum fertigen Bild.

Neben diesen einfachen Mockups gibt es sogenannte Scene Creator oder Constructor Sets. Ein Bild aus so einem Set findest Du in meinem Header auf der Startseite oder in meinen Social-Media-Profilen. Da werden verschiedene Accessoires selber zu einem Gesamtbild arrangiert. Aufräumen fällt dabei aus und umdekorieren geht ganz fix!

Wie funktioniert so ein Mockup?

Ein Mockup ist erstmal eine simple Bilddatei, die einfach oder komplex aufgebaut ist. Bei diesem Bild besteht die Datei aus einer Hintergrundebene mit dem Foto und einem sogenannten Smartobjekt (die Schrift im Notizbuch).

Mockup mit Text in Notizbuch, erstellt in Photoshop

Ein Smartobjekt ist eine besondere Ebene. Ebenen kannst Du Dir wie Folien vorstellen, die übereinander liegen und beim Draufschauen zusammen mit der Hintergrundebene das Gesamtbild ergeben. Die Ebenen enthalten verschiedene Bildelemente, können durchsichtig sein oder nicht. Ein Smartobjekt ist eine besondere Art von Ebene, weil es Informationen aus einer anderen Bilddatei enthält. In unserem Fall ein Textschnipsel und die beiden Zeichnungen. Das Bild muß perspektivisch verzerrt werden, damit es wirklich so aussieht, als ob auf das Papier geschrieben wurde. Daneben wird die Transparenz und Überlagerung angepasst und als wichtiges Detail: der Schärfeverlauf. An den Karos kannst Du erkennen, dass der rechte Rand des Notizbuches leicht unscharf ist. Das muß ebenso für den Text gelten, sonst sieht die Montage unecht aus. All dies geschieht mit dem Smartobjekt, aber die Quelldatei bleibt im Original erhalten. Die Bearbeitung ist nicht destruktiv. Der Vorteil: Die Bilddatei ist austauschbar. Mit ein paar Klicks kann ich den Text ändern, ohne die ganzen Anpassungen erneut durchzuführen. Wie das aussieht, zeige ich Dir unten in einem Video.

Wenn Du also ein Mockup von einem Anbieter herunterlädst und in Photoshop öffnest, findest Du dort eine Smartobjektebene. Durch einen Doppelklick auf die Ebene gelangst Du zu dem eingebetteten Original, das Du bearbeiten kannst. Danach speichern und schließen und sofort wird der Bereich im Smartobjekt aktualisiert.

Scene Creator Sets enthalten eine Vielzahl von einzelnen Elementen, unter einheitlichen Bedingungen fotografiert und anschließend freigestellt. Das bedeutet, der Hintergrund wurde entfernt, so dass diese Bildebene nur das Motiv (z.B. den Laptop) enthält und ansonsten durchsichtig ist. Weiterhin enthalten sind in der Regel verschiedene Hintergründe, auf denen die Szene arrangiert wird. Die Elemente enthalten oft Smartobjekte: einen Laptop oder ein Notizbuch, ein Smartphone oder die Beschriftung eines Bleistiftes kann so angepasst werden. Mit ein paar Klicks ist das Bild fertig.

Ganz wichtig beim Arrangieren ist, dass die Größenverhältnisse passen und vor allem Belichtung, Schattenwurf oder Reflektionen. Daran erkennt man gute Mockups, denn ohne das kann ein Mockup sehr schnell künstlich und falsch wirken.

Mockup in Photoshop geöffnet

Wofür kannst Du solche Mockups einsetzen?

Ein wesentlicher Einsatz war und ist die Präsentation von Webseiten, Logos, Druckentwürfen wie Visitenkarten oder Verpackungen.

Aber es gibt auch andere Einsatzgebiete im Bereich der Produktpräsentation. So können mit Mockups schnell Textilien präsentiert werden. Ein Smartobjekt erfaßt dabei die Struktur des Stoffes, den Faltenwurf mit Licht und Schatten etc. Siebdruckmuster oder Plotterdateien lassen sich so realistisch präsentieren, zum Beispiel auf einem T-Shirt.

Interessant sind Mockups auch für Anbietern von Kunstdrucken. Diese lassen sich damit gerahmt in schicker Umgebung präsentieren. Gleiches gilt z.B. für Schreibwaren wie Hochzeitseinladungen, Geburtsanzeigen oder ähnliches. Hier gibt es Mockups mit Papier und Umschlägen, schön in Szene gesetzt.

Auch für Blogs sind einfache Mockups oder Scene Creator Sets gut geeignet. Mit ihnen lassen sich leicht Headerbild oder Bilder für einen Blogbeitrag erstellen. Durch eigene Bildbestandteile oder Texte sind diese Bilder individuell auf den eigenen Beitrag abgestimmt. Perfekt, wenn kein eigenens Bild zur Hand ist.

Woher bekommst Du Mockups und wie bearbeitest Du sie?

Suchst Du im Web nach Mockups, wirst Du viele kostenlose und kostenpflichtige Anbieter finden. Sammlungen kostenfreier Mockups findest Du zum Beispiel bei Designrazzi oder Designrfix. Achte aber unbedingt darauf, welche Nutzungsbedingungen für die Bilder gelten!

Meine bevorzugte Quelle für Mockups ist Creative Market*. Hier gibt es wirklich viele gute Sets, die ihr Geld wert sind, und viele andere schöne Dinge darüberhinaus.

Natürlich brauchst Du für solche Dateien ein entsprechendes Programm zur BearbeitungAdobe Photoshop* oder auch das kleinere Photoshop Elements* mit einer Erweiterung (http://simplephotoshop.com/index.htm oder http://thepluginsite.com/products/elementsxxl/, beides für Windows) sind die Programme, mit denen ich arbeite. Andere Programme, die Smartobjekte verarbeiten, kenne ich selber nicht. Wenn Du einen Tip hast, kannst Du ihn gerne in den Kommentaren posten.

Solltest Du kein Programm zur Bildbearbeitung besitzen, kannst Du trotzdem Mockups machen. Plattformen wie MockDrop oder Place It bieten das als Service an (teilweise kostenpflichtig). Für iOS gibt es die App ISweetit 2.0.

Ein einfaches Mockup selber machen

Nach so vielen Worten soll es jetzt praktischer werden. In diesem Video — meinem ersten im Blog! — zeige ich Dir, wie Du ein kleines Mockup selber machen kannst. Als Beispiel dient das Bild von oben. Dazu erstelle ich einen Textschnippsel und eine kleine Zeichnung mittels Pinsel und platziere sie so, dass sie wie im Notizbuch geschrieben ausschauen. Folgende Schritte zeige ich Dir:

  1. Textebene erstellen bzw. Ebene mit Pinsel
  2. Konvertierung in ein Smartobjekt
  3. Transformation der Textebene (skalieren, verzerren)
  4. Anpassung der Füllmethode und der Deckkraft
  5. Austausch des Smartobjektes

 

 

 

Noch ein wichtiger Hinweis zum Schluss: Wenn Du Dir so ein Mockup selber erstellst, musst Du beim Speichern unbedingt das psd-Format auswählen, da damit die Ebenen erhalten bleiben. Wenn Du es in jpg abspeicherst, wird alles auf die Hintergrundebene reduziert und Deine Smartobjekte sind weg. Für die Nutzung im Web speicherst Du also immer eine Kopie als jpg und das Original in psd.

Falls Dir das Video gefallen hat, freue ich mich, wenn Du meinen YouTube-Kanal abonnierst. Und wenn Du noch Fragen hast, dann stell sie einfach in den Kommentaren.

Zusammenfassung

Scene Creator Sets und Mockups eignen sich sehr gut, um Produkte ansprechend zu präsentieren oder schnell Bilder für den eigenen Blog zu gestalten. Es handelt sich dabei um Bilddateien, die freigestellte Elemente und sogenannte Smartobjekte enthalten. Smartobjekte sind Ebenen, die Informationen aus einer anderen Bilddatei enthalten, die bei der Anpassung im Original erhalten bleiben. So lassen sich einzelne Bildbestandteile leicht austauschen und individuell gestalten.

Für die Bearbeitung oder die Erstellung von Mockups benötigst Du ein Bildbearbeitungsprogramm wie z.B. Adobe Photoshop Elements. Im Internet gibt es zahlreiche kostenfreie und kostenpflichtige Mockups und Scene Creator Sets für eine Vielzahl von Anwendungsmöglichkeiten.

Und wenn Du Deine Bilder doch lieber komplett selber fotografieren möchtest, dann findest Du im Artikel „Alles, was Du über Belichtungszeit, ISO und Blende wissen musst“ Tips zur Belichtung und Bildgestaltung.

* Affiliatelink — Bei einer Bestellung über diesen Link erhalte ich eine Provision. Für Dich fallen keine zusätzliche Kosten an.

Wenn dir der Artikel gefällt, dann teile ihn doch einfach!
Das könnte Dich auch interessieren
Zu diesem Artikel gibt es 22 Kommentare
  1. 27.04.2015 12:51

    Heute habe ich etwas völlig Neues gelernt! Ich hatte noch nie von Mockups gehört und Dein Video hat wunderbar anschaulich erkärt, wie es funktioniert und wofür man es nutzen kann. Leider musste ich feststellen, dass meine Version 8 von Photoshop Elements diese Funktion noch nicht hat- aber irgendwann ist dann wohl mal Zeit für ein Update...

    Zum Video an sich: Große klasse! Deine Stimme ist sehr angenehm und durch den "markierten" Cursor kann man wunderbar Deinen Erklärungen auf dem Bildschirm folgen.
    Danke für Deine Mühe- ich freu mich auf mehr davon.

    Liebe Grüße
    Ute

  1. 27.04.2015 17:22

    Toller Beitrag! Super interessant und ein sehr anschauliches Video.
    Leider habe ich heute bei Deinem Blog Probleme beim Scrollen...

  1. 27.04.2015 20:34

    Vielen Dank, Martina!
    Vielleicht kannst Du mir ja noch schreiben, womit Du Probleme hattest, also ob Du mobil oder am Desktop geschaut hast und was für ein Browser. Vielleicht lag es an dem eingebundenem Video? Da hab ich jetzt was in der mobilen Darstellung geändert.
    Viele Grüße
    Katharina

  1. 29.04.2015 14:05

    Hallo Katharina,
    dein Beitrag hat mir super gut gefallen.
    Da ich Linux-Userin bin, nutze ich Gimp.
    Vorteil: kostenlos
    Nachteil: SmartObjekte sind mir dabei noch nicht begegnet.
    Für die professionelle Bildbearbeitung ist es nicht hundertprozentig geeignet, aber es kann seinen Zweck erfüllen, wenn man sich erstmal reingearbeitet hat. Auch da man mit Ebenen arbeitet, Texte über Bilder legen kann, etc. Ich entdecke derzeit immer wieder neue Funktionen.

    Viele Grüsse
    Anja

    PS: Übrigens toll, dass du diesen Blog eingerichtet hast. Freue mich schon auf weitere spannende Themen.

  1. 29.04.2015 15:18

    Hallo Anja,
    mit Gimp habe ich auch schon mal gearbeitet und es tut seinen Dienst gut. Ist aber schon länger her.
    Photoshop ist natürlich eine andere Liga. Diese Investition muss man sich schon wohl überlegen. Aber gerade das momentane Abomodell mit Lightroom und Photoshop für einen Zehner im Monat ist preislich echt attraktiv, auch mal zum Ausprobieren.
    Danke für Deine lieben Worte!
    LG
    Katharina

  1. 02.05.2015 23:49

    Liebe Katharina,

    Respekt! Ich bin wirklich beeindruckt was für tolle Themen du hier auf deiner neuen Webseite erklärst und angehst. Leider komme ich selbst im Moment viel zu wenig dazu, deine Beiträge alle entsprechend zu verfolgen und vor allem auch gleich umzusetzen und auszuprobieren. Aber ich behalte das alles mal schön brav im Hinterkopf und weiß ja dann, wo ich es wiederfinde ;-)

    Danke, dass du dir die Mühe und den Aufwand machst!
    LG,
    Kerstin

  1. 04.05.2015 08:24

    Liebe Kerstin!
    Vielen Dank! Das ist klar, dass man nicht alles sofort umsetzen kann. Wenn ich alles sofort nähen würde, was ich in Blogs sehe - Hilfe! Aber wenn es im Hinterkopf oder im Feedreader ist, dann ist ja schon mal gut ;-)
    LG
    Katharina

  1. 07.05.2015 12:04

    Moin Moin liebe Katharina,
    herzlichen Glückwunsch zu dem tollen Beitrag und dem Video.
    Ich habe vorher von Mockups auch noch nichts gehört. Das ist ja wirklich klasse.
    Kann man das auch bei der Produktfotografie anwenden? Ich tue mich mit meinen Produktbildern nämlich etwas schwer.
    Ich werde es auf jeden Fall einmal ausprobieren.
    Lieben Gruß
    Sylke

  1. 08.05.2015 08:09

    Wie meinst Du das konkret, Sylke? Eigene Produkte fotografieren, freistellen und dann neu arrangieren? Geht, aber ist nicht so einfach. Was ich mir bei Dir aber vorstellen kann, sind variable Texte / Zeichnungen auf Deinen schönen Notizbüchern.

  1. 08.05.2015 10:26

    Guten Morgen Katharina,
    ich meine mein jeweiliges erstes Produktbild. Ich habe mir da ja nun ein Backdrop gekauft und fotografiere mit zusätzlichen Utensilien. Doch so richtig zufrieden bin ich da nicht. Es wirkt mir in der Übersicht zu unruhig. Deshalb möchte ich wieder mit Uni-Hintergrund fotografieren. Da müsste man dann doch auch zusätzlich etwas mit Mockups machen können.
    Ganz lieben Gruß
    Sylke

  1. 08.05.2015 10:35

    Ah, ok, hab ich mir jetzt mal angeschaut. Das Problem ist, wenn Du Dein Foto nimmst und Bestandteile aus einem externen Mockup, dass das dann mit hoher Wahrscheinlichkeit nicht zusammenpasst. Da muss ja Licht, Perspektive, Schatten, etc. sitzen.
    Du könntest Accessoires standardisiert fotografieren und freistellen und dann in einem anderen Foto - gleiche Bedingungen - einfügen. Aber ob das ein Zeitgewinn ist? Ich bezweifle es ein bisschen.

  1. 08.05.2015 10:43

    Ja, vielleicht hast Du recht. Dann werde ich es erst einmal wieder mit einem schlichten Hintergrund versuchen und die Utensilien weiterhin platzieren.
    Lieben Dank für Deine Hilfe
    Sylke

  1. 08.05.2015 14:25

    Hallo!
    Wir finden es immer wieder großartig, wenn wir im Netz auf die Erwähnung unserer App iSweetIt 2.0 stoßen, das bestätigt uns in unserer Arbeit und es freut uns, wenn diese angenommen wird. Deshalb auf diesem Weg ein recht herzliches Dankeschön und viel Erfolg und Spaß weiterhin mit deinem Blog!

    Sollte es Anregungen für Mockups geben, die derzeit noch schlecht bis kaum abgedeckt sind, sind wir für jedes Feedback dankbar und werden versuchen, diesen Ansprüchen gerecht zu werden!

  1. 13.05.2015 09:57

    Hallo,
    herzlichen Glückwunsch zu dem tollen Beitrag. Da hat es bei mir an so mancher Stelle Klick gemacht und ich hab es besser verstanden.:)

  1. 18.05.2015 15:51

    Ich muss hier mal sagen: tolle Seite. Ich finde es ganz toll, dass solche Inhalte mal für Unwissende verständlich erklärt wird. :)

    Lg

  1. 19.05.2015 12:06

    Liebe Katharina, damit möchte ich mich auch mal näher beschäftigen, sobald meine Zeit es mal wieder zulässt....ein tolles Video wie ich finde!
    Liebe Grüße
    Nora

  1. 19.05.2015 12:38

    Vielen Dank, Nora!

  1. 04.04.2016 22:43

    Hi Katharina,
    den Beitrag hast du wirklich klasse gemacht. Schön erklärt und auch tolle Hinweise bezüglich der Mockups - egal ob Free oder Bezahlt. Ich habe mich zwar schon länger mit der Materie beschäftigt und auch schon einiges gemacht, aber nachdem ich zufällig hier gelandet bin, wollte ich dir wenigstens zu diesem Beitrag gratulieren. Tolle Arbeit, mach weiter so.
    Viele Grüße, Michael

  1. 07.04.2016 18:47

    Vielen Dank!!!

  1. 03.09.2020 16:13

    Hallo liebe Katharina,

    vielen Dank für den tollen Beitrag. Leider ist das Youtube Video nicht mehr verfügbar - bin wohl ein paar Jährchen zu spät dran;-) trotzdem finde ich das Thema "Mockup" von dir sehr gut erklärt. Bin auch ständig auf der Suche nach Mockup Anbietern. Wenn ich jedoch hauptsächlich Motive mit Apple Produkten brauche, bin ich treuer Fan von https://www.chris-hortsch.de/webdesign-blog.html. Finde die Motive schlicht und elegant und der Download ist sogar kostenlos. Liebe Grüße, Floyd

    Mit dem Absenden des Kommentars stimme ich der Speicherung meiner Daten zu.: 
  1. 31.10.2020 13:47

    Mockups sind wirklich überaus nützlich. Ich Verwende Balsamiq Wireframes (vormals Balsamiq Mockups) dafür. Der Projekterfolg ist bei der Verwendung von
    Mockups schlichtweg größer.

    Mit dem Absenden des Kommentars stimme ich der Speicherung meiner Daten zu.: 
Ich freu mich über Deinen Kommentar!