Brand Design7 minute read

Apple Arcade’s Lumen: A Promotional Art and Logo Case Study

In this logo case study, we explore how embracing skeuomorphic design and polishing 3D images in Photoshop helped one Toptal designer create standout marketing assets for the hit Apple Arcade game Lumen.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

In this logo case study, we explore how embracing skeuomorphic design and polishing 3D images in Photoshop helped one Toptal designer create standout marketing assets for the hit Apple Arcade game Lumen.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Micah Bowers
Verified Expert in Design
13 Years of Experience

Micah is a digital designer who has worked with clients such as Google, Deloitte, and Autodesk. He is also the Lead Editor of Toptal’s Design Blog, and his design expertise has been featured in Fast Company, TNW, and other notable publications.

Read More

Expertise

Previous Role

Digital Designer

PREVIOUSLY AT

AutodeskDeloitteGoogle

Featured Expert

Featured expert avatar

Previously at Verizon Media

Predrag is a multidisciplinary designer who works in a range of industries including gaming, sports, food, and entertainment. In his 15 year design career, he’s partnered with global brands such as Verizon Media, Yahoo, and the NFL.
Share

Predrag Markovic is a graphic designer based in Belgrade, Serbia. He’s worked in a number of industries, including traditional printing, packaging, food, television, and more, but the gaming industry was always where he wanted to be. After working for an agency that developed promotional materials for Java games, he joined Mad Head Games to work as a game UX designer.

In early 2021, he secured an engagement with Lykke Studios, a mobile game company based in Thailand, to design promotional assets for its Apple Arcade game, Lumen.

The Brief

Lumen is a puzzle game in which the player finds a mysterious box in an attic and has to manipulate the lights, lenses, and mirrors inside it to reveal the story of the box’s creator, a 19th-century Scottish inventor named Olivia McLumen.

Markovic was asked to create a logo, an icon, and the promotional key art using existing 3D assets from the game.

The Challenge

Apple typically works on a very tight timeline. Markovic had just two weeks to turn in the game logo and splash art, and then four weeks to finalize the icon. The brief also included a parallax version of the logo and icon that could be manipulated by the pointer in Apple TV, but Markovic had never worked with Apple’s Parallax Previewer before.

“It was a very short timeline, so I knew it would mean working a lot of nights and weekends,” Markovic says. “But aside from the Parallax Previewer, I already know my tools really well, and having worked in the game industry before, I understood the process of a game launch.”

The Approach

The main character of the game, Olivia McLumen, lived during the late 1800s and early 1900s, and to evoke that era, the look and feel of the game draws from steampunk and art nouveau aesthetics. “We loved the handcrafted aesthetics of these styles,” says Jakob Lykkegaard Pedersen, the head of Lykke Studios. “They truly have great, detailed workmanship that you don’t often find anymore.”

These aesthetics needed to be reflected in the promotional assets.

For reference, the studio provided a playable build of the game, as well as 3D assets from the game that could be repurposed for the promotional art.

“I always wanted to design something in the steampunk style,” Markovic says. “It’s really a visually unique style and because it’s fantasy technology, you have huge possibilities in what you create. I was excited to have the chance to blend that with the art nouveau style that was popular during the time the game is set.”

To start, Markovic assembled mood boards and reference images to immerse himself in steampunk and art nouveau styles because he wanted to bring many of those details into his work.

“Although Lumen is a mobile game, visually it’s very polished and realistic looking with detailed 3D models, textures, and dynamic lighting,” Markovic says. “It is not a heavily stylized game with flat shapes and clean design. The assets I created needed to reflect that look and feel. In this case, a skeuomorphic design approach was the best option. We wanted to show the players through the logo and app icon what the game really looked like. And because skeuomorphic design is not a common design choice these days, it set the game apart in the Apple Arcade.”

A Unique Design Process

“I have a somewhat complex pipeline when I design in 3D,” Markovic says. “I use a lot of different tools because I like to get the best out of each one so my final product can be really polished.”

He begins with hand-drawn sketches to quickly communicate his initial ideas to the client. Once they identify the best options, he works up 2D versions in Adobe Illustrator. Then, for 3D versions, he sets up the scenes in Autodesk’s 3ds Max and finalizes them in Corona Renderer.

Then, as an extra step, he exports the alpha channels to Photoshop to retouch the images. If he’s creating an animation, he uses Adobe After Effects.

“That gives me full control of the shadow, lighting, and color control,” he says. “You can really tell the difference. And for a game about light, it’s even more important.”

The game icon before and after retouching.

Logo Design

Markovic initially developed a logo using typography that leaned heavily on mechanical elements, like rivets and hinges, to highlight the steampunk influences on the game. It was also relatively quick to produce, which was important since time was short.

A mood board for the logo.

