A World of Colors
The Fun and Fancy Free Art of Pixels
Lessons from Grandmothers
Poking the Gravid Chicken
The Fun and Fancy Free Art of PixelsBehind the Art
by Annie Rodrigue
For November, I decided to go with a type of art that I personally find absolutely adorable and whimsical: Pixel Art. Unfortunately for this digital medium, it is not always welcomed. Some don't always see it has original art, especially with the pixel doll movement, but I am sure I can change some opinions of it with this tutorial. Pixel art is a lot harder than it seems and I have to honestly admit that I find pixel artists some of the most patient artists out there!
This media is not exactly new. It was among the first digital art there was. Most of our older games -- on the first Nintendo and SNES console, most portable consoles, and even computers – were created using pixel art. Even more recent games on cell phones use pixel art. The art can easily be explained: simply put, you have to draw your idea pixel by pixel with the most basic of brushes. Yes, you have to draw, but also shade by drawing all those pixels "by hand." Because most pixel art is saved in .gif format and also because an artist has to stick to a certain number of colors if he or she is to do pixel art for a game, the artist must work with a very limited color palette (no more than 256 colors), so working with an airbrush tool is pretty much impossible.
How to Create Pixel Art in Photoshop
You will need only 4 simple tools to do your pixel drawing from start to finish: the pencil tool, the eraser tool, the bucket tool and the magic wand. The pencil tool doesn't have any anti-aliasing, so your line will remain very crisp. A note: the pencil tool is available through the same button as the brush tool. Simply click and hold until the new available tools pop up.
Pixel Art is small. Lines are one pixel in width, so you need to make sure that your pencil is set to 1 when you start tracing your line. You can make the tool larger when you start shading your character.
The last thing that I suggest before starting the actual pixel work is preparing your workspace. You may work with the same project open in more than one window, and I recommend it, so you have an idea of what your pixel art will look like at a 1:1 scale. You can zoom in on the image in one window to color or shade, and see the result in the other window.
To create a new window of the current project, select Windows > Reorganise > New Window for [name of your project].psd.
You are now ready to start drawing!
Coming Up With an Idea on Paper and Change it to Pixel Art
As you can see here, I came up with a very simple portrait that I sketched quickly through Photoshop, but you can also scan a sketch that is on paper. Anything will do. Make sure to resize the sketch right away to a web friendly size before you start doing the pixel art. You will not be able to resize your pixel art once it is done without losing the crisp colors and clear lines.
Once your sketch is ready, create a new layer for the line art. Double check that you have selected the pencil tool and that it is at 1 pixel. If it isn't so already, change your color to black. Now you can start retracing your work. Once you are done it should look something like this:
When your line art is finished, you can safely delete the sketch layer, or just hide it.
The next step will be to do the flat coloring, which means we will lay down the base color for each element in the drawing, without any shading. Create a new layer for color. You can either create just one layer where you will put all the colors in, or create a new layer for each new color.
To lay actual colors down, you can either paint them yourself with the pencil tool or you can use the select tool. I go to the line art layer, select the empty space I wish to color (for example, the skin), go back to my color layer and then do ALT+BACKSPACE. This shortcut will use the current color and fill the selection. CTRL+BACKSPACE also works, but this shortcut uses the paper color to fill the selection.
Once all the flat colors are done, it should look something like this:
Now for the shading. Remember that pixel art is limited to a certain amount of colors, so while you can do some very nice shading, you have to keep in mind that the whole should have no more than 256 colors. You will shade using the pencil tool, but this time, you can change the brush size. Simple work, like you would do on a normal CG painting. Create a new layer for the shading. Select the color you wish the shade, change the color and start coloring!
Once I was done with the shading, my portrait turned out like this:
You can see that I tried to create a little glow with the moon on her forehead, but it doesn't work too well right now because of the black line. We will fix this with our next step. We will color the line.
Coloring the line is very easy. You will first need to lock the transparent pixels around the line, by clicking the following icon while the line art layer is selected. You will see a little lock appear on that particular layer.
You can now color the line without having to worry if you are painting inside or out. For the moon to glow, I decided to use a lighter color than the moon itself for the line. For the rest of the image, I used darker shades of those colors for the lines to still pop, but not as much as the black lines.
This is the final result:
One quick note: pixel art is usually saved in .gif. This format allows for transparent pixels, so it can create interesting icons on a website or such. Again, remember that this format is limited to 256 colors (and the transparency is considered a color).
Pixel Art is a fun medium that's available to anyone with a computer. While this tutorial was all done using Photoshop, it is possible to use other cheaper programs to achieve the same result. With a little bit of practice and a little bit (or lots) of patience, anyone can come up with nice icons or character using this technique.
Next month, we will do something a little less serious: we will use our art to make nice bookmarks, a great gift for the Christmas season!!
All graphics on these pages are under copyright. Webpage design copyrighted by Ellen Million Graphics. All content copyrighted by the creating artist. If you find anything which is not working properly, please let me know!
EMG powered by: a few minions and lots of enchanted search frogs