Making Indie Game Art Without A Great Artist

My small 3-person company Nevercenter is pretty unusual - we make both games and the tools to make games (and have been doing so for over 13 years now!). We started out making a dedicated low-cost 3D modeler called Silo, which arose out of frustration in bigger 3D software packages at things as simple as how to select components on a 3D model or customize your mouse settings. On a whim, after having worked on Silo for a few years, we made the world’s first vintage photo app, which reached #1 on the iOS App Store when it first came out and gave us some time and money to finally try making our own games. This led to Shibuya, a puzzle arcade game we made that won a PAX 10 selection from Penny Arcade and an IGF Honorable Mention for Best Mobile Game. You could equally say our company lacks focus OR that we’re adventurous in trying different things!

The fact of the matter is, in terms of training and expertise we’re much better programmers and tool designers than we are artists, which puts us in a bind when making games ourselves. But this has made us think a lot about the following question: “How can non-artists like us make great art for games?” I’d like to show a couple of the methods we’ve used in our recent games (one of which motivated our latest tool, Pixelmash).

Case Study 1: Making Painterly Art from Photos (As Seen In Fox Solitaire)
Fox Solitaire is, you guessed it, a solitaire-like card game (with rules distinct from traditional solitaire but somewhat related). My brother John who works with me invented the gameplay using normal playing cards, but we wanted to develop a distinct look for the iOS game that would make you feel like you’re in a hunting lodge after being out on your fox hunt, playing solitaire as you relax with the other landed gentry. This suggested a classic painterly look, but we are definitely not painters. Here’s what we ended up with, which we were quite happy with:

The first step was to go to Pixabay to find royalty-free images of the animals we wanted to use for our card designs (a fox, a rooster, and a hound). Pixabay is an incredible resource for images like these, featuring all kinds of photos uploaded by mostly non-professional people who just want to share their photos for free. Here are the photos we started with:

I brought these photos into my favorite Photoshop/Illustrator substitute Affinity Designer (which we did not make though we wish we did, and which is both way cheaper and way better than Adobe’s software in my opinion). I used masking to remove the background in each photo, and then used pretty basic vector shapes to make simple background patterns (using the symbols tool in Affinity Designer), card borders, and numbering. This is what they then looked like:

Getting there, but still not beautiful! I tried a few regular Photoshop paint-like filters but couldn’t get anything approaching what I was hoping for. Then I remembered an app my brother had been posting photos on Facebook with (and which you’ve probably all seen by now) that uses neural networks to make photos imitate painting styles, called Prisma. I loaded these images onto my iPhone and brought them into Prisma and found the Mononoke filter gave these a really terrific look. I especially liked how it gave variety to the little pattern shapes in the backgrounds:

Unfortunately, the filter gave a great painterly style but seriously altered the colors. It took a ton of trial and error to get the colors in the Affinity Designer files right so they’d be anywhere close to what I wanted after having run the images through Prisma. Our own desktop photo filtering software CameraBag came to the rescue, and with one more pass through that with filters designed for each of the three card styles, we finally got to the final look we were after:

Q.E.D.!

Case Study 2: Making Pixel Art From Vector Drawings (As Seen In Bear Winter)
Bear Winter was another game idea hatched by my brother John, where I was responsible for generating the artwork despite not being much of an artist. It has a unique match-3 mechanic, where you swipe across items only in the lower 3x3 section in a larger 3x7 stack. The look we were going for was a high-res pixel art look, pixelized just enough to don a bit of retro magic but high-res enough to feel modern. In retrospect, I think we went too far towards high-res and should have pixelized it more - a lot of people just thought it was jaggy.

Besides wanting a little retro magic, we figured having a pixelized look in the end would be a little more forgiving on my limited drawing skills. We wanted to make the source artwork as vectors because it was easier to adjust something in a vector file than it was to go in and edit pixel-by-pixel, plus we didn’t know the final resolution we wanted to end with. It’s a bit hard to tell what it actually looks like on a high-res phone screen, but hopefully this gives you the idea of the look we got to:

Here’s a 100% crop:

At the time we made the game, I turned to the same Affinity Designer software to make the vector art. Affinity Designer has a nice feature where you can hit a button to view your document at whatever pixel resolution you have it set to, even if you’re using vectors. So I could draw with vectors while seeing the pixelized result if I set the document resolution for each item’s artwork to, say, 70 by 70 pixels (note that in the image on the right, we’re still working with vectors, but it’s pixelized to 70x70):

It was pixel-y, and got us a good deal of the way to the look we wanted, but it was here that I thought we could make a tool that would do a better job of converting high-res drawings or photos into real pixel art. While I didn’t get it made in time for Bear Winter’s release, I did end up making a tool (Pixelmash) that takes in high-res artwork, lets you adjust the pixelization level with a slider, and lets you use layer effects to do things like limit the colors or gradation levels, remap colors, and add outlines. Here’s a few variants from the same original bear image, exported as high-res pixel art and then imported into Pixelmash:

Here are some with the heart graphic, again starting with the simple vector drawing made in Affinity Designer and then imported into Pixelmash (where different pixelization levels and layer effects were applied to get different looks):

Q.E.D.!

We actually currently have a Kickstarter campaign going to see if there’s enough interest in Pixelmash to release it as a tool to the public, check it out here: http://kck.st/2nEY7wQ.

So those are two of the techniques we’ve used so far. We actually have a lot more workflows and ideas we’ve developed to finish our games quickly, I’ll share more in another post soon!