But the studio also wanted the logo to project the more artistic, creative elements of the game’s look and feel, so Markovic started over, creating a typeface that echoed the art nouveau details that decorate the puzzle box and other features of the game.

Markovic’s sketches detail the progression of various ideas for Lumen’s logo.

He then added elements from the game, including the lights and mirrors that players have to manipulate to solve the puzzles, and animated them with Adobe After Effects. The logo, which looks like matte steel, is set on a wooden background surrounded by a decorative brass border with functional gears in the corners.

The result was a logo that not only felt authentic to the era in which the game is set but also gave viewers a peek into the workings of the game itself.

The final animated logo references a number of game elements, including the wooden box, the brass fittings, and the lights and mirrors that feature in gameplay.

The Apple Arcade Icon Design

The icon is often a potential player’s first introduction to a game. It’s what the player will see when scrolling through the Apple Arcade store. Lumen’s icon needed to evoke the essence of the game and stand out to entice players to click on it.

Apple’s icon guidelines recommend against using text, so the image needed to be as distinctive as the game’s name. Markovic sketched a number of options: an image of Olivia McLumen and various views of the puzzle box, including one in which the box was open to display the game elements.

The image of Olivia and the open-box options turned out to be too complex to work well at the small size an icon needs to be. The images needed to be simpler yet retain the realistic style of the game and the other promotional assets.

Markovic ended up with two finalists: an image of the entire box in perspective and viewed from above, and a full-frame close-up of the front decoration, with the lid slightly open and light shining from within.

The two finalists featured the box and light elements.

The second option ultimately made the cut.

The icon stands out in the Apple Arcade against the flatter images of the other icons.

The Apple TV Parallax Icon Design

Players can also shop for games on Apple TV. There, they can manipulate game icons using the pointer feature on the device’s remote control.

To enable that functionality, designers need to create layered images that consist of two to five layers that unite to create a single interactive image.

To ensure his design would work on the platform, Markovic needed to use Apple’s Parallax Previewer tool, which was new to him, but he didn’t hesitate. “I like to experiment with new tools,” he says.

Apple’s Parallax Previewer tool allowed Markovic to create icons that users can manipulate using the Apple TV pointer.

“We were especially impressed by the iOS, tvOS, and macOS icons Predrag designed for us,” says Lykkegaard Pedersen. “They were built in 3D to make an otherwise flat icon look like it pops out of your device. It looks very unique in the app store and it fits the game super well.”

The Key Art

The game is set in a dusty attic filled with light streaming in from the windows. Markovic needed to repurpose the existing art so it could be used in marketing materials. He was provided with a number of 3D assets from the game, including the puzzle box, of course; a gramophone; a clock; and an interior shot of the attic.

But because the game’s art was optimized for mobile, Markovic had to add more detail to the images in order to make them more marketing-friendly. This meant he had to add more polygons and meshes, and in some cases had to redesign them from scratch. He rendered everything in 4K in Corona Renderer for a high-definition look, then used Photoshop to retouch the images.

Part of the 3D game art provided by the studio, which is optimized for mobile.

The finished splash art featuring retouched images.

“Communication between me and the client was crucial for this to work,” he says. “Luckily, they had an experienced 3D artist who prepared the 3D assets for me to use. After that, I set up a scene in 3ds Max and we worked together on setting the right mood for the splash art. And the studio leads were very responsive and worked closely with me on driving art direction that reflected the game.”

The Success

Lumen has been a successful game, with a 4.7 rating out of 5 in the Apple Arcade store. The studio team was so impressed by Markovic’s work that they’ve brought him on again for another game.

Understanding the basics

  • How do you develop a logo concept?

    Logo development means first understanding the brief. Then research extensively to immerse yourself in ideas. Use mood boards to focus your approach. Brainstorm to spark your creativity. Use sketches to visualize your ideas better, and don’t forget color! Finally, digitally refine your best idea.

  • What are game icons?

    Like app icons, game icons are icons used to identify games in an online store or player’s library. Game icon design should align with the game’s other branding and tell the user what to expect when they click.

  • What is game art?

    Game artwork refers to any visual element associated with a game. This could include concept art, storyboards, sprites, 3D models, lighting, animation, and more.

Hire a Toptal expert on this topic.
Hire Now
Micah Bowers

Micah Bowers

Verified Expert in Design
13 Years of Experience

Vancouver, WA, United States

Member since January 3, 2016

About the author

Micah is a digital designer who has worked with clients such as Google, Deloitte, and Autodesk. He is also the Lead Editor of Toptal’s Design Blog, and his design expertise has been featured in Fast Company, TNW, and other notable publications.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

Previous Role

Digital Designer

PREVIOUSLY AT

AutodeskDeloitteGoogle

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.