Color Theory in Games

INTRO

Got a few requests from people to write about how to effectively use colors in games, so here we go... I'll go through some basic concepts of color theory and tell you how to apply them to your games.

I took a class in college, which was helpful, but it's not necessary for anyone.  The information about how to use colors is out everywhere on the internet so paying a ton of money to do a few exercises and take lectures isn't worth it.  I got better with colors just by following the basic things about color theory.

(This is not a full tutorial.  I will teach a few things here and other stuff I will leave out for future tutorials).

THE BASICS

The first thing you see in a color theory class is the color wheel.  Most artists have probably seen this before and it's straight forward: a rainbow wheel of all the colors you can imagine.

fun fact - the mantis shrimp can see a ton of colors that humans can't.

Thanksgiving - Tofurkey

Thanksgiving is coming up, and since I'm mostly vegan, here's a tutorial on drawing a Tofurkey.

Halloween - Ghost, Pumpkin & Zombie

Second tutorial for Halloween 2014.  I took a request from someone to make some faces, but since it's a special month, I'll make some common ghouls.  Also taking some advice and making more detailed steps.

Halloween - Spell Book, Skull & Tombstone

Halloween is coming up, so here's a special How to Draw edition on a few things you might find during this day.  Will do some more generic stuff like pumpkins, ghosts and bats next.

How to Draw - Potions

Making a few different shapes and colors, but in general they look the same and have the same steps. A few common things I use in this tutorial:

• Expand/Inset - This is a shortcut to make an outline.  Like in the 4th step, I copy the 3rd step, expand that a few pixels, paste in place what I copied and inset that a few pixels.
• Gradients - I like to use this in subtle ways because you can get overboard and make things look tacky.

Quick Draw - Diamond

Needed to make a gem for a game so I decided to make a very quick 'how to draw' tutorial.

How to Draw - Garbage

I was drawing some assets for a game and I thought "why not make a quick tutorial out of it."  So I did.  Started with a trashcan and a recycling bin, and the rest of the assets for them I broke down into a few steps. 

Flash Tips & Tricks 1

I wanted to make one giant post about things you can do in Flash, but thought it would be too overwhelming for me to write and people to read through, so here is part 1.  I'll try to focus on certain parts like all animation or all drawing.  Might recognize a few of these from other tutorials.

*Some tools can be bound to your own hotkey if one doesn't exist or you don't like the default.  To do this, go to Edit > Keyboard Shortcuts and find the tool you need to bind.  Hotkeys written below with an (*) means it's my own custom made one.

Shapes

Rectangle w/ Rounded Edges

Quick and nice feature built in flash.  Select the Rectangle Tool (R) > Properties > Rectangle Options.  Use the slider for how curvy you want your square, or if you want the opposite, you can do that too.

Polygon Tool

Should be where your rectangle and oval tool is located.  You can change the amount of points it has so you can make pentagons/hexagons/etc, as well as stars.  For some reason mine disappeared and haven't been able to figure out what happened.  If anyone knows a solution, I'd appreciate a tutorial on getting it back.

UI Placeholders & Download

This post serves mostly as a guide to how I organize my game assets in Flash.  I'll have some links to download the CS6/5 file and descriptions of what's in it.  For me, it's useful seeing how other artists create their game assets, so I'll contribute as well starting with some UI.  You can use it for your games, but I intentionally made these grey and bland so it forces people to make something better.

How to Make Game Icons

"Never judge a book by its cover."

We can throw that right out the window. We all do it, and no longer in books.  In games, people often see a pretty icon and download it instantly.  First impressions can be crucial, and you don't want your icon lacking quality, or your title unpronounceable.

What Makes a Good Icon?

Tell a story in 100x100 pixels.  That can be hard, but it can also be a fun challenge.  Let's talk through some popular games and their icons.  Some of these are from FGL and their list of 100 best/worst icons.

Good Examples

Look at how bright and vibrant the colors are, as well as the contrast these icons make.  You don't need to tell me anything about it, their looks alone would make me hit the download button.  Might be the worst game ever, but overall, icons of this much quality usually end up being well made games.  

Title Screens

Title screens are one of the most important things you want to get right in a game.  If you've spent a year making a game, you better make sure your title is easy to navigate, simple and as pretty as you can make it, otherwise you'll get players who instantly get turned off by it and move on to another game.  It might sound bad, but that's reality, we all judge books by their covers.

Examples

Plants vs Zombies

2D Character Design - Side View

Going to make a quick tutorial on how to make a character for your 2D game. Won't include animating yet, but I'll run through the things you need to make in order to be ready for animating. This is going to be a very basic character, so it might not be perfect for your game.

I'm using Flash for this because it's well designed for my needs and I can make assets way faster than any other program.  Plus it's vector, which is good if you need to export for a game that requires certain resolutions. Also using a Wacom Intuos 5, if you don't have one, I highly suggest it but these assets you can simply make with pencil/paper and a mouse.

To Begin...

Start off with a sketch of your character, either directly in your program or by hand and scan it in. Make it simple. I sketch one basic sketch in light color and then make a more detailed sketch above that layer in a darker color.

We'll call him Paul.