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
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
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.
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.
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.
(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.)
3 Antworten
Thanks for sharing! I am glad when i have some Freebies on your site!!
Mal wieder ein Beitrag mit fantastischem Material. Viele Dank!
Dankeschön für dieses tolle Bildmaterial.