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

Wie sieht der neue Web­auf­tritt auf einem Smart­phone-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.

Mit “Magic­Mock­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.

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 Magic­Mock­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.

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­phones ein­ge­baut, erscheint es ent­spre­chend verzerrt.

Auf der Sei­te “Mock­uper” 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­phones hin­ein­bas­teln kannst, bie­tet “Mock­uper” 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­uper” 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.

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.

Die tech­ni­schen Gerä­te auf den Vor­la­gen von “Mock­UPho­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.

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.

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.