Tips for Web Designers, Developers, and Bloggers

In this tutorial, I’ll show you how to turn  your fingers (with the help of Photoshop) into a pixel art beast.

STEP 1: Getting Started

First, there are a few tools that you’ll need in Photoshop. Basically, you’ll need the Pencil tool and eraser. For the pencil tool, right-click “Brushes” and then select “Pencil Tool.” Now, the eraser is just 2 buttons down. Then, you’ll need the rectangular marquee tool, magic wand, the eyedropper tool, and the zoom tool (which I’m pretty sure common sense will lead you to the right tool). If you hover over them, you’ll usually get some hint. Here are screenshots anyways:


Step 2: Lines

Lines are one of those things essential to pixel art. Here’s a basic line:

Basic Line

Now, there are times where you’d want to make a curve. Here’s a simple curve:

Simple Curve

Because you can’t really see how many pixels it has every grid line down (courtesy of me forgetting the grid), I have it all explained:

At first, the line just comes at you. Next, as it goes down, you go to 3 pixels. Go down one more and you go to 2 pixels. Then, it continues (diagonally) one 1 pixel. Then, it starts the process over again in vertical. Read all that over again a few (40-50) times, or view this demo:

Basic Curve: Explained

Step 3: Color

Now, there’s the subject of color. In pixel art, you’ll want to reuse as many colors as you can. In other words, you should use a palette. In Photoshop, just make your own swatch. Put the colors you want and like (adore). This is what you want for various shades of the color:

  1. Dark. This will be used for the outline of whatever you are drawing.
  2. Light. This will color the character inside.
  3. Even Lighter. This will be for light. This color should show where the light source is.
  4. Darker than Light, but not darker than Dark. This will be used for shading. Sorry if you can’t remember the long name.

There, you can make your swatch ready!! Just click on this link and then be whisked away to learning how to use your current knowledge! (Pixel Joint, I recommend an account — even if I don’t have one…)


Comments on: "Pixel Art in Photoshop" (1)

  1. That’s an amazing post. Thanks a lot

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: