Mockups — So passt du vorgefertigte Designs schnell an 📲 Hier sind 30 Downloads

Wer sich also mit seinen Designs abheben möchte, sollte nicht nur einfache Screenshots seiner Werke verschicken, sondern auch die Screenshots selbst im rechten Licht erscheinen lassen. Im heutigen Beitrag haben wir für Sie die besten MockUps recherchiert und eine umfangreiche Liste mit 67 kostenlosen Mockups im Angebot.

Bitte beachten Sie, die Lizenzen im Einzelfall nochmal genau zu prüfen. Denn nicht alle Anbieter gewähren die Lizenzrechte für kommerzielle Projekte. Alle Angaben sind also ohne Gewähr. Viel Spaß beim Stöbern!

Bist du dir noch nicht schlüssig, ob du mit Photoshop arbeiten möchtest? In unserem Artikel findest du eine Übersicht über die Alternativen zu Photoshop.

Browser-Fenster für Screenshots

Browserframe.com ist ein Tool, mit dem Sie Ihre Screenshots in einem Browser-Fenster anzeigen lassen bzw. kombinieren können. Das Ganze geht per Drag & Drop. Es stehen mehrere Browser, Betriebssysteme und Themes zur Auswahl. Sie können die Hintergrundfarbe, den Schatten, die Auffüllung und einige andere Details anpassen, bevor Sie das Bild herunterladen. Perfekt für Blog-Posts, soziale Medien, Folien oder wo immer Sie einen Screenshot verwenden möchten.

Ein CSS-only iPad Mockup

Kostenlose iPhone 11 Mockups

Animockup

Mit Animockup können Sie Ihr Produkt animiert in einem iPhone 11 oder MacBook Pro darstellen. Dazu ziehen Sie eine von Ihnen erstellte Videoaufnahme in das browserbasierte Tool, und Animockup platziert es automatisch in Ihrem gewünschten Modell.

Ferner können Sie auch Text und Hintergrundbilder hinzufügen, das Styling anpassen und für Twitter, Dribble, Facebook und Instagram optimieren.

iPhone 11 Mockup PSD & AI

Es ist eine sehr detaillierte Vorlage, erhältlich bei Designbolts, mit einer Auflösung von 3.000 x 2.000 Pixeln. Die Vorlage enthät sechs Farboptionen: Schwarz, Grün, Gelb, Lila, Weiß und Rot.

Erstellt von: Zee Que

Lizenz: Frei für die kommerzielle Verwendung. Eine Attributierung ist nicht notwendig.

Gedrehte iPhones

Erstellt von: Aditya Dubey

Link zum Download

Lizenz: Ohne Angabe.

iPhone 11 Mockups mit Textur

Für alle diejenigen, die nicht nur ein Standard-Mockup des iPhone 11 verwenden möchten. Das Mockup ist für Photoshop und Sketch kostenlos, aber per Angabe der Email-Adresse, erhältlich.

Anbieter: Mockup.store

Lizenz: Darf für kommerzielle Projekte eingesetzt werden, aber nicht für den Wiederverkauf. Eine Attributierung ist nicht notwendig.

iPhone 11 Mockup ohne Textur

Das kostenlose Mockup von Mockupdaddy kommt ganz in Weiß daher und lässt sich dementsprechend einfach farblich anpassen.

Das Mockup (für Photoshop) ist kostenlos, aber die Angabe einer Email-Adresse erforderlich.

Anbieter: Mockupdaddy.com

Lizenz: Darf für kommerzielle Projekte eingesetzt werden, aber nicht für den Wiederverkauf. Eine Attributierung ist nicht notwendig.

iPhone 11 Mockup mit Rückseite

Ein kostenloses Mockup von UI Store Design.

Lizenz: Darf für kommerzielle Projekte eingesetzt werden, ohne Attributierung.

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

In schöner Umgebung

Drei Aufnahmen eines Laptops und zwei Bilder eines Smartphones in stylischer Umgebung.

