Software

Kos­ten­los: Mock­ups mit Online-Tools erstellen

Original und Mockup-Bild: Mit Programmen wie “MagicMockups” zauberst du mit wenigen Klicks dein Motiv in andere Bilder hinein.

Wie sieht der neue Web­auf­tritt auf einem Smart­pho­ne-Dis­play aus? Wel­che Wir­kung erzielt eine detail­lier­te Gra­fik auf einem Tablet? Und kann auf dem Bild­schirm, der auf einem Foto zu sehen ist, nicht etwas ande­res abge­bil­det sein? Die Lösung lie­fern Mock­up-Pro­gram­me. Mit ihrer Hil­fe las­sen sich Bil­der so in ande­re Bil­der hin­ein­bas­teln, dass sie sich in Grö­ße und Aus­rich­tung auto­ma­tisch an die Sze­ne­rie anpas­sen. Die meis­ten Pro­gram­me, mit denen du sol­che Mock­ups erstel­len kannst, sind sogar kos­ten­los – ein paar davon stellt UPDATED im Fol­gen­den vor.

Mock­ups erstel­len mit “MagicMock­ups”: Für den edlen Look

Mit “MagicMock­ups” kannst du online Mock­ups erstel­len. Das Tool hat mit rund 30 Vor­la­gen ver­gleichs­wei­se weni­ge Moti­ve im Ange­bot. Ande­re Pro­gram­me bie­ten mehr. Zudem sind mit Aus­nah­me von weni­gen Bil­der­rah­men aus­schließ­lich Apple-Gerä­te auf den Mock­up-Vor­la­gen zu sehen.

Was genau sind Mockups?

Ein Mock­up ist eine Art Dum­my, der ein Foto dei­ner Wahl zei­gen soll. Der Begriff hat sich vor allem für ein Prä­sen­ta­ti­ons­bild eta­bliert, bei dem ein fiktives/digitales Bild in rea­ler Umge­bung gezeigt wird.

Die­se rea­le Umge­bung kann etwa ein Smart­pho­ne-Dis­play ent­hal­ten. In die­sem Dis­play plat­zierst du ein Foto, sodass bei­de Moti­ve zu einem Bild ver­schmel­zen. Auch ande­re Vor­la­gen-Moti­ve wie auf­ge­schla­ge­ne Bücher oder Pla­ka­te sind möglich.

Dafür set­zen die Macher auf beson­ders edle Bil­der, bei denen die Gerä­te zum Bei­spiel auf einem Holz­bo­den zu sehen oder in war­mes Licht getaucht sind. Auf­lö­sun­gen bis etwa 1.600 Pixel sind kos­ten­frei. Bei den höhe­ren Auf­lö­sun­gen bit­tet das Pro­gramm um eine Spen­de, stellt die fer­ti­gen Mock­up-Bil­der aber den­noch kos­ten­frei zum Down­load bereit.

Tipp: Pas­se dein Motiv vor dem Ein­bau an die Farb­stim­mung der MagicMock­ups-Vor­la­ge an. Dafür kannst du Bild­be­ar­bei­tungs­pro­gram­me wie Pho­to­shop oder GIMP nut­zen. Zie­he zum Bei­spiel einen leich­ten grau­en Fil­ter über das Bild, ver­rin­ge­re den Farb­kon­trast oder ver­sieh dein Motiv mit einer leich­ten Unschär­fe – je nach­dem, wel­che Stim­mung auf der Vor­la­ge herrscht. Dann sieht das Ergeb­nis umso natür­li­cher aus.

“Dunnnk”: Schnell und einfach

Mock­ups online erstel­len leicht gemacht: Auch der Mock­up-Gene­ra­tor “Dunnnk” ist kom­plett kos­ten­los und glänzt dar­über hin­aus mit einer beson­ders schnel­len Umset­zung. So kannst du mit dem Tool ein Mock­up erstellen:

  1. Kli­cke auf eines der rund 60 Vor­la­gen­mo­ti­ve, die über­sicht­lich nach Kate­go­rien geord­net sind. (Zum Bei­spiel iPho­ne, Android, Mac­Book etc.)
  2. Es öff­net sich ein Explo­rer-Fens­ter, in dem du das Bild aus­wäh­len kannst, das du in die Vor­la­ge ein­set­zen möchtest.
  3. Das Pro­gramm baut es eigen­stän­dig in die Vor­la­ge ein und stellt das Ergeb­nis in hoher Auf­lö­sung zur Verfügung.

Vor allem, wer ein Motiv auf einer Apple Watch dar­stel­len möch­te, soll­te einen Blick auf “Dunnnk” wer­fen. Die Sei­te bie­tet über ein Dut­zend Vor­la­gen zu der Smartwatch.

Der Nach­teil: “Dunnnk” gibt nicht die opti­ma­len Maße vor, die das Bild besit­zen soll­te, das du in eine Vor­la­ge ein­set­zen willst. Wird dann zum Bei­spiel ein qua­dra­ti­sches Bild in das Hoch­kant-Dis­play eines Smart­pho­nes ein­ge­baut, erscheint es ent­spre­chend verzerrt.

Auch lesenswert 
Bild­be­ar­bei­tung am Mac: Kos­ten­lo­se Pro­gram­me für Fotos 

Mit “Mock­u­per“ Mock­ups erstel­len: Der Allrounder

Auf der Sei­te “Mock­u­per” fin­dest du rund 900 Vor­la­gen, die du kos­ten­frei nut­zen kannst. Wie üblich sind die ver­füg­ba­ren Bil­der nach Kate­go­rien sor­tiert und damit leicht zu durch­su­chen. Inter­es­sant ist vor allem die Rubrik Other.

