Web & Wissen - Social Media Beratung Fürth / Nürnberg

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).

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.

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 Bearbeitung. Adobe 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.

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