Intro
___
Nicht nur Adobe Photoshop sorgte zuletzt für Aufsehen mit der Funktion “generative Füllung”. Auch Adobe Illustrator weiß in der in Beta Version mit neuen KI-Funktionen zu punkten. Mit der Mockup-Funktion kann man das eigene Logo / Design / Visual auf beliebigen Objekten testen.
Die Welt der Mockups
___
Warum überhaupt Mockups? So ziemlich jedes Design wirkt in einer “realen” Anmutung greifbarer, sei es im Web- & App-Design, Labels auf dem Shirt, der Messestand oder das Mega-Banner am Hochhaus. Es gibt zahlreiche Wege, wie realistische Mockups entstehen:
Mit Online Tools (wie Placeit) kann man per Drag and Drop das Design in vorgefertigte Szenen einbauen. Beschränkt auf eine gewisse Auswahl an Devices und Objekten, müssen die Visuals/Grafikelemente meist in der exakten Größe /Format vorliegen. Etwas aufwändiger (aber schicker) sind vorgefertigte Photoshop Dateien, in denen die Designs auf bestimmten Ebene platziert werden und sich perfekt mit Schattenwurf und Lichteinstellungen ins Mockup einfügen. Diese PSD-/PSB-Dateien werden jedoch schnell recht groß in der Speichermenge.
Natürlich können Photoshop-Profis auch eigene Designs aufwändig auf ein eigenes Produkt / Device “photoshoppen”, dieser Prozess ist jedoch komplizierter und zeitaufwändiger.
Warum direkt Illustrator Beta für Mockups verwenden:
___
Mittlerweile gibt es die oben erwähnten, zahlreichen und vorgefertigten Mockups, die jedoch durch die “über-perfekte” Darstellung des Designs teils sehr technisch oder unpersönlich herüberkommen. Spannender sind “eigene” Fotos von Produkten oder zumindest die Einbettung in ein natürlicheres Umfeld. Hier kommt die Beta-Version von Illustrator ins Spiel: die KI erkennt das Objekt – egal ob gerundete Tasse, zerknitterter Beutel oder schräges Tablet – und berechnet die Fläche für das Design. Man kann also hier tatsächlich direkt das EIGENE Produkt verwenden, oder direkt auf die Adobe Stock-Welt zugreifen.
Gleich dazu mehr im How-To.
Kleiner Haken vorweg: es können nur Vektor-basierte Designs übertragen werden. Das Bildmaterial, das dem Mockup zugeordnet werden soll, darf selbst kein Foto sein.
How To Mockup
___
Um die vielfältigen Möglichkeiten zu zeigen, habe ich ein (fiktives) “Klickkomplizen-Reise-Retro-Design” erstellt, welches ich auf realistische Motive übertragen will – von denen eben KEINE funky Photoshop-Ebenen-Datei existiert.
Schritte:
1. Adobe Illustrator Beta herunterladen
im Bereich der Beta-Applikationen
2. Erstelle deine Vektor-Grafik
für meine Tests habe ich ein Reise-Label und ein topografisches Muster gewählt
3. platziere das gewünschte Foto
…und das (gruppierte) Design
4. Wähle beides aus: OBJEKT > MOCKUP > ERSTELLEN
dann: Wait for it :-)
5. Finetuning:
Passe die Ausrichtung, Höhe, Breite und genaue Platzierung des Objekts an. Fertig!
Hier bietet Adobe Stock zusätzlich weitere Modell-Ressourcen an.
Möchte ich das Mockup wieder lösen, gehe ich auf OBJEKT > MOCKUP > ZURÜCKWANDELN, möchte ich meine Grafik editieren auf > BEARBEITEN.
Nun teste ich das Logo in weiteren Szenerien:
das geknitterte Material des Beutels erkennt die KI genauso gut, wie die Wölbung der Tasse. Hier steht der Mischmodus auf “Multiplizieren” für ein realistischeres Abbild.
Logos & Labels kann man auch super vorab testen, wie sie auf bestimmten Fahrzeugen wirken:
Wandgestaltung & Schilder können ebenfalls getestet werden.
Zwar erkennt die KI räumliche Fluchtlinien gut, eine wirklich “steinig-haptische” Beschaffenheit des Labels links auf der Mauer wird jedoch nicht erreicht. Auch der Auswahl-Rahmen des Mockups auf der grünen Wand rechts stößt hier an die Grenzen, wenn weitere Vordergrund-Objekte das Design überlagern.
Fazit:
___
Die direkte Einbindung der Mockups – schon im Designprozess – kann helfen, das Ergebnis lebendig abzubilden. Ihr könnt alle Designs direkt auf dem Objekt der Begierde testen, die KI-gesteuerte Erkennung (auch von Unebenheiten und bunten Untergründen) ist bereits in der Beta-Version sehr gut. Aktuell kann man leider noch nicht steuern bzw. festlegen, wo zum Beispiel das Shirt endet und der Hals des Models anfängt (Mockup “zieht” sich dann über das ganze erkannte Objekt), bei mehreren Wandflächen (versetzt nach hinten) wiederum erkannte die Beta-Version nicht meinen Wunsch, dass sich das Design über die ganze Wand ziehen sollte. Für klar begrenzte Flächen ist es aber ein wunderbarer “Vorab-Test” des Designs.
Viel Spaß beim Testen: Wie wirkt mein Label auf Shirts, wie sieht mein Wand-Dekor in einem Raum aus, mein Social Post auf dem neusten Smartphone oder steht mir dieses Tattoo eigentlich ;-)?
Quellen:
Fotos – Envato Elements
Grafik & Animation – Klickkomplizen
Screenshots: Adobe Cloud, Adobe Illustrator Beta V28
Katja
Neueste Artikel von Katja (alle ansehen)
- Crossmedia-Kampagne für die ReMap im Landkreis Leipzig - 28. März 2024
- Icons als Teil der Marke & Corporate Design - 22. November 2023
- Mockups erstellen mit Adobe Illustrator Beta - 6. September 2023
