Making Art for Indie Games using Adobe Illustrator
From Idea and Design to Finished Assets
There’s a lot that goes into developing an Indie game, especially if you’re starting out as a one-man army. This tutorial is for those of you struggling to bring your idea to life because of the one thing you absolutely can not do: draw.
You don’t need artistic skills to make an attractive game, you need good design. If any of you have checked out Thomas was Alone by Mike Bithell, you’d know exactly what I’m talking about.
Chances are if you make a good game with nice clean visuals, crisp lighting and immersive atmosphere, you’ll meet graphic desginers and artists along the way that want to team up with you and take your game to the next level. But you don’t have to wait around for that magic moment to come to you!
Good design isn’t easy. Some people spend hours trying to put together a decent scene, only for it to come out bland, disproportionate and unattractive. Throughout this tutorial, I’ll share some tips that will hopefully help you design aesthetic art for your game.
Tip #1: Go as simple as you can. Don’t get ambitious with your art. Focus on putting out something that you can describe as nice and appealing but don’t aim any higher than that.
Tip #2: Get used to using Pinterest on your phone. I tend to use it as much as people use social media. This will inspire you everyday and give birth to new ideas. Follow art and design boards, motion graphics, animation, photography: anything that is relevant to what you’re trying to make. Sometimes, following these will not only enhance your current idea for your game but also lead to completely new ones you can write down.
Learning by Example
In this tutorial, we’ll be learning to make the following basic scene:
This game is based on the very common and basic concept of killing enemies by jumping on them. We’ve seen this in Super Mario and various other 2D and 3D games. But if you’re a beginner you want to start from a classic and enhance it to make it your own. The tutorial will take you through some very basic steps that will help you develop art for whatever idea you have in mind.
To read about the idea of the game in detail, check out this guide.
The Idea
If you’re like me, you’re having a hard time even thinking up an idea. You just want to make a game but don’t have the faintest idea what it’s going to be. This is where I recommend you whip out your Pinterest app and start looking through concept art and illustrations. Stop at art you like and imagine a gameplay surrounding it. Or decide a gameplay and find art that fits into it. Use keywords like minimalism, flat artwork, line art, concept art, simple, clean, abstract, modern and aesthetic to name a few.
Pin all the works that inspire you to a board and write down your idea for the game as well as the character design. Once you have the idea, make sure to verify its feasiblity using the tips shared in the guide linked above. By now you should have decided what your characters will be (preferably no more than two) and have very simple minimalistic illustrations, drawings and sketches to use as reference.
I decided to make my player a short round character that is infuriated at the tall enemies walking all over him. With enough power-ups, the player can jump high and land on the enemies to squish them. The enemies are good natured townsfolk that just can’t see our player because he’s too short for them.
The Color Palette
Choosing a Color Palette
Choosing an interesting color palette is essential to good game design. If you don’t have the faintest idea about what color schemes go together, it’s time to get back on Pinterest. Make a new board and pin illustrations that pop out to you. You might want to ask friends that care a lot about color coordination for their opinion as well. In the end, pick one piece of art. This will form the base color scheme for your game art.
Developing a Color Palette
I tend to use this app for extracting color palettes from images. If you’ve got a better one in mind, feel free to suggest it in the comments. For the rest of you, open up the web app and hit the small question mark to get a walk-through tutorial. Once you’re done, click the small camera icon that says “Pick colors from image” and upload your picture. You’ll get a generated color palette and you can hit “Auto” to generate more combinations.
I also added an additional color (Vermillion: #CD321E) to give the palette some pop.
Project Setup
Now it’s time to launch Illustrator and get started! Create a new project and set your color mode to RGB by setting Profile to Video and Film. This is because RGB is supported by Adobe Animate if you want to animate your artwork. Define your Artboard’s size as 7680 x 2189 pixels. This will create a scene approximately equal to two times the screen width. Editing the width and height will change your Profile to Custom. Click OK.
Setting up the Scene
On the first layer, draw a rectangle over the Artboard to give your scene a plain background. I drew mine in the color #90907A.
Next, select the Brush tool and draw a line to represent the ground the player should walk on. I drew mine using the color #2E3E44 with a brush stroke size of 40pt.
Now it’s time to add some texture. We will use different brush styles to make the artwork interesting. Click the arrow next to Basic (Stroke Style), followed by the small Library icon denoted by books. Go to Artistic -> Artistic_Watercolor.
Select one of the styles. I chose Light Wash Thick for the foggy land in the background. You should get something like this:
The colors are off because the stoke isn’t blending in with the background which isn’t white. Click the Stroke and Select Opacity->Multiply.
You should have something like this:
Now we’re getting somewhere!
Next we’re going to work on the actual ground for the Player to walk on. Copy your brush stroke and paste it on a new layer. Choose a different Brush Style that works for the Ground. I chose Watercolor Blend.
You should now have your background set up when both layers are visible.
Exporting Artwork
Lets export our artwork for use in our game engine. Export Backdrop, Ground Shade and Ground as seperate PNG-24 files by going to File ->Save for Web -> Preset -> PNG-24.
You should end up with the following images:
The problem with these images is that when we place them in Unity, we can no longer set the blending mode of Ground Shade and Ground as Multiply. That means we’ll have to export our art so that it no longer requires different blending modes.
Ground Shade is easy to deal with. We can export it along with Backdrop as a single image to preserve the blending mode.
We can not export the ground in the same image because we’d like the ground to be placed closer to the camera in 3D space. This means that it needs to be exported as a seperate image. One way to do this is exporting Backdrop and Ground as a seperate image.
Extracting the Ground Image
If we place this image closer to the camera, it will hide the Ground Shade because of its solid background. In order to solve that problem, we place the above image in our Illustrator project by going to File -> Place. Once placed, select it and go to Image Trace -> High Fidelity Photo. Click on Expand. Right-click the expanded image and select Ungroup. The artwork is now seperated into vectors.
Click on a piece of background that you would like to remove.
Press Delete to remove the piece.
Repeat the process until you’re left with just the ground. Export it as a seperate PNG-24 image.
That’s it for the first part of this series. Check out my game development guide to learn how to use your exported artwork in a game. Stay tuned for Part 2 where we’ll go over the process of creating characters!
