Kongregate Developer’s Blog

Creating an Art Style

What is “art” and why do I care?

I don’t have what you might call an “artistic flare” for writing these, so bear with me. Much of what is said here will be geared towards video games, but it still applies to other forms of art. In my work as Studio Art Director at Ultrabit, I often have to tell artists to change their art to fit the goals of our project. This task creates a level of anxiety and uncertainty for most artists. You’re taking them out of their comfort zone and possibly creating a feeling of being set up for failure. One of the things that artists face today is the uncertainty of whether their art is any good. Since art is subjective, this is even more of a concern. What appeals to some, may look crude to others. How many times have you seen art, whether it be in a gallery or hanging on someone’s wall, and said, “Eww, you call that art?” Artists are often torn by what they are passionate about creating, and what they are obligated to create.

When creating from passion, there are no wrong answers: only what drove you to create in the first place. When it comes to creating art for others, it’s bound by so many restrictions, requirements, and scrutiny, that it can be quite difficult to get on the right path. So what makes good art? How is an artist to know if they’re on the right track? Truth is, that the only real way for an artist to know is if you tell them. Honestly of course. Hopefully the artist has developed a thick skin to handle the bad with the good. But constructive criticism and positive reinforcement goes a long way in letting an artist know they’re making progress. I learned the importance of this when I got into management. With a bogged-down schedule and hopping from meeting to meeting, I found myself focusing purely on what needed to be fixed. This created a negative impression to the artists and they always felt that I hated their work. The truth is quite the opposite. I always loved their work. But since I never took the time to acknowledge that, I came across as a bad guy. You would be amazed at how much morale improves, and the increased efforts from everyone around, if you just take a second to give positive reinforcement along with the constructive feedback. Artists are passionate people and the above really helps to extract the best of their creativity.

Non-personal art is at the whim of the public or whoever is commissioning the art, making it critical to know your target audience as much as possible. As an artist, the best you can hope for is that the target audience likes what they see. Thankfully, there are a lot of references out there to help us discover what works.

What is the target audience?

I keyed in on “target audience” in the previous segment, so I’d like to shed some light on what that means exactly. When creating art for a game, comic book, advertisement, or basically anyone that is not you, there’s a specific audience the client is aiming for. It’s the artist’s job to figure out what that audience likes and to create visuals that will appeal to them. In most cases with consumer products (speaking to games, comics, and other visual products), the initial hook comes from how pretty the package is. At first glance, does the art appeal to me enough to pick up the box? Is the packaging interesting enough for me to bother reading what it’s about?

Now, things have changed to some degree with everything going digital and the strong presence of social media. But if there’s not enough word of mouth, a consumer is left to judge on their own.

Let’s look at a few examples to show you what I mean. I chose these 3 art styles particularly because they target three common demographics.

Pokémon

Pokémon: a hugely successful franchise that has taken the world by storm. Why is it so popular? What got people to play it in the first place? Pokémon’s art style is geared towards mass appeal. They knew when they set out that they wanted something that kids would love, but would be charming enough to pull in the older generation. Accessibility was key in the creation of the IP's look.

World of Warcraft: MMORPG

Now we take a look at World of Warcraft: another highly successful IP with an art style that has captured millions. While WoW has global appeal, it takes itself a little more seriously than Pokémon. That’s to say, that it caters largely to an older crowd. Not old by most's definition, but not exactly toward kids. While there are friendly faces and charm that have allure to the younger crowd, there are also very dark and scary visages that might be too much for them.

Killzone: Shadow Fall

Then we enter Killzone: a successful IP on the complete opposite side of the spectrum. Some might not consider this to have an “art style” per se, but it certainly is a style. Photo realism is actually quite difficult to pull off well. Because people are already familiar with what is real and what is not, imperfections are far more noticeable. Odd proportions will look very off compared to stylized characters, where they are totally acceptable. Although Killzone takes a realistic approach to the visuals, the futuristic setting requires some thought in how to capture what’s not real, while making you believe that it could be real.

