Lumen von Apple Arcade: Eine Fallstudie zu Werbekunst und Logo

In dieser Logo-Fallstudie untersuchen wir, wie die Einführung von skeuomorphem Design und das Polieren von 3D-Bildern in Photoshop einem Toptal-Designer dabei half, herausragende Marketing-Assets für das erfolgreiche Apple Arcade-Spiel Lumen zu erstellen.

Predrag Markovic ist Grafikdesigner aus Belgrad, Serbien. Er hat in einer Reihe von Branchen gearbeitet, darunter traditioneller Druck, Verpackung, Lebensmittel, Fernsehen und mehr, aber die Gaming-Branche war immer das, wo er hinwollte. Nachdem er für eine Agentur gearbeitet hatte, die Werbematerialien für Java-Spiele entwickelte, kam er zu Mad Head Games, um als UX-Designer für Spiele zu arbeiten. 2017 kam er als Freelancer zu Toptal und arbeitet nun Vollzeit an Toptal-Engagements.

Anfang dieses Jahres sicherte er sich einen Vertrag mit Lykke Studios, einem in Thailand ansässigen Unternehmen für Handyspiele, um Werbematerialien für sein neuestes Apple Arcade-Spiel Lumen zu entwerfen.

Der Auftrag

Lumen ist ein Puzzlespiel, bei dem der Spieler eine mysteriöse Kiste auf einem Dachboden findet und die Lichter, Linsen und Spiegel darin manipulieren muss, um die Geschichte der Schöpferin der Kiste, einer schottischen Erfinderin aus dem 19. Jahrhundert namens Olivia McLumen, zu enthüllen.

Markovic wurde gebeten, ein Logo, ein Symbol und die Key Art für die Werbeaktion unter Verwendung vorhandener 3D-Assets aus dem Spiel zu erstellen.

Die Herausforderung

Apple arbeitet normalerweise mit einem sehr engen Zeitplan. Markovic hatte nur zwei Wochen Zeit, um das Spiellogo und die Splash-Art einzureichen, und dann vier Wochen, um das Symbol fertigzustellen. Der Auftrag enthielt auch eine Parallax-Version des Logos und Symbols, die mit dem Mauszeiger in Apple TV manipuliert werden konnten, aber Markovic hatte noch nie zuvor mit Apples Parallax Previewer gearbeitet.

„Es war ein sehr kurzer Zeitrahmen, also wusste ich, dass es bedeuten würde, viele Nächte und Wochenenden zu arbeiten“, sagt Markovic. „Abgesehen vom Parallax Previewer kenne ich meine Tools bereits sehr gut, und da ich zuvor in der Spielebranche gearbeitet habe, habe ich den Prozess einer Spieleveröffentlichung verstanden.“

Die Vorgehensweise

Die Hauptfigur des Spiels, Olivia McLumen, lebte in den späten 1800er und frühen 1900er Jahren, und um an diese Ära zu erinnern, lehnt sich das Aussehen und Gefühl des Spiels an die Ästhetik von Steampunk und Jugendstil an. „Wir liebten die handgefertigte Ästhetik dieser Stile“, sagt Jakob Lykkegaard Pedersen, der Leiter der Lykke Studios. „Sie haben wirklich eine großartige, detaillierte Verarbeitung, die man nicht mehr oft findet.“

Diese Ästhetik musste sich in den Werbemitteln widerspiegeln.

Als Referenz stellte das Studio einen spielbaren Build des Spiels sowie 3D-Assets aus dem Spiel bereit, die für die Werbekunst wiederverwendet werden konnten.

„Ich wollte schon immer etwas im Steampunk-Stil entwerfen“, sagt Markovic. „Es ist wirklich ein visuell einzigartiger Stil, und weil es sich um eine Fantasy-Technologie handelt, hat man riesige Möglichkeiten bei dem, was man erstellt. Ich war begeistert, die Gelegenheit zu haben, dies mit dem Jugendstil zu kombinieren, der zu der Zeit, als das Spiel eingestellt wurde, beliebt war.“

Zu Beginn stellte Markovic Moodboards und Referenzbilder zusammen, um in Steampunk- und Jugendstilstile einzutauchen, weil er viele dieser Details in seine Arbeit einbringen wollte.

„Obwohl Lumen ein Handyspiel ist, ist es optisch sehr ausgefeilt und realistisch mit detaillierten 3D-Modellen, Texturen und dynamischer Beleuchtung“, sagt Markovic. „Es ist kein stark stilisiertes Spiel mit flachen Formen und klarem Design. Die von mir erstellten Assets mussten dieses Erscheinungsbild widerspiegeln. In diesem Fall war ein skeuomorpher Designansatz die beste Option. Wir wollten den Spielern durch das Logo und das App-Symbol zeigen, wie das Spiel wirklich aussah. Und da skeuomorphes Design heutzutage keine gängige Designwahl ist, hebt es das Spiel in der Apple Arcade von anderen ab.“

Ein einzigartiger Designprozess

„Ich habe eine ziemlich komplexe Pipeline, wenn ich in 3D entwerfe“, sagt Markovic. „Ich verwende viele verschiedene Werkzeuge, weil ich gerne das Beste aus jedem heraushole, damit mein Endprodukt wirklich ausgefeilt werden kann.“

Er beginnt mit handgezeichneten Skizzen, um dem Kunden schnell erste Ideen zu vermitteln. Sobald sie die besten Optionen identifiziert haben, erstellt er 2D-Versionen in Adobe Illustrator. Dann richtet er für 3D-Versionen die Szenen in 3ds Max von Autodesk ein und finalisiert sie in Corona Renderer.

Dann exportiert er als zusätzlichen Schritt die Alphakanäle nach Photoshop, um die Bilder zu retuschieren. Wenn er eine Animation erstellt, verwendet er Adobe After Effects.

„Das gibt mir die volle Kontrolle über Schatten, Beleuchtung und Farbsteuerung“, sagt er. „Man merkt wirklich den Unterschied. Und für ein Spiel über Licht ist es sogar noch wichtiger.“

Logo Design

Markovic entwickelte zunächst ein Logo mit Typografie, die sich stark auf mechanische Elemente wie Nieten und Scharniere stützte, um die Steampunk-Einflüsse auf das Spiel hervorzuheben. Es war auch relativ schnell zu produzieren, was wichtig war, da die Zeit knapp war.

Aber das Studio wollte auch, dass das Logo die künstlerischeren, kreativeren Elemente des Erscheinungsbilds des Spiels widerspiegelt, also begann Markovic von vorne und schuf eine Schrift, die die Jugendstildetails widerspiegelte, die die Puzzlebox und andere Features des Spiels schmücken.

Dann fügte er Elemente aus dem Spiel hinzu, einschließlich der Lichter und Spiegel, die die Spieler manipulieren müssen, um die Rätsel zu lösen, und animierte sie mit Adobe After Effects. Das Logo, das wie mattierter Stahl aussieht, ist auf einem hölzernen Hintergrund gesetzt, der von einer dekorativen Messingumrandung mit funktionalen Zahnrädern in den Ecken umgeben ist.

Das Ergebnis war ein Logo, das sich nicht nur authentisch für die Ära anfühlte, in der das Spiel spielt, sondern den Zuschauern auch einen Einblick in die Funktionsweise des Spiels selbst gab.

Das Apple Arcade-Icon-Design

Das Symbol ist oft die erste Einführung eines potenziellen Spielers in ein Spiel. Das sieht der Spieler, wenn er durch den Apple Arcade Store scrollt. Das Symbol von Lumen sollte die Essenz des Spiels hervorrufen und auffallen, um die Spieler dazu zu verleiten, darauf zu klicken.