Wäh­rend du bei den ande­ren Mock­up-Gene­ra­to­ren dei­ne Moti­ve häu­fig nur in tech­ni­sche Gerä­te wie Smart­pho­nes hin­ein­bas­teln kannst, bie­tet “Mock­u­per” auch U‑Bahn-Pla­ka­te, Fir­men­schil­der, auf­ge­schla­ge­ne Bücher und Wand­ge­mäl­de als Vor­la­ge. So las­sen sich zur Abwechs­lung mal ganz ande­re Mock­ups erstellen.

Der beson­de­re Clou: Mit “Cus­tom Mock­up” bie­tet “Mock­u­per” ein Online-Tool, mit dem du dir dei­ne eige­nen Mock­up-Vor­la­gen bas­teln kannst:

  1. Lade ein Bild hoch.
  2. Defi­nie­re die Flä­che, in die ein wei­te­res Motiv ein­ge­baut wer­den kann.
  3. Set­ze das Motiv ein.

Die Macher bie­ten ein Tuto­ri­al an, das dir die Details Schritt für Schritt erklärt. So kommst du schnell zu dei­nem ganz indi­vi­du­el­len Mockup.

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

Der Gene­ra­tor “place.to” bie­tet mit über 1.500 Moti­ven die größ­te Aus­wahl an Vor­la­gen, dar­un­ter befin­den sich auch eini­ge unge­wöhn­li­che Vari­an­ten, wie zum Bei­spiel ein iPho­ne inmit­ten von Flammen.

Auch prak­tisch: Unter dem Rei­ter More Cate­go­ries kannst du aus­wäh­len, in wel­cher Umge­bung das tech­ni­sche Gerät abge­bil­det sein soll, in das dein Bild ein­ge­baut wird – also etwa im Büro, in der Küche oder im Schwimmbad.

Nach­teil: Willst du Mock­ups erstel­len und das fer­ti­ge Mock­up-Bild kos­ten­frei down­loa­den, musst du dich vor­her anmel­den. Höhe­re Auf­lö­sun­gen ab 1.400 x 940 Pixel sind kostenpflichtig.

Auch lesenswert 
Gra­tis Bild­be­ar­bei­tungs-Pro­gram­me für Win­dows 10 

“Mock­U­Pho­ne“: Der Spartanische

Die tech­ni­schen Gerä­te auf den Vor­la­gen von “Mock­U­Pho­ne” sind stets vor einem ein­far­bi­gen neu­tra­len Hin­ter­grund abge­bil­det. Ledig­lich bei den Fern­se­her-Moti­ven ist im Hin­ter­grund eine Was­ser­land­schaft zu sehen.

Beson­de­rer Vor­teil: Jedes Gerät auf einer Vor­la­ge ist detail­liert benannt. Das ist prak­tisch für den Fall, dass du dein eige­nes Motiv zum Bei­spiel exakt in ein iPho­ne 6s Plus ein­bau­en möch­test oder in ein Sam­sung Smart TV D8000. Vor dem Down­load des fer­ti­gen Mock­ups ist die Ein­ga­be einer E‑Mail-Adres­se erforderlich.

Wie kann ich Mock­ups erstellen?

Das Prin­zip der Erstel­lung von Mock­ups ist bei allen vor­ge­stell­ten Pro­gram­men identisch:

  1. Zunächst suchst du dir in der Aus­wahl das Bild aus, in das du dein eige­nes ein­bin­den möch­test. Die zur Ver­fü­gung ste­hen­de Flä­che ist in der Regel far­big hervorgehoben.
  2. Nor­ma­ler­wei­se siehst du inner­halb der Vor­la­ge oder bei den neben­ste­hen­den Infor­ma­tio­nen einen Hin­weis, wel­che Grö­ße dein Motiv am bes­ten haben soll­te (ange­ge­ben in Pixeln).
  3. Du kannst dein Motiv ent­we­der per Drag-and-drop in die Vor­la­ge hin­ein­zie­hen oder du wählst dein Bild aus dem Explo­rer-/Fin­der-Menü aus.
  4. Dein Bild wird auto­ma­tisch in die Vor­la­ge eingebunden.
  5. Das fer­ti­ge Mock­up-Bild steht zum Down­load bereit.

Mock­ups erstel­len: Kom­for­ta­bel und schnell

Willst du ein Mock­up erstel­len, ste­hen dir vie­le Gra­tis-Tools zur Ver­fü­gung. Sie alle haben eines gemein­sam: Sie sind intui­tiv zu bedie­nen und du erreichst in weni­gen Schrit­ten dein Ziel.

Die Unter­schie­de der Mock­up-Tools lie­gen eher bei Umfang und Qua­li­tät der ange­bo­te­nen Vor­la­gen. Eini­ge Anbie­ter stel­len nur weni­ge, dafür aber sehr hoch­wer­ti­ge Vor­la­gen zur Ver­fü­gung. Ande­re punk­ten mit einer sehr genau­en Bezeich­nung der tech­ni­schen Gerä­te auf den Mock­up-Vor­la­gen. Doch egal, was du suchst: Du hast vie­le Optio­nen, um am Ende kom­for­ta­bel und schnell ein ein­satz­fä­hi­ges Mock­up zur Ver­fü­gung zu haben.

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.

Time to share:  Falls dir dieser Artikel gefallen hat, freuen wir uns!