Create 8-Bit Pixel Art with Photoshop (Part 1

of 3)

Get  Notifications
Create 8-Bit Pixel Art with Photoshop for a
Game (Part 1 of 3)
by Alexandria O’Brien

In this tutorial I’ll go through how to create a few different game sprites in Photoshop
CC/CS6 using that retro, 8-bit pixel look. The game items and characters that I illustrate will
be based on my favorite game genre: fantasy, adventure.

Note: If you need to see a larger version of any of the images, just right-click and view the
image in a different tab.
Setting Up Photoshop To Make Pixel Art
Source: Pixel Art – Photoshop Tutorial ( http://youtu.be/hFZBUWHVSrM)
1. Make a new square document anywhere from 20 to 100 pixels (depending on how large
you want your sprite to be). I’m going to work with a 50 px canvas.

Width: 50 pixels

Get  Notifications
Height: 50 pixels
Resolution: 72 Pixels/Inch
Color Mode: RGB (8-bit)
Background Contents: Transparent

— Figure 1: New 50×50 pixel file in

Photoshop

— Figure 2: New 50×50 blank canvas in Photoshop

2. Get your tools ready: select the pencil tool (under the brush tool dropdown menu) and
set the size of the brush to 1 pixel. Select the eraser tool and change that to be 1 pixel in
size, and the mode to be “pencil.”

Get  Notifications
— Figure 3: The Pencil
Tool is under the
Brush Tool drop-
down menu
— Figure 4: Change the
pencil tool size to
one pixel

— Figure 5: The eraser tool set to 1 pixel in “pencil” mode.

3. To help show where the pixels are on the canvas, we’ll turn on the grid view. Adjust the
grid view setting under Edit>Preferences>Guides, Grid & Slices. Change the grid to show
every 1 pixel (with 1 subdivision). Click OK and then turn the grid on so you can see it. Go to
View>Show>Grid.

— Figure 7: Change the grid

to show every 1 pixel
 — Figure 6: — Figure 8:
Adjust the Turn on the
grid grid
preferences

Get  Notifications
4. One more change–go back under Preferences>General and change “Image
Interpolation” to Nearest Neighbor (preserve hard edges).

— Figure 9: Change Image Interpolation to Nearest Neighbor

Now you’re all set to start making pixel art!

Make a Character

Every good fantasy adventure game has a hero. We’re going to start by making a single
character sprite.
1. We’ll start with the 50 by 50 pixel file we set up. Since we made the file with a transparent
background, I’m going to add a Solid Color background layer so we can see the grid
without seeing Photoshop’s transparency pattern too.

At the bottom of the layers window, click on the icon that looks like a half-filled circle. Select
the “Solid Color…” option and choose a neutral color for the new Color Fill layer to be.

2. Add a new, transparent layer overtop that Color Fill layer.

Get  Notifications
Go to Layer>New>Layer or just use the icon shortcut at the
bottom of the layers menu shaped like a folded page. 

3. Let’s make the body of our character. Start by selecting a

base skin color. I’m going to use #f2cb9f.

— Figure 10: The

shortcut to add a
new solid color layer
is at the bottom of
the layers menu
— Figure 11: Selecting a base skin
color

4. Use the Pencil Tool to draw the body. I’m going to make my body as simple as possible
and then tweak at the end to really shape the character the way I want him to look. We’ll
add more details once we have the base shape down.

Tip: Add an additional layer for each new aspect in case you want to go back and edit
anything.

Tip: If you want to make a straight line, click once where you want the line to start and then,
while holding the Shift Key, click a second time where you want the line to end. Photoshop
will automatically create a straight line between those two points.

Make the body shape however you want. Here’s how I made my body shape:

1) Click once on the canvas with a 15px pencil for the head circle. ●
 2) Make the chest a triangle (pointed down) and connect it with the neck (use 3 pixel
thick pencil). ▼

3) Make the torso with another triangle (pointed up) at the bottom-side tip of the
chest triangle. ▲
4) The legs come straight down from torso triangle base.

5) Make a “dot” where the end of the arm will be. I made one arm up and one arm

Get  Notifications
down by his side. Hold shift and click on the shoulder to connect the end of the arm
to the body.

6) Add a little more volume to the end of the arms for the hands and more to the
ends of the legs for feet.

7) At this point, add or erase as desired to tweak the body shape. I added a bit more
bulk to the legs, added a few pixels to make the neck and body thicker, and
rounded the shoulders a little.

— Figure 12: The body

being drawing on the
canvas, starting with
the head

5. Now we’ll add the clothes, hair and face. Use the body base shape as a template for how
the clothes should be, and get creative! I’m going to add six new layers for a shirt, pants,
shoes, hair, face, and details.
 Get  Notifications
