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

Marke - Produktdesign

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

Ein iPad Mockup, das nur mit HTML und CSS gebaut wurde.
Die Designerin Annie Bombanie aus Toronto hat diese rein CSS-basierte Illustration eines iPads erstellt.

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.

mockup1

Auf dem Boden

Vorstellung eines Blogs auf  Smartphone und Tablet.

mockup2

iPhone in Perspektiven

Gleich sechs iPhone-Aufnahmen, in der Hand und auf dem Tisch.

mockup3

Smartphone- und Laptop-Kombination

Ob im Hintergrund, an der Seite liegend oder mit zwei Bildschirmen aktiv: hier gibt es Technik in Kombination zu sehen.

mockup4

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.

mockup5

Kaffee und ein Laptop

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

mockup6

Mit Bildstil

Eine warme Stimmung dank eigener Farbstimmung vermittelt diese Vorlage.

mockup7

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.

mockup8

iMac

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

mockup9

Auf dem Balkon

Ein Laptop, aus verschiedenen Perspektiven aufgenommen.

mockup10

Mockups für Gedrucktes

Visitenkarten vorstellen

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

mockup11

Poster an der Wand

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

mockup12

Poster an drei Stellen

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

mockup13

In der Zeitung

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

mockup14

Magazine von allen Seiten

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

mockup15

Drei Magazine

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

mockup16

Fallende Visitenkarten

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

mockup17

Corporate Identity

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

mockup18

Buchumschlag

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

mockup19

Aufgeschlagenes Buch

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

mockup22

Spezielles

Stempel und Aufdruck

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

mockup21

Firmenschild

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

mockup22

Pullover

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

mockup23

Tragetasche

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

mockup24

Kaffeebecher

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

mockup25

Handgeschrieben

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

mockup26

Gemalt

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

mockup27

Werbebanner

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

mockup28

Flaggenmast

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

mockup29

LKW

Ob als Plane an einem LKW, als Werbebanner an einer Hauswand oder auch als Buchcover gibt es hier zahlreiche Mockups zum Download.

mockup30

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.

mockup31

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

logo_small

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

Wie hilfreich fanden Sie diese Seite?

Durchschnittliche Bewertung 2.9 / 5. Anzahl Bewertungen: 39

Ähnliche Beiträge

3 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert