Mockups sind Attrappen. Wie die Kulissen im Filmstudio simulieren sie einen Inhalt, den es so nicht gibt. Jedenfalls noch nicht oder auch nur als digitale Variante. Da werden Buchcover präsentiert, Visitenkarten und Logos vorgehalten oder Screenshots auf sehnsüchtig begehrte Gadgets projiziert.
Die Auswahl ist erstaunlich vielfältig. Viele Mockups kannst du kostenlos herunterladen und dann selbst an deine Bedürfnisse anpassen. Um sie in voller Pracht einsetzen zu können brauchst du ein Grafikprogramm wie Photoshop oder Gimp. Alternativ wäre ein online Generator nach Art von Placeit hilfreich, dann aber mit eingeschränkten Möglichkeiten. Hier kommen 30 geniale Mockups für den Soforteinsatz.
Screen Mockups
Drei Aufnahmen eines Laptops und zwei Bilder eines Smartphones in stylischer Umgebung.
Vorstellung eines Blogs auf Smartphone und Tablet.
Gleich sechs iPhone-Aufnahmen, in der Hand und auf dem Tisch.
Smartphone- und Laptop-Kombination
Ob im Hintergrund, an der Seite liegend oder mit zwei Bildschirmen aktiv: hier gibt es Technik in Kombination zu sehen.
Die meisten Mockups zeigen farbenfrohe Umgebungen. Hier darf es auch mal etwas düsterer zugehen, wenn unbunt und reduziert ein Smartphone als Grundlage in drei Dateien auf einen Download warten.
Gleich zwei Mockups, gerade nach dem Aufstehen aufgenommen: den Laptop an, das Smartphone zur Hand.
Eine warme Stimmung dank eigener Farbstimmung vermittelt diese Vorlage.
Auf dem Tisch, in der Hand oder gar vor dem Kopf: hier gibt es verschiedenste Geräte zum Einfügen der Inhalte zum Download.
Ein iMac in weißer Umgebung, der Bildschirm vorbereitet für die eigenen Inhalte.
Ein Laptop, aus verschiedenen Perspektiven aufgenommen.
Mockups für Gedrucktes
Neun Fotos für die Präsentation einer Visitenkarte, vor dem Weinglas oder auf dem Holztisch.
Wer ein Bild in Übergröße gestaltet, möchte dieses vielleicht auch entsprechend an einer Wand präsentieren.
Wenn es etwas schmutziger werden darf, so kann das Poster auch an einer mit Graffiti verschmierten Wand hängen.
Gleich sechs Anzeigen in der Zeitung, mal vollflächig, mal als schmaler Streifen.
Ein aufgeschlagenes einmal umgeknicktes Magazin, aber auch Magazine als Cover oder mit der Rückseite im Bild.
Eine Teilansicht, einmal umgeknickt oder auch nur das Cover werden in diesem Mockup dargestellt.
Eine kreative Art, um die zwei Seiten einer Visitenkarte vorzustellen.
Nicht nur die Visitenkarte, sondern auch das Briefpapier und der Briefumschlag im eigenen Layout.
Wer ein E-Book vorstellen oder ein E-Book wertiger vorstellen möchte, findet hier eine Option.
Ein Buch kann auch aufgeschlagen oder übereinandergestapelt präsentiert werden.
Spezielles
Ein durchdachtes Mockup, da nicht nur der Stempelaufdruck, sondern auch der Stempel mit gespiegeltem Motiv umgesetzt wurden.
Perfekt als Grundlage für ein Logo, um Unternehmen eine realistische Präsenz zu verleihen.
Eine etwas andere Grundlage für ein Logo bietet uns dieses Kleidungsstück an.
Auch eine Tragetasche (die ökologisch-rücksichtsvolle) kann mit einem Logo ausgestattet werden.
Wie ein Kaffeebecher ein eigenes Layout erhalten kann, deutet diese kurze Animation an.
Perfekt für Geschriebenes oder auch das Logo: wie auf braunem Karton geschrieben.
Hier wird es künstlerisch, wenn auf dem Papier nur der eigene Schriftzug stehen bleibt.
Die eigene Werbung an der Bushaltestelle oder groß an der Straßenseite als Banner: Dank Vorlage jederzeit möglich.
Einmal in Schwarz, einmal in Weiß gibt es hier zwei Flaggen-Mockups zum Beschriften.
Ob als Plane an einem LKW, als Werbebanner an einer Hauswand oder auch als Buchcover gibt es hier zahlreiche Mockups zum Download.
Ein Mockup in Photoshop umsetzen
Es ist wahr: diese Art von Vorlagen werden für Photoshop umgesetzt und funktionieren da ganz unproblematisch. Nach dem Download und Entpacken wird die Datei in Photoshop geöffnet. Ein Rechtsklick auf die Ebene mit der zu ersetzenden Grafik und der Auswahl von Inhalt bearbeiten ermöglich einen schnellen Austausch. Nach Datei > Speichern wurde der Inhalt aktualisiert. Auch ein Doppelklick auf die Ebenenminiatur kann helfen. Hier kommen Smartobjekte zum Einsatz: also Ebenen, die mit externen Inhalten verbunden sind.
Probleme lösen in Photoshop Elements
Leider mag Photoshop Elements nicht elegant mit Smartobjekten arbeiten. Kommerzielle Erweiterungen bohren Elements auf und legen zahlreiche Features frei, die eigentlich nur in der großen Variante enthalten sein dürften und doch im Kern der Software versteckt sind – da gerne ElementsXXL ($49.95) oder Elements+ ($12) ansehen. Doch mag nicht jeder zusätzliches Geld ausgeben.
Es gibt Lösungen: Öffnet sich das Dokument ohne Probleme, aktiviere die Ebene mit dem Inhalt, der ausgetauscht werden soll. Gehe im Ebenenbedienfeld auf Neue Ebene erstellen. Es folgt im Menü Ebene > Schnittmaske erstellen (steht da Schnittmaske zurückwandeln, besteht kein Handlungsbedarf).
Kopiere aus einem anderen Dokument (Strg+A, Strg+C) den Inhalt und füge in die neue Ebene ein (Strg+V). Strg+T ermöglich nun das Freie Transformieren, als eine schnelle Größenänderung und Drehung. Natürlich können auch mehrere Ebenen mit Schnittmasken kombiniert werden.
Übrigens: Erscheint nach dem Öffnen eine Nachricht, dass etwas nicht unterstützt wird (etwa 16-Bit-Ebenen), bestätige einfach über Tiefe konvertieren.
Schreibe einen Kommentar