What type of game is it?

Once we’ve established who the target audience is, you need to establish what type of game the art is for. This is important because it can heavily influence the look of the game. For example, if the camera view is set to an isometric view, you might want to focus the details on the top of your characters. In a side-scroller, you might need to reduce the level of detail to keep POIs (points of interest) and characters clear and readable.

Let’s look at some examples that showcase what I mean.

Raid Brigade example screens

Raid Brigade: Mobile and Web ARPG developed by Ultrabit

On Raid Brigade, we needed a camera angle that showcased all of the action going on while not being distracting to the user. An isometric view seemed like the best fit for this, as it’s been proven in other games featuring tons of action, like Diablo. In this particular view, we see that the primary read is from the character’s head and moves its way down. Typical with games, there are restrictions to how assets are built: poly counts, texture sizes, bone counts, etc. These constraints usually prevent the artist from being able to cram detail into every inch. So we have to be smart in our decisions to place details. This process helps us identify those areas. With Raid Brigade, we know the camera is locked at the angle shown and can only move further away. Since there was no chance of seeing details near the feet, it makes sense to allocate the most texture space to the head, and reduce as we move down.

There will be cases where every side of a building or prop can be seen with equal clarity. In cases like this, it’s generally best to give equal texel density to everything so that there are no pieces that stand out.

Lightly edited screenshot of Limbo

Limbo (I highlighted dangers and pathways for an easier read. But the game* does a great job on its own)*

Now we take a look at Limbo. What I love about this game is how they used shape and contrast to drive the player’s eye and guide them through the levels. This can be a complex task when making a side-scroller, since you’re only dealing with two dimensions. It’s easy to create too much detail and muddy the visuals, making it difficult for players to discern what you want them to see. By creating areas of contrast, you can guide players to go where you want them to go and see what you want them to see, creating an enjoyable experience for players without frustration.

BroForce screenshot

Broforce

I put this BroForce image up because I wanted to show an extreme side to a game like Limbo. BroForce is a side-scrolling action platformer, similar to Limbo. But notice how much heavier the detail levels are. There is a ton of stuff happening in this image that creates a visually muddy experience. They do a good job of using contrast for paths and destructible objects. But the main characters are actually quite difficult to discern.

Team Fortress 2 screenshot

Team Fortress 2: Team-Based FPS

Team Fortress 2 brings us to a first-person view. When you can see everything in three dimensions, it can be more difficult to discern key focal points. Throw heavy detail into the scene, and it can be near impossible. When Valve created their team-based shooter, they encountered a common problem among class-based games: discerning one class from another. With each class being unique in its role, it was critical that players be able to tell what they were up against in an instant. Going the route of Unreal Tournament or Quake, where the only separating factor was the weapon, wasn’t going to work. The brain already associates shapes with just about everything. It’s how we learned as children, and that never ceases as we get older. So it was logical that Valve went with unique shapes to define each class.

TF2 characters in silhouette

TF2: Class silhouette chart

Looking at a lineup of the classes side by side, it’s easy to see the differences, thus giving players the recognition they need for competitive play. This is a great way to break down your art design to know if it’s working or not. It’s also a great way to start your designs before working up the details. I’ll go more into this a little later.

Research

Now that we’ve established the type of game we’re developing art for, it’s time to do some research. My personal preference is to use Pinterest. Pinterest allows you to create reference boards, or mood boards, to help you develop the style for your project.

Pinterest screenshot

Pinterest: Reference board for Raid Brigade

The internet has an endless supply of information and visuals to fuel your creativity. By creating a mood board to reference while you work out designs, you reduce the chance of hitting a creative block and mitigate bad design decisions.

