Wie sieht der Webauftritt auf einem originalen Display aus? Welche Wirkung erzielt der Webseiten-Entwurf? Und kann auf dem Bildschirm, der auf einem Foto zu sehen ist, nicht etwas anderes abgebildet sein? Die Antwort liefern Mockup-Programme. Mit ihrer Hilfe lassen sich Bilder so in andere Bilder hineinbasteln, dass sie sich in ihrer Größe und Ausrichtung automatisch an die Szenerie anpassen. Die meisten Programme sind sogar kostenlos – ein paar davon stellen wir Ihnen hier vor.

Was genau sind Mockups?

Ein Mockup ist eine Art Dummy, der die wesentlichen optischen Eigenschaften einer Webseite, eines Fotos oder auch eines Objekts nachbilden soll. Im Gegensatz zu einem Prototyp muss ein Mockup allerdings nicht alle geplanten technischen Voraussetzungen erfüllen, also noch nicht “funktionieren”.

In der digitalen Welt hat sich der Begriff vor allem für ein Präsentationsbild etabliert, bei dem eine Webseite in der realen Umgebung gezeigt wird, also etwa auf einem Smartphone-Display oder einem PC-Bildschirm. Dafür wird der Entwurf in ein Bild mit diesem Display so hineinplatziert, dass beide Motive zu einem Bild verschmelzen.

Natürlich lassen sich nicht nur Webseiten auf Bildschirme zaubern, sondern zum Beispiel auch Plakate auf Hauswände, Anzeigen in aufgeschlagene Zeitungen oder Motive auf Werbetafeln in einer U-Bahn-Station.

“MagicMockups”: Für den edlen Look

Der Online-Generator “MagicMockups” hat mit rund 30 Vorlagen weniger Motive im Angebot als vergleichbare Programme. Zudem sind mit Ausnahme von zwei Bilderrahmen ausschließlich Apple-Geräte zu sehen.

Dafür setzen die Macher auf besonders edle Bilder, bei denen die Geräte zum Beispiel auf einem Holzboden zu sehen oder in warmes Licht getaucht sind. Auflösungen bis etwa 1.600 Pixel sind kostenfrei, bei den höheren Auflösungen bittet das Programm um eine Spende, stellt die fertigen Mockup-Bilder aber dennoch zum Download bereit.

Tipp: Passen Sie Ihr Motiv vor dem Einbau an die Farbstimmung der MagicMockups-Vorlage an. Ziehen Sie zum Beispiel einen leichten grauen Filter über das Bild, verringern Sie den Farbkontrast oder machen es leicht unscharf. So sieht das Ergebnis umso natürlicher aus.

Mockup erstellen mit MagicMockups Screenshot
Wird das Motiv, das eingebaut werden soll, vorm Hochladen an die Farbstimmung angepasst, fügt es sich umso harmonischer ein. (© 2017 Ingram Publishing/Thinkstock/Startup Stock Photos/MagicMockups/UPDATED)

“Dunnnk”: Schnell und einfach

Auch der Mockup-Generator “Dunnnk” ist komplett kostenlos und glänzt darüber hinaus mit einer besonders schnellen Umsetzung.

Zum Erstellen Ihres Mockup-Bildes klicken Sie einfach auf eines der rund 60 Vorlagenmotive, die übersichtlich nach Kategorien (iPhone, Android, MacBook etc.) geordnet sind. Dann öffnet sich automatisch ein Explorer-Fenster, aus dem Sie das einzubauende Bild auswählen – schon baut es das Programm ein und stellt das Ergebnis in hoher Auflösung zur Verfügung. Vor allem, wer ein Motiv auf einer Apple Watch erscheinen lassen will, sollte einen Blick auf “Dunnnk” werfen. Denn die Seite bietet über ein Dutzend Vorlagen zu der Smartwatch.

Der Nachteil: “Dunnnk” gibt nicht die optimalen Maße vor, die das Bild besitzen sollte, welches Sie einsetzen wollen. Wird dann zum Beispiel ein quadratisches Bild in das Hochkant-Display eines Smartphones eingebaut, erscheint es entsprechend verzerrt.

“Frame”: Benötigt keinen Fotozuschnitt

Beim Generator “Frame” brauchen Sie das Bild, das Sie in eine andere Szenerie einbauen, nicht vorher passend zuzuschneiden. Stattdessen laden Sie es entweder hoch beziehungsweise ziehen es per Drag-and-drop in die Vorlage. Anschließend zeigt Ihnen das Programm einen kleinen Rahmen an, der den Maßen der Fläche entspricht, in die Ihr Motiv eingesetzt wird. Diesen Rahmen ziehen Sie dann einfach über den passenden Ausschnitt und sehen so gleich, was auf dem fertigen Mockup-Bild später zu sehen ist. Mit rund 30 Vorlagen ist allerdings die Auswahl nicht besonders groß.

