Realistisches Mockup in 1 Minute gratis erstellen [Kein Photoshop erforderlich]

Sobald Ihr Eure Website mit einem der TemplateMonster-Produkte fertiggestellt habе, müsst Ihr sie nun im besten Licht Euren Kunden präsentieren. Viele Menschen verwenden dafür extra PSD-Mockup-Vorlagen, um Projekte in realistischen Umgebungen darzustellen. Aber was, wenn man keine Ahnung davon hat, wie man Photoshop benutzt und keine Zeit zum Lernen?  Da gibt es eine ganz einfache Lösung! Verwendet die unten aufgeführten kostenlosen Mockup-Tools - so könnt Ihr die Arbeit buchstäblich in wenigen Minuten erledigen.

Der ganze Prozess erfolgt in ein paar einfachen Schritten:

1. Wählt die Umgebung (Desktop, Laptop, Tablet, Handy usw.)
2. Ladet einen Screenshot Eurer Website oder App hoch oder gebt deren URL ein.
3. Seht Euch das fertige Bild in der Vorschau an und ladet es in der erforderlichen Auflösung herunter.

Scrollt einfach nach unten und verwendet den Online-Mockup-Baukasten Eurer Wahl. Zur leichteren Auswahl könnt Ihr diese Mockup-Tools anhand verschiedener Faktoren vergleichen. Sie beinhalten solche Optionen wie die Anzahl von Mockups, die Aufzählung von Geräten, Format und Auflösung von heruntergeladenen Bildern. Beachtet, dass die Auflösung ungefähr ist, da die Abmessungen jedes Bildes in Breite und Höhe variieren können.

Mockuper

• Menge: 155+ Mockups
• Geräte: Desktop, Laptop, Tablet, Telefon, andere (Apple Watch, TV etc.)
• Format: PNG
• Auflösung (Breite): XS (700+ px), S (1500+ px), M (2300+ px), L (3100+ px), XL (3800+ px)

Ihr könnt sie nach verschiedenen Umgebungen filtern, nicht nur nach Geräten, sondern auch nach Büchern, Werbetafeln, Frames, Karten usw. Dieses kostenlose Mockup-Tool verfügt über eine erweiterte Suche, um Elemente anhand des Tags oder Namens zu finden. Wenn Ihr Euren Screenshot hochlädt, könnt Ihr ihn beschneiden. Es gibt auch Konfigurationsoptionen, die die Anzeige des Bildschirms und die Auswahl deren Deckkraft bzw. Modus ermöglichen.

Smartmockups

• Menge: 150+ Mockups
• Geräte: Desktop, Laptop, Tablet, Smartphone, Watch
• Format: PNG
• Auflösung (Breite): Original (2500 px), Groß (1920 px), Mittelgroß (1280 px), Klein (880 px)

Smartmockups ist ein weiterer kostenloser Mockup-Baukasten mit mehreren Artikeln in verschiedenen Auflösungen. Ihr könnt die erzeugten Bilder überall verwenden, z. in Druck, in Vorlagen oder anderen persönlichen und kommerziellen Projekten. Ihr könnt Eure Bilder auch so bearbeiten, wie Ihr es möchtet. Neben Gerätekategorien verfügt das Tool über zusätzliche Tags, um das benötigte Design schneller finden zu können. Ihr könnt Elemente nach iOS, Android, Windows Phone, Mann, Frau, etc. filtern.

Magic Mockups

• Menge: 25+ Mockups
• Geräte: Laptop, Telefon, Tablet, iMac, andere
• Format: JPEG
• Auflösung (Breite): 960 px, 1280 px, 1600 px, 1920 px, 3000 px, 5000+ px

Eines der besten kostenlosen Mockup-Tools ist Magic Mockups. Mit seiner Hilfe könnt Ihr ziemlich realistische Mockups erstellen, die Ihr sowohl für kommerzielle als auch für nichtkommerzielle Zwecke verwenden könnt. Dank der CC0-Lizenzierung benötigt Ihr weder Quellenangaben noch Copyright-Vermerke. Es stehen nicht all zu viele Mockups zur Verfügung, aber sie sehen alle professionell aus und verfügen über eine hohe Qualität.

Dunnnk

---

---

• Menge: 55+
• Geräte: iPhone, Android, MacBook, iPad, iMac, Apple Watch
• Format: JPEG
• Auflösung (Breite): 2,000 px

