How to Make a Game – Part 15: How to Make Pixel Art

How to Make a Game – Part 15

[<< Click here for part 14] [Click here for part 16 >>]

How to make a game pt15

Let’s get rolling with a quick look at the pixel art process on Boss 101 or “how we do what we do art-wise”. This is what you will need:

**The Basics**

Pixel Program – we used Photoshop for the art. It’s not better or worse than many of the other awesome programs out there. It’s just what we use. It’s nice because:

  • – Layers (Essential for rapid art development).
  • – Each layer can have an overall effect applied to it to influence the underlying art. For instance – you can use a layer with a gradient to darken and shadow a layer underneath. Very useful.
  • – Solid program not prone to crashes. I’ve used Photoshop for nearly 21 years and I think it has only crashed out completely on me maybe 4 times.
  • – Animation tools for .gifs are pretty good, I’m hesitant to say they are amazing in Photoshop but they can get the job done well.
  • – Folders, which are essential for separating the various pieces and components of art. Also allows you to store multiple files in the same location for easy reference and referral.

[Cloud] Backup Service – I cannot stress enough how important it is to actually save and back your work up all the time. May you never experience the incredible sad panda of seeing your work erased in a power outage. When that happens you cry, you wail, you promise to never let it happen again and worst of all… it’s totally your fault because you should know better. Get a free Dropbox account, Google Drive or something. If you want Snowden level security you will probably have to pay for it but most of us don’t need 4096 bit encryption for our pixel cat art.

**Setting things up**

Group Similar Items:

If you have a collection of similar items (we have a collection of player guns, player hats and bosses that get grouped together) your best bet it to put them all in the same Photoshop file. Saves a huge amount of time and makes the work a lot easier than having 200 little .PSD’s all over the place. This is a shot of our allHatsFile.psd. You can see we store 100’s of hats in one file.

article image 1

Sample of our hat working file.

Work on Things in Batches if Possible:

If you are perhaps making guns for your main character, you would benefit from making all the same types at the same time. They reason for this is you end up saving design time since you are laying out all your ideas at the same time. The avoids pattern repetition, as well as mistakes and lets you focus on the creative but putting all similar ideas in front at the same time. It’s much easier to see outliers and weird things when you have a nice lineup going.

article image 2

Sample of our guns which were drawn in batches.

Work on Things in Layers and Start with Black and White Art First:

I mentioned this in a prior post but starting with black and white is probably best for a lot of reasons. First and foremost you are probably not that good at color. Sorry! It’s true. I mean you might get lucky once in a while and get some compliments when you bolt right in with color work but unless you’re an art major and have studied color theory trust me on this. Do the first pass of your work in black and white and it will save you a ton of time. Black and white shows your contrast areas and detail in the clearest way possible. Color will accentuate a strong black and white base drawing but a weak color drawing is normally weak because of bad color choice (obviously) or it doesn’t have enough contrast. The black and white will let you focus on the important stuff first.

article image 3

Sample of a black and white starter image.

From there, the way to go is put your shading in a separate layer. This allows you to tweak and tune the look.

article image 4

Sample of a black and white shader layer.


article image 5

Sample of the shader layer applied to the base black and white – used the ‘Overlay’ layer effect in Photoshop.

Then you can just add in the color layer and play around until you have something you like.

article image 6

Sample of color – notice it is all flat shaded.


article image 7

Sample of color layer applied to the final black and white – used the ‘Color’ layer effect in Photoshop.

As you can see once you have everything all tidied up in Photoshop, separated in layers, setup for colors then you can dig in and play around with intensity and color experimentation. You will like the fact you can adjust the shading layer but keep the great colors you found. All in all this is one of the most efficient ways I have found to work. It is not the fastest at first because there is setup involved but the overall effect is a much faster workflow and a strong piece of mind. An added bonus is the tweak and changes are a lot easier too. Of course, if you do everything perfectly on the first try, you probably don’t need to change anything so just work as you please (sarcasm)!

Hope you enjoyed that look at the process we use and as always…



Boss 101 Main Site | Boss 101 IndieDB | My Twitter | Facebook

[<< Click here for part 14] [Click here for part 16 >>]

Leave a Reply

Your email address will not be published.