Auf dem Boden

Vorstellung eines Blogs auf  Smartphone und Tablet.

iPhone in Perspektiven

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.

Düsteres Smartphone

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.

Kaffee und ein Laptop

Gleich zwei Mockups, gerade nach dem Aufstehen aufgenommen: den Laptop an, das Smartphone zur Hand.

Mit Bildstil

Eine warme Stimmung dank eigener Farbstimmung vermittelt diese Vorlage.

Screens, hier und da

Auf dem Tisch, in der Hand oder gar vor dem Kopf: hier gibt es verschiedenste Geräte zum Einfügen der Inhalte zum Download.

iMac

Ein iMac in weißer Umgebung, der Bildschirm vorbereitet für die eigenen Inhalte.

Auf dem Balkon

Ein Laptop, aus verschiedenen Perspektiven aufgenommen.

Mockups für Gedrucktes

Visitenkarten vorstellen

Neun Fotos für die Präsentation einer Visitenkarte, vor dem Weinglas oder auf dem Holztisch.

Poster an der Wand

Wer ein Bild in Übergröße gestaltet, möchte dieses vielleicht auch entsprechend an einer Wand präsentieren.

Poster an drei Stellen

Wenn es etwas schmutziger werden darf, so kann das Poster auch an einer mit Graffiti verschmierten Wand hängen.

In der Zeitung

Gleich sechs Anzeigen in der Zeitung, mal vollflächig, mal als schmaler Streifen.

Magazine von allen Seiten

Ein aufgeschlagenes einmal umgeknicktes Magazin, aber auch Magazine als Cover oder mit der Rückseite im Bild.

Drei Magazine

Eine Teilansicht, einmal umgeknickt oder auch nur das Cover werden in diesem Mockup dargestellt.

Fallende Visitenkarten

Eine kreative Art, um die zwei Seiten einer Visitenkarte vorzustellen.

Corporate Identity

Nicht nur die Visitenkarte, sondern auch das Briefpapier und der Briefumschlag im eigenen Layout.

Buchumschlag

Wer ein E-Book vorstellen oder ein E-Book wertiger vorstellen möchte, findet hier eine Option.

Aufgeschlagenes Buch

Ein Buch kann auch aufgeschlagen oder übereinandergestapelt präsentiert werden.

Spezielles

Stempel und Aufdruck

Ein durchdachtes Mockup, da nicht nur der Stempelaufdruck, sondern auch der Stempel mit gespiegeltem Motiv umgesetzt wurden.

Firmenschild

Perfekt als Grundlage für ein Logo, um Unternehmen eine realistische Präsenz zu verleihen.

Pullover

Eine etwas andere Grundlage für ein Logo bietet uns dieses Kleidungsstück an.

Tragetasche

Auch eine Tragetasche (die ökologisch-rücksichtsvolle) kann mit einem Logo ausgestattet werden.

Kaffeebecher

Wie ein Kaffeebecher ein eigenes Layout erhalten kann, deutet diese kurze Animation an.

Handgeschrieben

Perfekt für Geschriebenes oder auch das Logo: wie auf braunem Karton geschrieben.

Gemalt

Hier wird es künstlerisch, wenn auf dem Papier nur der eigene Schriftzug stehen bleibt.

Werbebanner

Die eigene Werbung an der Bushaltestelle oder groß an der Straßenseite als Banner: Dank Vorlage jederzeit möglich.

Flaggenmast

Einmal in Schwarz, einmal in Weiß gibt es hier zwei Flaggen-Mockups zum Beschriften.

LKW

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.

(Der Beitrag erschien erstmals am 8. März 2015 und wurde von Nataly Birch und Dieter Petereit geschrieben. Seitdem wird der Beitrag regelmäßig aktualisiert. Fällt dir ein Fehler oder ein Änderungsbedarf auf, wäre es nett, wenn du uns unter redaktion@drweb.de darüber unterrichten würdest.)