I generally start with examples of other games or shows that are related to the game type we’re making. If we are making a game geared towards mass market, with Pokémon being the main influence, then I will start by pulling images of Pokémon, Puzzle Dragons, and any other similar art styles. When browsing for reference, try to also pull from sources you might not think are related. A great example of this is any time you are creating tech or futuristic armor. A trained eye can tell when you’ve completely made something up, as the form doesn’t look functional. I try to think about how the thing would work in real life. How do the pieces fit together or layer? What are the mechanical pieces that drive this? Does the panel open to reveal a missile pod? How does that work? If the armor is rigid, how does the person bend and move? Oftentimes I see designs of plate armor or Kevlar that covers the chest and midsection as one piece. How is the person supposed to bend or move in that? What I’m getting at is to try not to limit your references. Great ideas can be had from all sorts of samples. Motorcycles, engine parts, blenders, speakers, rockets, trees, buildings, electrical, guns, you name it. If you incorporate function into the form, your designs will come out stronger.

Style exploration

So we’ve collected a ton of references and are now ready to start some chicken scratch. How should we start? What should I focus on? This can vary depending on your mood. Sometimes I like to take an existing character and doodle them in various styles. This helps remove the barrier of trying to design the character while trying to discover the style. You can focus purely on the art style and leave the design portion for later.

Another method I like to use when I don’t want to distract my brain with details is thumbnail exploration. I mentioned silhouettes and shapes in a previous segment; here is where that comes into play. Create a page full of different silhouettes that are the size of a thumbnail each.

Huntsman game charactert concept art

Huntsman Concept by Nick Shardlow

This allows you to focus on how the object will read before moving into the detail phase. While details are great, and might be necessary for some games, it is the absolute last thing you should do. I like to work in order of reads. Primary, secondary, and tertiary. Your primary read will be the silhouette of the object. Your secondary read will likely be how those shapes are broken up, often done through color or separating lines. Your tertiary read is all of the minor details that fill the voids. Things like pores, wrinkles, dirt, and scratches will make up these details.

Firefall character concepts

Firefall Characters: Developed by Red 5 Studios

For art styles like Pokémon, the tertiary details are often left out, as they serve no purpose and are time-consuming to put in. Imagine what Pikachu would look like if he had a bunch of scraggly lines all over his body to make up the fur.

This step will take time and is ultimately the final stretch. Be patient, be adventurous, and don’t be afraid to think outside of the box. It’s easy to iterate on a singular idea and style without realizing it. But this is the stage where you need to really be trying to create variety. You never know what the client is going to like or what ultimately ends up working the best.

Set the gold standard

Many sleepless nights and much hair-pulling later, you’ve finally done it! Through the countless iterations of back and forth with the client, you’ve managed to come up with a style that the client is happy with. In a majority of cases, that piece will become your gold standard. A gold standard is basically the blueprint for all assets that follow. The quality, shape language, rendering style, and color palette will adhere to what was done here.

There will be times when you stumble upon the look without setting a gold standard. In that case, I would finish out the piece to become the gold standard. It’s important to have this, as it is a visual guide for everyone else to follow. This helps ensure a cohesive look across art assets.

Create the world

So now that we’ve established a standard for one type of asset, we’re good to go for the rest, right? Not so much. It’s likely that you will need to create multiple gold standards. In games, characters often follow different rules from props or environments. So you may need to create a gold standard for each of those. For some games, characters are the star of the show, so popping them as much as possible is key. This can be solved in a multitude of ways. Desaturating the environments to allow the characters to stand out. Reducing details in the environments. Outlining the characters. Having stylized characters with realistic environments. Whichever way is chosen, a gold standard should be created.

One of the ways I find that helps people visualize what this world will look like is through mood paintings. Mood paintings help create the atmosphere for the world. These can come before or after gold standards are set. They are really meant to help set a tone. What does the lighting look like? What time of day is it? Is it foggy or ominous? What does this level look like? Are we in a desert or tropical jungle? Are there monolithic structures or subterranean networks? Mood paintings help artists and designers put the world together.

Firefall game environment concept design

Firefall: Diamondhead environment painting by David Kang

The End

Well, that’s about all we have time for. I hope this helped you in some way, shape, or form. There are many ways to approach this, so take what works for me, and see if any of it applies to your own process. Thanks for reading!