Mockup erstellen mit Frame Screenshot
Bei “Frame” wählen Sie den passenden Bildausschnitt des Motivs, das Sie in die Vorlage einbauen wollen, einfach mithilfe eines eingeblendeten Rahmens. (© 2017 Ingram Publishing/Thinkstock/frame/UPDATED)

“Mockuper": Der Allrounder

Auf der Seite “Mockuper” finden Sie knapp 200 Vorlagen, die Sie allesamt kostenfrei nutzen dürfen. Wie üblich sind die verfügbaren Bilder nach Kategorien sortiert. Interessant ist dabei vor allem die Rubrik “Other”. Denn während Sie bei den anderen Mockup-Generatoren Ihre Motive häufig nur in technische Geräte wie Smartphones hineinbasteln können, bietet “Mockuper” auch U-Bahn-Plakate, Firmenschilder, aufgeschlagene Bücher oder Wandgemälde als Vorlage.

Der besondere Clou: Mit “Custom Mockup” bietet “Mockuper” ein Tool, mit dem Sie sich Ihre eigenen Mockup-Vorlagen basteln können. Dafür laden Sie ein Bild hoch, definieren anschließend die Fläche, in der ein weiteres Motiv hineingebaut werden kann, und setzen dieses Motiv dann ein. Ein Tutorial erklärt es Ihnen Schritt für Schritt.

Mockup erstellen mit Mockuper Screenshot
Der Generator “Mockuper” stellt auch ungewöhnlichere Vorlagen als nur Bilder von Smartphones, Tablets und Co. zur Verfügung. (© 2017 Ingram Publishing/Thinkstock/Mockuper/UPDATED)

“place.to”: Die größte Auswahl

Der Generator “place.to” bietet mit über 200 Motiven die größte Auswahl an Vorlagen, darunter befinden sich auch einige ungewöhnliche wie zum Beispiel ein iPhone inmitten von Flammen. Auch praktisch: Unter dem Reiter “More Categories” können Sie auswählen, in welcher Umgebung das technische Gerät abgebildet sein soll, in das Ihr Bild hineingebaut wird – also etwa einer Büroumgebung, in der Küche oder im Schwimmbad.

Nachteil: Für den kostenfreien Download des fertigen Mockup-Bildes müssen Sie sich vorher anmelden, höhere Auflösungen ab 1.400 x 940 Pixel sind kostenpflichtig.

"MockuPhone": Der Spartanische

Die technischen Geräte auf den Vorlagen von “MockuPhone” sind stets vor einem neutralen grauen Hintergrund abgebildet, lediglich bei den Fernseher-Motiven ist im Hintergrund eine Wasserlandschaft zu sehen.

Besonderer Vorteil: Jedes Gerät ist detailliert benannt für den Fall, dass man sein eigenes Motiv exakt in ein iPhone 6s Plus einbauen möchte oder in ein Samsung Smart TV D8000. Vor dem Download ist allerdings die Eingabe einer E-Mail-Adresse erforderlich.

So erstellen Sie ein Mockup-Bild

Das Prinzip der Bilderstellung ist bei allen vorgestellten Programmen identisch.

  • Zunächst suchen Sie sich in der Auswahl das Bild aus, in das Sie Ihr eigenes hinein montieren möchten. Die Fläche, auf der Ihr Motiv dann beim fertigen Mockup-Bild zu sehen sein wird, ist häufig farbig hervorgehoben.
  • Auch sehen Sie in der Regel innerhalb der Vorlage oder bei den nebenstehenden Informationen einen Hinweis, welche Größe Ihr Motiv in Pixel am besten haben sollte. Schneiden Sie Ihr Bild mithilfe eines Bildbearbeitungsprogramms entsprechend zu.
  • Klicken Sie in das Vorlagenbild. Sie erhalten entweder die Möglichkeit, Ihr Motiv per Drag-and-drop in die Vorlage hineinzuziehen, oder Sie wählen es aus einem aufklappenden Explorer-/Finder-Menü aus.
  • Ihr Bild wird anschließend automatisch in die Vorlage hinein montiert. Das fertige Mockup-Bild steht anschließend zum Download bereit.

Disclaimer
Die OTTO (GmbH & Co KG) übernimmt keine Gewähr für die Richtigkeit, Aktualität, Vollständigkeit, Wirksamkeit und Unbedenklichkeit der auf updated.de zur Verfügung gestellten Informationen und Empfehlungen. Es wird ausdrücklich darauf hingewiesen, dass die offiziellen Herstellervorgaben vorrangig vor allen anderen Informationen und Empfehlungen zu beachten sind und nur diese eine sichere und ordnungsgemäße Nutzung der jeweiligen Kaufgegenstände gewährleisten können.