Die Icon-Richtlinien von Apple raten davon ab, Text zu verwenden, daher musste das Bild so unverwechselbar sein wie der Name des Spiels. Markovic skizzierte eine Reihe von Optionen: ein Bild von Olivia McLumen und verschiedene Ansichten der Puzzlebox, darunter eine, in der die Box geöffnet war, um die Spielelemente anzuzeigen.

Das Bild von Olivia und die Open-Box-Optionen erwiesen sich als zu komplex, um bei der kleinen Größe, die ein Symbol haben muss, gut zu funktionieren. Die Bilder mussten einfacher sein, aber dennoch den realistischen Stil des Spiels und der anderen Werbemittel beibehalten.

Am Ende hatte Markovic zwei Finalisten: ein Bild der gesamten Schachtel in Perspektive und von oben gesehen und eine Vollbild-Nahaufnahme der Frontdekoration, bei der der Deckel leicht geöffnet und von innen hell scheint.

Die zweite Option hat letztendlich den Schnitt gemacht.

Das Apple TV Parallax Icon Design

Spieler können auch Spiele auf Apple TV kaufen. Dort können sie Spielsymbole mit der Zeigerfunktion auf der Fernbedienung des Geräts manipulieren.

Um diese Funktionalität zu ermöglichen, müssen Designer mehrschichtige Bilder erstellen, die aus zwei bis fünf Schichten bestehen, die sich zu einem einzigen interaktiven Bild vereinen.

Um sicherzustellen, dass sein Design auf der Plattform funktioniert, musste Markovic Apples Parallax Previewer-Tool verwenden, das für ihn neu war, aber er zögerte nicht. „Ich experimentiere gerne mit neuen Tools“, sagt er.

„Wir waren besonders beeindruckt von den iOS-, tvOS- und macOS-Symbolen, die Predrag für uns entworfen hat“, sagt Lykkegaard Pedersen. „Sie wurden in 3D erstellt, damit ein ansonsten flaches Symbol so aussieht, als würde es aus Ihrem Gerät herausspringen. Es sieht im App Store sehr einzigartig aus und passt super gut zum Spiel.“

Die Schlüsselkunst

Das Spiel spielt auf einem staubigen Dachboden, der von Licht durchflutet wird, das durch die Fenster hereinströmt. Markovic musste die vorhandene Kunst umfunktionieren, damit sie in Marketingmaterialien verwendet werden konnte. Er erhielt eine Reihe von 3D-Elementen aus dem Spiel, darunter natürlich auch die Puzzlebox; ein Grammophon; eine Uhr; und eine Innenaufnahme des Dachbodens.

Da die Grafik des Spiels jedoch für Mobilgeräte optimiert war, musste Markovic den Bildern mehr Details hinzufügen, um sie marketingfreundlicher zu gestalten. Dies bedeutete, dass er weitere Polygone und Meshes hinzufügen und in einigen Fällen von Grund auf neu entwerfen musste. Er renderte alles in 4K in Corona Renderer für einen High-Definition-Look und retuschierte die Bilder dann mit Photoshop.

„Dafür war die Kommunikation zwischen mir und dem Kunden entscheidend“, sagt er. „Glücklicherweise hatten sie einen erfahrenen 3D-Künstler, der die 3D-Assets für mich vorbereitete. Danach habe ich eine Szene in 3ds Max eingerichtet und wir haben zusammen daran gearbeitet, die richtige Stimmung für die Splash-Art zu schaffen. Und die Studioleiter waren sehr reaktionsschnell und arbeiteten eng mit mir zusammen, um die Art Direction voranzutreiben, die das Spiel widerspiegelte.“

Der Erfolg

Lumen war ein erfolgreiches Spiel mit einer Bewertung von 4,7 von 5 im Apple Arcade Store. Das Studioteam war von Markovics Arbeit so beeindruckt, dass es ihn für ein weiteres Spiel wieder engagierte.