Dunnnk ist ein kostenloser Mockup-Builder, der über 55 einzigartige Elemente enthält. Es wird nützlich für diejenigen von Euch sein, die vor allem auf der Suche nach iPhone  und Uhren-Mockups sind. Was Laptops und Desktops angeht, ist die Auswahl an Mockups ziemlich begrenzt. Für eine zusätzliche Gebühr von 10 $ kann man einige Mockups in PSD herunterladen.

MockupsJar

• Menge: 20+ Mockups
• Geräte: iPhone, Android, MacBook, Frame, andere (Browsers)
• Format: JPEG
• Auflösung (Breite): 320 px, 480 px, 640 px, 1280 px, 2560 px

MockupsJar bietet über 20 realistische Moсkups kostenlos und 10 weitere für eine monatliche Gebühr von 5 Euro. Apropos Freebies, es ist möglich, sie in mehreren Auflösungen herunterzuladen. Neben den Gerätebildschirmen könnt Ihr Eure Website oder App in Safari- und Chrome-Browsern mit unterschiedlichen Hintergrundfarben darstellen.

MockUPhone

• Menge: 80+ Mockups
• Geräte: iOS, Android, Windows Telefon, Laptop, Desktop, TV
• Format: PNG
• Auflösung (Breite): 2,000+ px

Bemerkenswert an MockUPhone ist eine Vielzahl von Mockups für verschiedene Geräte. Wenn Ihr beispielsweise ein iPhone-Mockup benötigt, könnt Ihr zwischen den Modellen 7, 7 Plus, 6, 6S Plus, 6 Plus, SE, 5, 5S und 5C wählen. Was nicht so cool ist, ist, dass Mockups keine realistischen Hintergründe haben. Dieser kostenlose Mockup-Baukasten unterstützt JPEG, PNG und PSD, wenn es um das Hochladen von Screenshots geht. Es zeigt auch die empfohlene Größe für jedes Gerät, z.B. 1242 x 2208 für ein iPhone. Wenn Eure Datei ein anderes Seitenverhältnis hat, passt sich die App an Euren Bildschirm an. Ihr könnt das Bild nur herunterladen, indem Ihr Eure E-Mail-Adresse angibt.

MockDrop

• Menge: 100+ Mockups
• Geräte: Smartphone, Laptop, Desktop, Watch, Tablet, TV
• Format: JPEG
• Auflösung (Breite): 3000+ px

MockDrop hat eine der größten Mockup-Sammlungen mit über 100 Artikeln. Um dieses Tool zu verwenden, benötigt Ihr Chrome, Firefox oder Safari der neuesten Version. Wenn Ihr ein Bild hochlädt, wird das Tool es in einer Sekunde verarbeiten. MockDrop scheint der schnellste Geräte-Mockup-Builder zu sein, den Ihr überhaupt finden könnt.

Mediamodifier

• Menge: 10+ kostenlose Mockups
• Geräte/Gegenstände: Zeitschriften-Cover, Zeitung, Becher, iMac, Plakat, Broschüre, Karte, Papier
• Format: JPEG
• Auflösung (Breite): 2400 px

Dieses Mockup-Design-Tool hat nur ein paar Freebies, aber sie sind immer noch in hoher Auflösung verfügbar. Um Freebies zu finden, klickt auf auf "Alle Vorlagen" und sortiert sie nach dem Preis von niedrig bis hoch. Nachdem Euer Screenshot hochgeladen wurde, können Ihr ihn auf die Platzhaltergröße zuschneiden.

GraphicTwister Online Mockup Creator

• Menge: 20+ Mockups
• Geräte: Poster, Frame, MacBook, TV, iMac, iPhone, Uhren
• Format: PNG
• Auflösung (Breite): 1200 px

GraphicTwister ist eine Onlinepräsenz mit vielen kostenlosen und hochwertigen PSD-Mockups für kommerzielle und persönliche Projekte. Sie hat allerdings auch ein Online-Mockup-Tool, um ohne Photoshop auskommen zu können. Momentan gibt es ungefähr 20 Elemente, um Euren Projekt-Screenshot hochzuladen. Bevor es im Mockup angezeigt wird, könnt Ihr es zuschneiden.

GetMocky

• Menge: 100 Mockups
• Geräte: Desktop, Handy, Tablet
• Format: PNG
• Auflösung (Breite): klein (480 px), mittelgroß (720 px)

