Using Adobe Photoshop to Make Pixel Art

The most recent Photoshop I have is Adobe Photoshop CS2, and I work on a Mac. I'm referencing a windows version of Photoshop as well, but the most recent version I have access to for Windows is Photoshop CS. Hopefully things are mostly the same. If not, I'm not really using anything in my process that you couldn't also do in most earlier versions of Photoshop. If you do not own any versions of Adobe Photoshop, there are other applications that you can use, although I don't have experience with those. One robust, free application I hear good things about is Gimp: http://www.gimp.org. If you download it and enjoy using it, don't forget to donate some $$ to the Gimp team. It's my strong recommendation that we support that which we value in our lives. Otherwise it might just go away…

I also want to mention using a Wacom drawing tablet whenever possible. Especially for things like that big flower earlier on. I used to do all this on a laptop trackpad, and on my desktop with a mouse. Eventually I switched to using my Wacom tablet and it helps tremendously. I would highly recommend getting yourself a small one. They are not expensive.

I use keyboard shortcuts a LOT. For example, if I want to switch from the pencil tool to the eraser tool, I'll type "e" and the eraser tool will be active. I save loads of time this way and I will add the keyboard shortcut references whenever possible next to commands I'm using.

So, before we start drawing with Photoshop's tools, let’s set up Photoshop’s Preferences! We need to have the greatest amount of control possible for our pixel manipulations, so let's make some changes to Photoshop's default preferences. If you've got particular preferences set already, you should save them as presets wherever possible in order to easily switch between the setup for pixel art and whatever you usually use it for.

To get to the General Preferences

Mac: Command + k
or Photoshop > Preferences > General

Windows: Ctrl + k
or Edit > Preferences > General

History States: it defaults to 20 on my Mac CS2 version. I'll increase that to 100. Set that to 50 at least. If your computer isn't tight on RAM or scratch disk space, the more the better. More options to go back and fix something you did earlier on.

Image Interpolation: Set to "Nearest Neighbor". This will make sure Photoshop keeps crisp pixels when doing any resizing or scaling of your artwork. Nearest Neighbor means when you do any re-sizing and scaling of your work, Photoshop will refer to the pixels around it and create more of those. If you go back and forth between pixel art and other smooth graphic or photo-editing, you should remember to change this back to the default "Bicubic" when finished.

If you're new to Photoshop, you might want to make sure that "Turn on Tool Tips" is checked. This is nice because when you hover the mouse over tools and other things, the name of the tool shows up, as well as the keyboard shortcut to make that tool active. I use keyboard shortcuts a LOT!! All the time. I mention this again because they are one of the greatest time saving devices you’ll have at your disposal and will allow for more fluid image creation.

Preferences: Display & Cursors

For "Painting Cursors" select "Normal Brush Tip"

For "Other Cursors" select "Precise"

Preferences: Transparency & Gamut

It's my personal preference to turn off that background grid that could show through transparent areas of layers.

Preferences: Units & Rulers

Units:
Change Rulers from "Inches" to "Pixels"
Change Type from "Points" to "Pixels"

Everything else in the main Prefs should be fine as is.

Now let’s change some settings of some particular Tools themselves. First I'll list the tools I actually use when making pixel art:

Below I'll describe what settings I have for each of these tools, if it's different from the default setting.

Marquee Selection Tool (M): set "Feather" to "0". This should be the default, but just in case…

Lasso Tool (L): Deselect "Anti-alias" and make sure and "Feather" is set to "0".

(I'll describe below what the significance of Anti-aliasing is, after I get through these tool settings)

Magic Wand Tool (W): Set "Tolerance" to "0", Deselect "Anti-alias". You can check and uncheck "Contiguous" as needed, depends on the situation. Same with "Sample All Layers", but generally I leave that one unchecked

Pencil/Brush Tool (B): It's the "Brush" tool by default. Change this to the "Pencil" tool. Select a 1 Pixel Brush.

Also, go to the Brush Presets to the far right of the tool settings, (Brushes tab) and make sure to uncheck anything that's checked. Usually "Smoothing" is selected by default. "Shape Dynamics” may be checked as well. Uncheck these or you will/may experience a short delay with every single pixel you draw.

Eraser Tool (E): Set Brush Size to 1 pixel. Set Mode to "Pencil". Also, uncheck all Brush Presets, as you did for the Pencil tool earlier. (See above screenshot).

Paint Bucket/Gradient Tool (G): It's the Gradient tool by default; select the Paint Bucket tool instead. You may choose to use the gradient tool at times, but paint bucket seems to be much more useful in pixel art.

Type tool (T): Set the, um, smoothing? to "None". It's the menu item in the middle that is set to "Sharp" by default, in my Photoshop. Setting this to "none" will allow you to use any typeface as a pixel font. Try different point sizes for lots of different fonts.

Note: For a great resource with loads of great FREE pixel fonts, visit http://www.dafont.com/bitmap.php?page=1.webloc

Line Tool (U): Use the settings in the screenshot. Bitmap, not Vector, Line option, Weight 1 pixel. Deselect Anti-alias.

Whew! That's about all you should need to set. It sure would be great for Adobe to support Pixel Artists with a holistic "Pixel Art" setting, where all this could be set with one click. Some of this can be set with "Presets" that you can save yourself, so try experimenting with those to save time in the future.

Now that we've got Photoshop all prepared, let’s try drawing something and learning a few things that make the process easier. If anyone has different or better ideas on how things are done, go with that. I only know what I know so far and Photoshop is a massive program. There's almost always more than one way to do the same thing in Photoshop, if not many ways. So, I'll show you the ways I do it, you do it how you like.

Also, I'm not going to reinvent the wheel here, so to speak. There are plenty of good Photoshop tutorials and resources & books out there. If I mention, "Just do this" without too much direction, please know that whatever time I spend here is time I am not spending on making our next game! So, if I leave out something you'd like to know more about, just do a little searching online and I'm sure you will be able to find answers quickly. I'll add some resources and links at the end of this tutorial that may be helpful.

Anti-aliasing: Before we draw anything, let me quickly describe the difference between aliased & anti-aliased graphics. All the graphics I used above are "aliased". That is, hard edged. They are all using only the primary colors you see in them, and the edges of the graphic are blocky as they should be in pixel art. Anti-aliasing is a method of adding semi-transparent pixels to the edges of graphics in order to give the illusion of smoothness, to eliminate the pixelly appearance. It's like a slightly feathered edge to graphics. Text is often anti-aliased on computer screens to make the curves smoother and easier to read. I've set up this sample file below to help illustrate the difference.

See all those extra pixels added to the edges of graphics on the right? It sure does work though, for what it's intended to do. Brilliant! Note: I custom created that lasso tool on the left myself to show an example of something familiar as aliased & anti-aliased. The lasso tool won't actually look aliased like that if you deselect the anti-aliasing option.

So, let's get to some drawing now!

Exercise #1: Simple Drawing