Making the Ultimate Lux Login
A look at how artists created League's first animated portrait.
Armed with this feedback, Suke revisited the artwork, highlighting the lights in her eyes and the smile on her face. When he showed people the new drawings, they saw more than a just beautiful face. They saw Lux.
In each image of Elementalist Lux, Suke wanted to portray a specific feeling. Her light form is an embodiment of hope, seen in the brightness in her eyes and light dancing on her face. Fire was built on fury, with dramatic, contrasting colors in her hair and an angular face shape to subconsciously convey harshness. Tranquility guided water form, seen in Lux’s restful expression and the cool, calming color scheme.
Making More by Doing Less
When motion graphics artists Adam “AdamKadamon” Oliveira and Timothy “BumsAreCool” Weiser began working with Suke to add movement to the artwork, they weren’t sure how to bring Lux to life without detracting from the portrait’s intimacy. The previous approach to animating login screens by adding dramatic animation to a ready-to-brawl poses wouldn’t work. The focus was shifted to subtle facial animations, background movements, and transitions.
By attaching levers to specific points of the image, artists can adjust Lux’s facial expressions
It wasn’t an easy adjustment. In the first attempts at adding motion, Lux’s eyes seemed to scan the room rather lock onto the viewer. “People consistently gave this feedback, ‘I almost wish she didn’t move at all,’” Adam says. The movements were so dramatic that it didn’t feel like she was maintaining eye contact. Giving her eyes more subtle, natural twitches re-established the connection between Lux and onlookers while still adding life to her face.
Lux’s Eye Movements: Work-in-Progress and Final
Tim and Adam also used motion to amplify the emotions captured in each image. Ripples of light softly reflect on to Lux’s face in water form, while lava cascades dramatically through her hair in fire form. Magnifying hope in light form was a trickier, but Tim was still excited. “I don’t have many opportunities to be like, ‘Make this cute as hell!” Tim says. “Light blooms, rainbow stuff, glitter in her hair—I was going ham on it.”
When a Plan Comes Together
Combining three unique images into one coherent, looping animation was tough. “We wanted the transitions to look like they’re a part of Suke’s art, like they’re just changing it over time,” Tim says. Early versions of these transitions, especially for fire form, featured drastically contrasting colors in an aggressive overlay. It was definitely fire, but it didn’t match with the more abstract, soft art style of the original. The transition felt natural once it mirrored the original color saturation levels and focal point.
Transition to Fire Form: Work-in-Progress and Final
Besides literally connecting three disparate images, the transitions intensified the emotions embodied by each form. The heat of fire is so intense, for example, that the transitional overlay is powerful and dramatic, while the serenity of water warrants a smooth, rippling effect.
The instant Lux shifts from feeling the fury of fire to the tranquility of water can be seen in her eyes. Adam says, “There’s this moment, less than a second, in fire form where Lux aggressively closes her eyes, like, ‘ARGHH!’ Then, she lets go and finds peace.” Similarly, when Lux opens her eyes after leaving water form, it’s to literally let in the light. This final addition made the transitions feel more than logistic: they represented Lux’s ongoing search for her true nature.
The login’s video was created at the same time as the music, yet the transitions still aligned with the beat. “It was meant to be,” Tim jokes