GetMocky hat 100 Modelle, die Ihr nach Kategorien und mehreren Tags sortieren könnt. Auf diese Weise findet Ihr den notwendigen Artikel in kürzester Zeit. Dieser Produkt-Mockup-Baukasten bietet Werbegeschenke nur in kleinen und mittleren Größen. Wenn Ihr ein Bild in HD (1440), Full HD (1920) oder Originalgröße (4000+) benötigt, müsst Ihr bezahlen.

Mockuuups Studio

• Menge: 25 Freebies, 240+ Premium-Produkte
• Geräte: iPhone, Macbook, Samsung, iPad, Apple Watch
• Format: JPEG
• Auflösung (Breite):5000+ px

Mockuuups Studio ist eine Drag-and-Drop-Mockup-App, die Ihr auf Mac OS und Windows 7+ verwenden könnt. Wenn Ihr einen Screenshot importiert, wird er sofort auf alle in der Bibliothek verfügbaren Mockups angewendet. Auf diese Weise findet Ihr das erforderliche Modell viel schneller. Es gibt auch Sortieroptionen, um Euren Arbeitsablauf zu beschleunigen. Ihr könnt Mockups nach Geräten, Ausrichtungen, Hintergrundtransparenzen und Händen sortieren (männlich, weiblich, ohne Hände).

Dimmy.Club

• Menge: 12
• Geräte: Laptops, Desktops, Telefone, Tablets
• Format: PNG
• Auflösung (Breite): 2000+ px

Dimmy.Club ist ein kostenloser Mockup-Builder, um Eure Produkte oder Marketing-Materialien zu präsentieren. Ihr könnt zwischen einigen Gerätefarben, Stilen (normal oder flach) und Hintergründen (transparent oder farbig) wechseln. Wenn Ihr Bild auf dem Bildschirm angezeigt wird, könnt Ihr verschiedene Effekte hinzufügen (cover, fill, contain, stretch).

Fotomock

• Menge: 50 Freebies
• Geräte: Mobile Geräte, Tablets, Desktops, Laptops
• Format: PNG
• Auflösung (Breite): Niedrig (800 px), Hoch (2500 px)

Fotomock ist ein cooles Mockup-Tool, das Eure Websites und Apps optisch ansprechend darstellt. Ihr könnt nach fotorealistischen Mockups mithilfe von Tags suchen. Mit einer solchen Möglichkeit, die Ergebnisse einzugrenzen, findet Ihr in kürzester Zeit entsprechende Designs. Beachtet bitte, dass diese Mockups für persönliche und kommerzielle Zwecke gratis zur Verfügung stehen.

Frame

• Menge: 35+
• Geräte: Desktops, Mobile Geräte, Tablets
• Format: PNG
• Auflösung (Breite): 1200+ px

Frame ist ein kostenloses Mockup-Tool mit 9 Gerätekategorien. Dazu gehören Apple-Desktops, iOS-Tablets, Android-Handys, Android-Tablets usw. Bevor Ihr Euer Bild hochlädt, könnt Ihr Euch die empfohlene Größe ansehen. Beachtet bitte, dass Ihr den Screenshot Eurer Website nicht unbedingt hochladen müsst. Ihr könnt einfach seine URL eingeben, und das System wird einen Screenshot selbst machen und es anschließend dem gewählten Mockup hinzufügen.

Multi Device Website Mockup Generator

• Menge: 1
• Geräte: Apple iMac, MacBook, iPad, iPhone
• Format: Eures Screenshots
• Auflösung (Breite):  Eures Bildschirmes

Bei diesem kostenlosen Online-Tool müsst Ihr lediglich Eure Website-URL eingeben und auf die Schaltfläche "Mockup generieren" klicken. Das ist alles. Es gibt vier Geräte, auf denen Ihr Euer Produkt präsentieren könnt, nämlich Apple iMac, MacBook, iPad und iPhone. Sie können sie wahlweise über das Layout verschieben, ausblenden und die Hintergrundfarbe ändern.

Diese kostenlosen Mockup-Tools sind enorm zeitsparend und benötigen überhaupt keinen Photoshop. Wählt einfach ein Design aus, ladet Euren Screenshot hoch und ladet das Bild herunter. Es ist wirklich sehr einfach. Die Auswahl ist ziemlich breit, also könnt Ihr professionelle Designs für verschiedene Geräte finden und sie in mehreren Auflösungen herunterladen.

Der Artikel ist ursprünglich auf dem TemplateMonster.com-Blog erschienen und wurde aus dem Englischen übersetzt