Shopify Agentur
Shopware Agentur
JTL-Shop 5 Agentur
Gambio Agentur
Magento Agentur
WooCommerce Agentur
PrestaShop Agentur
JTL-Servicepartner
Xentral Servicepartner Enterprise
VARIO Servicepartner
Odoo Agentur
Amazon Agentur
eBay SEO
Otto SEO
Google SEO
Google Ads
Social Media
Facebook Ads Agentur
Instagram Ads Agentur
ChatGPT Agentur
Linkbuilding Agentur
Ecommerce Tutorials
eCommerce Podcast
SEO Tools
KI Tools
eCommerce Facebook Gruppe
Kostenlose Mockups nutzen
Mockups für deinen Onlineshop finden und individualisieren
Wie Du kostenlose Mockups nutzen kannst, um deinen Onlineshop aufzuwerten, das erfährst Du hier. Wir erklären Dir, was Mockups sind, wo du diese kostenlos findest, wie Du sie anwendest und welche der gezeigten 3 Varianten unser Favorit ist. Schau also am Besten bis zum Schluss.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Hochwertige Grafiken für den Onlineshop
Habt Ihr euch schon mal gefragt, woher die hochwertigen Grafiken, wie diese oder diese oder diese in manchen Onlineshops herkommen? Dabei handelt es sich um so genannte Mockups. Was das ist und wie Du innerhalb weniger Minuten kostenlos zu deinen eigenen Mockups kommst, ohne große Vorkenntnisse zu besitzen, das zeige ich dir jetzt.
Was sind Mockups?
Doch was ist nun genau ein Mockup?
Wikipedia führt als deutsche Bezeichnung hier „Vorführmodell“ oder „Demonstrationsmodell“ an. Die Bezeichnung gibt es, wie wir sehen können, in verschiedenen Branchen, von der Zahntechnik bis zur Architektur. Und selbst im Webdesign selbst gibt es teils unterschiedliche Bedeutungen. In unserem Fall handelt es sich quasi um ein herkömmliches Bild, das allerdings so angelegt ist, dass die eigenen Inhalte perspektivisch korrekt eingearbeitet werden. Klingt kompliziert ist aber ganz einfach. Ein klassisches Beispiel wäre ein Laptop Mockup.
Kostenlose Mockups nutzen von Unblast
Dieses haben wir uns einmal kostenlos heruntergeladen und erhalten damit mehrere Szenerien sowohl als psd, also Photoshop Datei, als auch als JPG Datei. Wir öffnen beide mal und ich demonstriere euch was die Besonderheit einer Mockup Datei ist. Als Beispiel dafür nehmen wir einfach mal das eBakery Logo. Vergleichen wir einfach nur mal die Ebenenstruktur in Photoshop, wird direkt was deutlich. Die JPG Datei ist einfach nur eine einzige Ebene. Würden wir diese auf unsichtbar stellen, wäre quasi nichts mehr vorhanden. In der Mockup Datei haben wir den Hintergrund, die Schatten, den Bildschirm, das MacBook usw. jeweils als eigene Ebene. Das gibt uns nicht nur die Möglichkeit alles getrennt voneinander zu bearbeiten, sondern auch perspektivisch korrekt ohne Aufwand zu arbeiten. Dazu als Beispiel das eBakery Logo. Wir wollen dieses auf den Bildschirm bringen und den Hintergrund schwarz machen. Mit der JPG müsste ich erstmal einen Bereich auswählen. Danach färbe ich ihn schwarz. Nun füge ich das eBakery Logo hinzu. Um das Logo nun an die Perspektive des Bildschirms anzupassen, müsste ich perspektivisch arbeiten, was gar nicht mal so einfach ist.
Kostenlose Mockups nutzen in Photoshop
In einer Mockup Datei arbeitet man hingegen mit Smart Objekten. Was diese bewirken, sehen wir, wenn wir genau das gleiche wie eben nochmal machen. Und ich denke im Vergleich zur JPG wird klar, wo die Vorteile einer Mockup Datei liegen und was mit perspektivisch korrekter Anpassung gemeint ist. Das Ganze lässt sich aber nicht nur für digitale Güter wie Software, Onlineshops oder Ähnliches anwenden, sondern auch bspw. für Kleidung. Hier ist die Erstellung von Mockups quasi die Kernaufgabe für Print-On-Demand Händler.
Was ist der Vorteil eines Mockups?
Da nun klar geworden ist, was ein Mockup ist und worin die Vorteile liegen, möchte ich euch drei Varianten zeigen, wie Du deine eigenen Mockups erstellst, also diese anwendest. Die einfachste Variante sind Onlinegeneratoren wie Placeit by envato. Placeit kann erst einmal kostenlos genutzt werden, wird dann aber mit Werbung bestückt. Hier findet Ihr Mockups jeder Art, von Kleidung über Business Cards aber auch Laptop Mockups. Für komplette Einsteiger auf dem Gebiet, ohne Photoshop und Photoshop Kenntnissen, ist das die einfachste und schnellste Option. Ihr müsst einfach nur das was Ihr auf dem Bildschirm dargestellt haben wollt, hochladen, die Größe anpassen und fertig. Dieses wird dann nicht nur für ein einziges Mockup Bild angewendet, sondern mehrere und das innerhalb von Sekunden. Als zahlender Abonnent habt ihr dann auch noch mehr Anpassungsoptionen, wie die Farbe des Hintergrunds. Wie das Ganze dann für Kleidung aussehen kann, sehen wir hier.
Mockup Online Generatoren
Die zweite Varianten, die Ihr eben schon gesehen habt, wäre sich auf kostenlosen Seiten Mockups selbst zu beschaffen und diese dann in Photoshop zu bearbeiten. Eine Seite dafür wäre Unblast.com, wo wir auch unser Mockup herhaben. Diese Mockup Dateien, egal ob kostenlos oder kostenpflichtig sind immer nahezu gleich aufgebaut. Es gibt als oberste Ebene meistens eine Smart Objekt Ebene, die für euren Inhalt gedacht ist. Dass es sich um eine Smart Objekt Ebene handelt erkennt Ihr an diesem Zeichen. Wir klicken dort einmal doppelt drauf und sehen auch das Design, das wir eben auf dem Bildschirm gesehen haben, allerdings in 2D Ansicht. Wollt Ihr hier nun bspw. das eBakery Logo auf schwarzem Hintergrund platzieren, müsst Ihr eine neue Ebene erstellen, die Fläche schwarz füllen und anschließend einfach per Drag and Drop das Logo reinziehen.
Kostenlose Mockups nutzen in Photoshop
Passt die Größe an und nutzt die pinken Hilfslinien, um euer Logo zentral zu platzieren. Seid ihr zufrieden einfach wieder auf Enter klicken. Wollt Ihr dieses neu platzieren, einfach wieder auf Command + T klicken. Nun mit Command + S abspeichern. Damit wirkt sich die Änderung im Smart Objekt auch auf das Original Bild aus. Mehr müsst Ihr im Prinzip nicht machen. Doch teils stößt man mit kostenlosen Mockups an seine Grenzen. In dem Fall sieht dieses zwar hochwertig aus, besitzt aber nur einen schlichten, weißen Hintergrund.
Kostenlose Mockups nutzen - Die beste Variante
Die wohl beste und hochwertigste Variante wäre es mit kostenpflichtigen Stockfootage Seiten zu arbeiten, wie bspw. Envato Elements. Im Bereich Grafikvorlagen findet Ihr massig hochwertige, szenische Mockups. Wir laden uns mal zur Demonstration, dieses hier herunter. Wie man sieht, sind als Ordnertitel sogar konkrete Anweisungen gegeben. Solltet Ihr euch jedoch mal nicht sicher sein, könnt Ihr mithilfe des Auges, die Ebene an und ausschalten, um zu sehen, was sich verändert und welchen Bereich damit die Änderungen umfassen würde. In dem Fall haben wir auch hier wieder ein Smart Objekt, das nun exakt gleich wie eben angepasst werden kann.
Und so sieht das Ganze dann am Ende aus.
Alle drei Varianten im Vergleich
Doch vergleichen wir mal alle drei Varianten abschließend miteinander und begründen, warum nun trotzdem die letzte Variante die Beste ist. Wenn Ihr auf die Schnelle, ohne Vorkenntnisse und Photoshop Mockups kreieren wollt, dann ist Placeit eine super Sache. Ihr seid hier nur einfach eingeschränkter in euren Möglichkeiten. In Photoshop kannst Du im Nachhinein noch für jede Ebene einzeln die Sättigung, den Kontrast, die Farbwerte usw. anpassen. Des Weiteren spricht nichts dagegen kostenlose Mockups zu verwenden. Muss man allerdings dafür bezahlen, ist das eine kleine Hürde, die nicht jeder in Kauf nimmt. Das heißt, die Wahrscheinlichkeit ist bei Envato Elements geringer, dass die Konkurrenz genau dieses Mockup auch verwendet. Zudem habt Ihr eine größere Auswahl und meist szenischere Mockups, wie dieses das wir eben bearbeitet haben.
Kostenlose Mockups nutzen - Zusammenfassung
Doch was würde nun Placeit kosten?
Placeit wird aktuell für 8.49$ monatlich angeboten.
Envato Elements kostet, wie fleißige Zuschauer bereits wissen, 14,50€. Im Endeffekt müsst Ihr also am Ende entscheiden, wie viel Zeit Ihr darin stecken wollt und ob Ihr bspw. Envato Elements eh noch für andere Aufgaben nutzt, es sich also lohnt. Sollte es hier jedoch noch tiefergehende Fragen geben, habt Ihr zwei Optionen.
Entweder Ihr schreibt uns einen Kommentar oder wendet euch direkt an die Experten von eBakery und vereinbart hier einen Termin.
Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.
Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.