— Figure 13: The
Character details
being added to the
body, starting with
the shirt

— Figure 14: I have 1 color fill layer,

1 body layer and 6 detail layers

6. If you haven’t already, make sure to SAVE your Photoshop file as you progress.

7. At this point, our pixel buddy could be called finished, but I’d like to add a bit more depth
with shadows and highlights.

Extra Step, Add Shading:

Start by making a merged copy of all the layers together. Do this by turning off the visibility
of the Color Fill layer (click the eye icons to the left of the layer thumbnail) then press
Command-Option-Shift-E (Mac) or Ctrl-Alt-Shift-E (PC). This will automatically make a copy of
all visible layers into one layer placed at the top of your layers list.

From here, I suggest putting your individual layers in a folder and turning off the visibility to
keep everything organized. To quickly group the layers, Select-Click all of them then press
Control/Option -G.

Get  Notifications
— Figure 16: The unused
layers are grouped in a
folder. I also turned the
— Figure 15:
Color Fill layer back on
Press
Command-
Option-Shift-E
(Mac) or Ctrl-
Alt-Shift-E
(PC) to make a
merged copy

8. Add a new layer and change the Blending Mode. (The

Blending Mode can be accessed by the drop down option at
the top of the layer’s menu, to the left of the Opacity option.
By default it says “Normal”.) 
 I’m going to choose the Blending Mode: Soft Light because
that seems to work well to darken the colors I used on my
character. With this new layer selected (I’ll call the layer
“Shading”), Alt-Click the layer below it (The layer with the
merged character) to make a mask. This way, whatever you
draw on the “Shading” layer will stay inside the mask of the
“Character” layer.

Get  Notifications
9. Color on the “Shading” layer with a black pencil. With the
Blend Mode changed, the color black will darken the color
below it. So, the red in his shirt becomes dark red, the green
of his hair becomes dark green, and so on.

Tip: If the shading is too harsh for you, just change the
Blending Mood or Opacity of the layer. If you want to add
more variations of shaded colors, keep adding new
“Shading” layers with varied opacities.

I ended up adding two shading layers—the first one at 25%

opacity and the second at 45% opacity.

— Figure 17: The Soft

Light blending
mode drop-down
menu
 Get  Notifications
— Figure 18: Adding more depth to the character with extra shading
layers

10. If you want add some highlights, add a new “Highlighting” layer exactly like the
“Shading” layer, except make the blending mode Overlay and use a white pencil.

11. Once you’re satisfied with your 8-Bit Character creation, it’s time to save the final PNG
sprite file. But first we should trim the canvas so it’s snug against the image and there’s no
excess space. This will ultimately save on file size so it’s optimal for any game. Turn off the
Solid Color Layer visibility and then go to Image>Trim and change the “Based On” setting to
Transparent Pixels. Click OK.
 Get  Notifications
— Figure 19: Trim the canvas
around the image

12. Go to File>Save As… >Save as type: PNG

And here he is! The final 30 by 45 px PNG in all his tiny glory->   He’s the perfect size to
save the day on any mobile device where small graphics are preferred.

If you want the image to be larger simply go to Image>Image Size> and change the
“Resample” to Nearest Neighbor (hard edges).

— Figure 20: Change the resample

option when you resize to keep
 that pixel look

Get  Notifications
To summarize:

Start by changing a few settings in Photoshop so you can easily create pixel art. Do this by
changing Preferences, “Image Interpolation” to Nearest Neighbor and the Guides, Grid &
Slices to show every 1 pixel. Instead of using the default brush and eraser tools, use the
pencil and set eraser to pencil mode.

Choose your base color with the Color Picker menu and then draw a base shape. As you
add more details, add more layers to keep them organized and separated in case you want
to go back and edit anything. As an extra step, create a merged copy of all your layers
using Command-Option-Shift-E (Mac) or Ctrl-Alt-Shift-E (PC). Add shading and highlights on
additional layers with alternative blending modes and/or opacities. Finally, make sure to trim
the sprite canvas down to its smallest size and save as a PNG.

In the next part of this tutorial, I’ll go over creating some other graphical assets of any good
fantasy adventure game: an enemy , a weapon, and a health item.
Create 8-Bit Pixel Art with Photoshop (Part
2 of 3)

Create 8-Bit Pixel Art with Photoshop for a

Game (Part 2 of 3)
In part one, we went over setting up Photoshop CS6/CC to make pixel art and then created
a tiny 8-bit character sprite. In this part of the tutorial I’ll go over creating an enemy, a
weapon, and a health item. All using that retro, 8-bit pixel look.

Note: If you need to see a larger version of any of the images, just right-click and view the
image in a different tab.

Make an Enemy Monster

Using the same setup as we did for the main character graphic (as outlined in part 1) and
mostly the same techniques, I’m going to create a rat monster.
1. I’ll start with a 50 by 50 pixel canvas. And with the grid turned on, I’ll add a neutral Color
Fill layer and start from there.

— Figure 1: A 50x50px blank canvas to create my pixel art on

2. I’m going to start with a brown base color and create the body of this rat enemy. (Don’t
forget to use the pencil tool instead of the brush tool.)

— Figure 2: Using a base color to

create the body shape.
 

How I made my rat body:

1)      Click once with a 10 pixel pencil for the head.

2)      The body is a peanut shape extending from the head at an angle

3. From here I’ll add my details. I added some standard rat-like body parts: a long snout,
ears, hands, fingers, legs, toes, and a tail. To really highlight the fact that this rat is a
monster-type enemy, I also added monster-like details: red eyes and black nails.

— Figure 3: Creating an 8-bit rat, starting with

the head

4. I decided that a brown rat just wasn’t “monster” enough, so after I made a merged copy
of all my layers, I added an adjustment layer (Layer>New Adjustment Layer>Hue/Saturation)
to change the overall color scheme to be green. Voilà, he’s now a Mutant-Poison-Rat
enemy.

— Figure 4: Adding a Hue Adjustment layer to change the overall color

scheme

5. Next, I’m going to add some shading and highlights like I did with the main character. I
made some new layers and, using the blending modes Soft Light and Overlay, I added
some more depth. (I also added his red eyes back in. Aren’t layers great?)

 
 — Figure 5: Added additional layers for depth (and red eyes)

6. He’s all ready to go, so just trim the image down and save the file as a PNG.

Again, if you want to save the image larger than 50 by 50 pixels, just change the Image Size
Resample option to Nearest Neighbor.
 

Make an Game Weapon

Every good game character needs something special to defend themselves against the
many evils in the world (especially Mutant-Poison-Rats!). Let’s skip the typical beginner’s
“wooden stick” weapon and get right down to the good stuff: a golden sword.

