Welcome back to our Artist Guide series for Layer creators. Building off of our previous blog on creating a style guide, we now need to finalize what our user interface’s art style will look like.

Generally, you want your user interface’s art style to complement, but not be completely similar to your character, object, and environment art styles. This is because you want user interface elements to stand out from the “in game” art assets. This makes it easier for players to know what visual areas in the game are interactable elements.

Because of this dependency, UI style exploration is generally saved for last when it comes to making a style guide for a game project. The first step is to arrange the in game assets (characters, objects, environment) into the proper game window size. Since our game is a portrait orientation game, this might look like this:

From here, a UX designer might make rough “bones” or wireframes. These will roughly approximate the game’s user interface. For the sake of style exploration, these bones don’t need to be too complex. There just need to be a few elements like frames and buttons to start getting an idea of how the UI will look on top of the in-game assets.

You can see here a quick sketch for the game’s user interface. The top bar has room for a score and space for things like settings or menu buttons. There’s an opening that shows the “in game” world, and then the majority of the screen is dominated by a square area for our match 3 puzzle board. Underneath the game board are 3 slots for power ups or boosters.

After sketching out the user interface, UI artists can start to explore various treatments. For our dragon game, we might apply various materials like stone or rocks.

Artists would then repeat this process with a variety of UI treatments.For our dragon game we could try plants and wood, ornate metal, or even some dragon egg themes!

Let’s say that we decided to stick with our original UI treatment and go with the stone theming. Now that we have some idea of the theming from our frame, we can create things like buttons, tiles, and other icons that fit with that theme.

Here we have 3 colors of gems that we’ll be using as matching tiles. We'll also create some power up / booster icons. 

Next, we also make a green crystal backing element for the score display up top.

Once we arrange all these elements, we end up with a final mockup of how the all the game’s assets look together.

How Layer AI can help

Similar to the other steps of style exploration, Layer helps UI artists quickly explore what different styles of UI elements could look like in a game. Like before, you can simply start exploring from a “blank canvas” and ask Layer to forge various UI elements in different styles. However, it’s best to actually take placeholder elements and use those as a forge reference so that you can ensure getting something in the exact right size.

In our example earlier, we sketched out the UX wires. We can take that a step further and block out the elements in a program like Adobe Illustrator or Figma:

From there, we can export each UI  element out into images.

This now gives us assets that we can use as guidance images within Layer. Now we can use them to generate pixel-perfect UI assets to explore what various treatments could look like.

1. Go to Forge
2. Select “UI” art style
3. Add one of the assets (ex: main game board) as an image reference
4. Forge with the prompt “a stony UI background piece”
5. Adjust the strength / similarity slider 
6. Hit forge again
7. Keep forging until you have something that you like
8. Repeat for the top menu UI element

You can see how we quickly explored the various ways that we could style this UI element. Next, let’s move on to the tiles. You might recall that the tiles were only 166 pixels on the screen. While that’s how big they might be on a 1920x1080 resolution device, the reality is that we should make larger UI icons and then resize them down. Additionally when generating images using Layer, it’s best to Forge at a higher resolution like 1024x1024 for better results. Because all these tiles are square, we can forge from scratch without additional guidance images.

Let’s try for example making a red gem or jewel.

1. Go to Forge
2. Select “UI” art style
3. Forge with the prompt “a round jewel, ruby”
4. Keep forging to see different variations.

Once you find a style of gem you like, it’s time to make more that are similar.

1. Go to Forge
2. Select “UI” art style
3. Upload the previous red gem as a style reference
4. Forge with the prompt “a square jewel, sapphire”
5. Keep forging to see different variations

Time savings

Within a few minutes, we already have multiple pieces of finished artwork that we can use fully-executed mock ups. UI art can be faster to make than other art assets, but there’s a lot of iteration on it due to the importance of making things readable and interactable.

Since UI art is often a layered combination of assets (ex: a background, UI buttons, dialog windows, etc), iterating on an overall style can take multiple steps:

1. Sketching over the UX wires in a specific theme (30 minutes per composition)
2. Rendering a few elements to see if the look and feel match the in game assets (1-2 hours per UI element)
3. Creating the rest of the elements ended for a vertical slice (another 1-2 hours per UI element)

While Layer cannot automate creating the initial UX wires (that part should always be designed by a human to make sure the functionality matches the game’s design), it can quickly take the wires and create a multitude of different “skins” on top of the wires in various art styles. This can take the time to fully render a UI element from 1-2 hours down to just 5 minutes.

Takeaways

Art style exploration is the most time-consuming aspect of pre-production, but it’s also one of the most important things to really nail down. It sets the overall visual tone and language for your project, and it’s always more work redoing things further into production than getting it right the first time around.

Layer allows game teams to more quickly iterate and decide on the best art style for their projects, without having to compromise on visual quality due to iteration time constraints. In the next blog, we’ll dive into the final step of pre-production: creating a style guide. We’ll also show how that bridges into the first step of art production work.