1. Make a new canvas as we did before. (Or just delete all the layers from the previous
project (except the Color Fill) and save it under a new file name.)
2. I’m using a yellow color (#fff200) for the base shape of this golden sword. For the blade
of the sword, I hold down the shift key and make a straight line—7 pixels wide—using the
pencil tool. I used grey for the hilt: just a straight horizontal line at the base of the blade.

Tip: Keep in mind that it’s a good idea to make a new layer for every additional aspect of
your design, just in case you want to change anything later.

— Figure 6: Drawing the sword base shape

 
3.  Now for the details of the sword: I want the blade to look metallic, so I’m going to add a
lighter yellow to one side. To get the right color I used the Eyedropper Tool to select the
base color yellow and increased the saturation in the Color Picker window.

— Figure 7: The
short cut for the
Eyedropper Tool
is (I)

— Figure 8: Change the saturation on the base

yellow to get the right light yellow for the melt
shine

4. As a final touch, I’m going to add some bling to the hilt of the sword: rubies. I’ll choose a
deep red for the base color and a lighter version of that color for the shine.

 
 — Figure 9: I changed the brightness of the ruby’s base color to get the right color for
the shine

5. Now I’ll add just a little more depth with additional shading and highlighting layers. As we
did before, to add some shading, I made a new layer with a blending mode of Soft Light and
drew in black. The Soft Light blending mode, however, doesn’t really show up with the
yellows of the blade because those colors are already so light. I still wanted to add a little
shading to the blade, so instead of using a blending mode, I hand-picked a darker color
(like I did for the shine of the blade).

 
 — Figure 10: Since the blending mode Soft Light doesn’t work on the
yellow, I choose the color myself

6. To finish up, trim the image and save it as a PNG. 

 
 — Figure 11: An 8-bit Golden Sword

Make an Item
From “med-packs” to “health pots”, the idea of an item that can heal your character instantly
is pretty popular for any game. Here’s how to make a health potion.

1. I can say with confidence that most games make their health items predominantly red, so
we’re going to start with a red (#9e0b0f) base color. This item will be the shape of a round
potion bottle with a thin neck opening and a cork stopper, so we’ll start with a 10 pixel dot
for the body.
2. The neck of the bottle will be 4 pixels wide extending up from the body.
3. The cork will be a brown color. It is 2 pixels above the top of the neck.
4. To make it seem like there is liquid inside the bottle, I added a slightly darker version of
the base red (#5c0b0f) to the body half of the bottle, making sure that I only colored inside
the body. I left some of the original base color to outline the darker colored area.
5. Next, to make the bottle look like glass, we’ll add a shine spot with a light red diagonal
line to one side of the body. Using the Color Picker, I choose a bright red (#ff0b0f).
 

— Figure 12: Choosing alternative colors based on the original red

 
 — Figure 13: Creating an 8-bit Potion

6. Add smidge of shading and it’s good to go.

Want to make a different kind of potion? Just add a new Hue/Saturation layer and change it
up a bit like we did with the green rat. You can save as many different colors of potion as
you want. (To keep the cork the same color, I just added that layer back on top of the
hue/saturation layer.)

— Figure 14: Arranging the

layers: the shading layer,
the cork color layer, the
Hue/Saturation layer all
masked over the merged
copy of the health potion

Here are my different colorations. Now I have:

Mana Potion: 
 Anti-Poison Potion: 
Strength Potion: 
XP Potion: 

…and anything else I can think of! As long as the item is labeled in the game, you can make
any color any type of potion you want.

And there you have it: three common game assets created using Photoshop, designed to
look 8-bit and retro. To summarize, start by choosing your base color and then draw a base
shape. As you add more details, add more layers to keep them organized and separated in
case you want to go back and edit anything. Use the Color Picker to hand-select variations
of your base color for a specific detail, like shine. As an extra step, use additional layers with
alternative blending modes and/or opacities to add shading and highlights on top of a
merged copy of all your layers. Make sure to trim the image’s canvas down to its smallest
size and save it as a PNG.

In the third and final part of this tutorial, I’ll go over arranging these individual game assets
into sprite sheets.

Go back to part 1: Create 8-Bit Pixel Art with Photoshop (Part 1 of 3)

Go forward to part 3: Create 8-Bit Pixel Art with Photoshop (Part 3 of 3)

By Alexandria O’Brien
Create 8-Bit Pixel Art with Photoshop (Part
3 of 3)

Create 8-Bit Pixel Art with Photoshop for a

Game (Part 3 of 3)
 

In this final installment of Creating 8-bit Pixel Art with Photoshop, I’ll go over putting your
sprites into a sprite sheet—a single canvas that holds many sprite frames.

One option would be to manually arrange the individual sprite images within Photoshop
onto a larger canvas together. The trick is to know the size of each sprite frame and where
it will be relative to the entire canvas in terms of coordinates. If, for example, we wanted to
put each of our colored potion images onto a sprite sheet…
1. First, find out what the individual sprite image size is. Each of my potion images are 10 by
16 pixels.

— Figure 1: Checking the dimensions of a single sprite image

2. Next, calculate the size that the entire sprite sheet would need to be based on the size of
one sprite image and the number of images that will be on that sheet. I have five different
potion sprites at 10×16 each, so my canvas will be 16 pixels high and 50 pixels wide. This
way, all the sprites will line up together horizontally.

 
 — Figure 2: Making a new canvas for the sprite sheet

3. Go to File> Place Embedded… to insert each sprite into the canvas.

— Figure 3: Use the Place Embedded… to insert each sprite onto the canvas
 

4. Arrange each sprite so they are side by side. Make sure you have the Snapping and
Smart Guides turned on, as this will help align the images more easily.

— Figure 4: The Snap

function is under the View
tab at the top. Set Snap To
> “All”

 
 — Figure 5: The Smart Guides are turned on under View>Show>Smart
Guides

5. From here the sprite sheet is ready to be saved as a PNG. 

This method, however, is limiting and time consuming, especially if you are working with a
large number of game assets. The best solution would be to use another program. There
are several free sprite sheet generators on the web that can make this process much faster.
Stitches by Matthew Cobbs, for example, lets you upload your individual images and then
download the composed sprite sheet PNG plus the CSS and HTML code. It’s a little limiting
when it comes to being able to arrange each sprite exactly how you want, but as long as
you named the images accordingly, they should line up in an understandable manner. (I
tend to name similar items with the same title word first, then a descriptor and/or number
like “Potion_01_Mana”, “Potion_02_Health”, “Potion_03_Anti-Poison”, etc.)

 
 — Figure 6: Stitches, an HTML5 sprite sheet generator
(http://draeton.github.io/stitches/)

— Figure 7: Here I uploaded the all the sprites and Stitches arranged them
automatically. I even added a little padding between each sprite

Here is the downloaded PNG from Stitches:

From here you can reference a single sprite sheet in your game code and access all the
individual sprite images on that sheet. Sprite sheets could hold any piece of game art you
need, including animated loops (frames which, when played in sequence, will create an
animation that can seamlessly loop from the last frame to the first frame without a break).

Ready to put these sprites into action? Learn more about how to take a sequence of sprites
and utilize them in your game code with Mark Lassoff’s tutorial Animate a Video Game
Character at http://learntoprogram.wpengine.com/animate-video-game-character/

Tutorial by Alexandria O’Brien