How to Create a Pixel Game UI in Adobe Photoshop

What You'll Be Creating

There's a lot you can do when creating a menu or one f the numerous interfaces that exist within a video game. In the case of this tutorial, we'll take the time to play with pixel art once again to make something RPG-inspired that harkens back to 16-bit menu screens.

1. Set Up Your Document and Background

Step 1

Pixel art is small. In the case of this design, we're not too worried with what this would fit into or how it would be displayed (in the case you're working on a specific game design, you'd work within those constraints, of course).
Open up Adobe Photoshop and create a New Document that measures 254 px by 117 px at 72 ppi. This will be the main working file we use throughout the tutorial.

Step 2

I chose to help set the tone of this design by starting with the background pattern first.
Create a New Document that's 10px by 10px at 72 ppi. I chose hues of green in mint and sage (#daf5d2, #8ca784, and #748f6c from lightest to darkest).
Using the Pencil Tool (B) with the default brush at 1px start in the center of the design with the lightest green. Draw a small box of four pixels with two pixels on each side (keep the corners open). Three pixels up starts the diagonal lines that extend 5 pixels, diagonally on each side of the small document. To finish up the minty green, place three pixels in each corner of the document. For the two shades of sage, fill up the space around each with diagonal stripes of color.
To make this design into a simple pattern, go to Edit > Define Pattern and give your pattern a new name. Go back to the document created in Step 1 and use the Paint Bucket Tool (G) to fill in the background layer of your UI with pattern selected instead of foreground in the tool's options. You can either save or delete the original pattern document made in this step.

2. Create the Leather Strap

Step 1

1. Create a New Layer (Control-N) and grab the Pencil Tool and draw a diagonal line of 20 single pixels and a perpendicular line of 11 pixels in brown (#6c0e04).
2. on either side of the short, perpendicular line, draw 3 additional pixels (see below for angle).
3. Skip two lines of diagonal pixels and draw another line of  9 pixels.
4. Skip another line of diagonal pixels and close the small diagonal rectangle (see below). Draw the other side of the leather strap with 20 additional diagonal pixels (arguably, you could draw this after the first part of this section).

Step 2

1. Complete the bottom of the strap with 7 pixels (going from left to right, diagonally).
2. At the top of the strap, skip a pixel on either side of the clasp and draw 3 pixels toward the right corner of the document and 1 pixel on either side going from left to right.
3. The diagonal line across the top of the clasp is 11 pixels across.
4. To finish the clasp, draw 1 pixel on either side and add another 11 pixels across in a perpendicular line.

Step 3

1. Finish the strap with two single pixel diagonal lines.
2. Either fill in sections of the strap with light brown (#bb5f15) with the Pencil Tool or do so with the Paint Bucket Tool.
3. Don't forget to fill in the center of the strap.
4. For the clasp, I used golden yellow (#fbc423).

Step 4

1. At this point I decided to create a New Layer for the sake of working on rendering the leather strap. Start with highlights using a lighter brown than your base color (#d67b1b) with diagonal lines made up of 2 or 3 pixels thick.
2. For shadows, line the sides of the strap with dark brown (#9b3f0e) as well as thin lines next to the clasp and throughout the strap (see below) diagonally, across the width of the strap.
3. Repeat on the other side of the strap.
4. Use dark brown on the center of the strap, lining the top and bottom edge of that section of pixels. For the gold clasp, draw diagonal lines of yellow ochre (#c27b17) on the top and bottom edge and cream (#f8dd92) staggered in the center section of the clasp. Merge (Control-E) the strap layers together (keeping it separate from the background layer).

3. Chain and Paper

Step 1

Let's start with the line art for the chain. It will connect the leather strap to the navigable menu.

1. Start with the top of the first link: 2 pixels in a line with 2 pixels going downward diagonally on two rows.
2. Connect the first row of diagonal pixels by 2 pixels and draw 3 pixels down in four columns skipping one or two lines of space (see below). Complete the shape (before we work on the next link) with 2 diagonal pixels on either side going inward toward the center of the shape.
3. The first link is essentially a small rectangle that's 3 pixels by 5 pixels with tow top right corner pixel removed and added to the bottom left corner.
4. From here, we're repeating the basic shape of the chain link created in the first two sections of this step with 4 pixels wide, a single diagonal pixel on either side, 3 pixels down, and 2 pixels downward diagonally that lead into the next chain link.
5. Repeat sections 3-4 of this step so there's 8 chain links in total (see below).

Step 2

1. Starting with the the shadow color (#c27b17), focus the color on the lower left of each of the circular chain links.
2. Then, fill in the middle portion of the design with golden yellow (#fbc423).
3. Finally, draw a few pixels in the upper right of each chain in creamy yellow (#f8dd92).  
4. For the paper the chain is connected to, you'll be drawing a rectangle that's missing the top corner pixels. The total size I used is 53 pixels by 36 pixels. I found it easiest to draw the rectangle on a New Layer, moving the chain to the upper center of the rectangle. The hole in the paper is 4 pixels by 5 pixels. 
5. The "fold" in the paper is 6 pixels upward and inward on the right. Delete corner pixels or unnecessary pixels with the Eraser Tool (E) set either to Pencil (default brush at 1px) or Block (Zoom (Z) in in order to erase one or a few pixels at a time).

Step 3

1. Merge the chain layer onto the paper layer. Use the Paint Bucket Tool (G) to fill the paper in with light cream (#fefbd8).
2. For the lines of shadow on the paper, use the Pencil Tool again and a darker cream color (#f8de93).
3. Place the chain underneath the leather strap in the Layers panel. The chain is meant to hang off of the strap's clasp.

4. Menu Elements

Step 1

The cartoony glove cursor appears twice within the design. Create a New Layer and let's draw a hand.

1. Start with the Pencil Tool, brown (#6c0e04) as the foreground color, and 7 pixels down.
2. The top line is 13 pixels across, the bottom line is 11 pixels across, and the vertical line denoting the glove's cuff is 7 pixels down.
3. For the pointing finger, add 2 pixels down from the end of the top line and 4 pixels to the left. In the center of the finger shape just created, draw 3 additional pixels down to close shape.
4. Add 3 pixels to define two more fingers within the glove (see below).
5. For the thumb, draw a small rectangle 5 pixels from the left that's 2 pixels by 5 pixels with the corner pixels deleted.
6. Finally, the shadow underneath the hand is the same brown color reduced to 50% Opacity. Fill the hand and cuff in with white using the Paint Bucket Tool.

Step 2

Place the hand over your chosen menu selection. Whatever your glove points to on this menu will correlate directly with the second menu. Keep the hand on a separate later for now, as we'll need a copy of it later.
Use the Type Tool (T) to write out the text using Small Fonts Regular, or another tiny pixel-friendly font, at 10pt size. Each word was a separate text layer. Check out their alignment below.

Step 3

Copy (Control-C) and Paste (Control-V) the paper and one half of the chain using the Rectangular Marquee Tool (M). Elongate the center of the paper either by redrawing it or Copying and Pasting portions of the already-drawn paper in order to fill in the space. The second menu is essentially double the size of the first menu.

5. Draw the Red Heart

Step 1

1. For the heart, create a New Layer and start on the let side of the heart with 4 pixels across, in brown.
2. Draw a small V shape made up of 3 pixels in the center and 4 pixels across again to complete the very top of the heart.
3. Next comes 2 pixels diagonally on either side, going out and down.
4. Add 5 pixels on either side going down for the sides of the heart.
5. Draw 6 diagonal pixels angled toward the center of the heart.
6. Complete the heart with 3 pixels across on the bottom of the shape.
7. Start filling the heart in with dark red (#bb0708) in the inner corners of the top of the shape.
8. Continue lining the heart along the right side and bottom.

Step 2

1. Fill the heart in with bright red (#fa0000) and line the heart with a second layer of medium red (#e10507) (between bright red and dark red from the previous step).
2. Start the highlights with light red (#fa6964) on the left side of the heart.
3. Draw small circles in light red moving toward the left.
4. Using white, add a couple hot spot pixels in the center (or close to it) of the highlight shapes (see below).

6. Draw the Treasure Chest

Step 1

The treasure chest is a modified rectangle (it has a rounded top). Once again, create a New Layer.

1. For the left side of the chest, draw a vertical line with the Pencil Tool consisting of 17 pixels. The top starts with 2 pixels across, followed by 3 pixels on the next line up, 19 pixels on the next line up, 3 pixels on the next line down, and 2 pixels on the next line down.
2. Complete the right side with 17 pixels in a vertical line, going downward. Skip the corner pixels and connect to two sides with 30 pixels across. For the center split, draw 30 pixels across on the row that's 8 pixels down from the top of the side lines.
3. In the center of the chest's split, draw the top of the chest's lock with 4 pixels across and 4 pixels down, meeting at their diagonals. For the start of the center of the lock, Erase 1 pixel on either side of the center two.
4. Starting to add color, fill the lock in with golden yellow (#953608). While you're at it, draw 3 columns of yellow on either side of the chest 3 pixels in from the left and right respectively. Use brown (#bb5f15) to line the bottom of the split in the chest, skipping yellow pixels along the way.
5. Stagger yellow (#fbf348) pixels in the center of the gold stripes on the bottom half of the chest.
6. Line the bottom of the chest with the same brown used previously. Complete the chest's lock with 4 golden yellow pixels on the bottom of the lock shape and 6 brown pixels below those.

 

Step 2

1. Fill in the center and the top of the chest with light brown (#fbc423) using the Paint Bucket Tool.
2. Fill in the sides of the chest with the same light brown.
3. Draw another line of brown pixels beneath the split in the chest as well as in the corners of the top edge.
4. Draw medium brown (#a84913) vertical lines from the top to the center of the chest. Line the center of the bottom of the chest with medium brown lines of pixels too (note both arrows and the pixels they are pointing to for placement).
5. Using a much lighter brown than before (#fdaa74), Draw a horizontal line along the top of the chest, skipping medium brown pixels. Stagger light brown pixels through the next line (see below).
6. Add a couple yellow pixels to the chest's lock as a final touch. 

7. Draw the Axe

Step 1

Create a New Layer and let's get drawing the ax.

1. Draw 3 pixels across in medium gray (#5c5c5c).
2. The curve of the left side of the ax is 5 pixels down, followed by 2 pixels down, then 2 pixels across, and 5 pixels across. A lot of the lines and shapes within this icon are mirrored, so it's full of repetition.
3. Using gray (#afafaf), draw an upside down L-shape consisting of 3 pixels across and 5 pixels down starting at the center of the top line. With dark gray (#333333), we get a bit fancy in the shape, but it's   1 pixel diagonally and to the right of the bottom line, 2 pixels to the left, 2 more pixels up, and 1 pixel to the right diagonally.
4. Starting from the corner of the gray L-shape, draw a diagonal line of 4 pixels. Connect the dark gray pixels to the gray shape with 3 pixels across and 1 pixel diagonally.
5. Using medium gray, place 1 pixel on the diagonal of the two topmost and rightmost pixels (see below for exact placement). Continue on with light gray adding 1 pixel to the right of the gray one and 2 down diagonally.
6. Fill in the rest of the design with an even lighter gray (#d7d7d7).
7. For the start of the ax's handle, draw two diagonal lines of 7 pixels in brown (#6c0e04). Use white to add some highlights to the left side of the ax's blade.
8. Continue the diagonal handle in light brown (#93360b) and end it with a 90° angle.

Step 2

1. Fill in the center of the handle with medium brown (#993511).
2. Fill in the rest of the handle with an even lighter brown (#bb5f16). Let's work on the right side of the ax. Directly across from the left side, draw 3 pixels up, 5 pixels across, 2 pixels across (on the level below the last), 2 pixels down, and 5 pixels down all in gray. With dark gray, close the shape with 1 pixel on the diagonal of the last lien drawn, two pixels up, and add 2 more pixels across to the left. Mirror the two dark gray pixels that meet the center handle (see below for exact placement).
3. With light gray, start at the top dark gray pixel going 3 pixels up, 5 pixels across, 1 pixel diagonally, and 3 pixels down. Then, draw a diagonal line of 4 pixels in the center of the ax followed by placing 3 pixels of light gray along the handle side (see below).
4. Fill in the rest of the ax with lighter gray (hex code in the previous step) and use white for highlights.
5. For the top of the axe, use an assortment of gold, brown, and yellow pixels (same colors used for the treasure chest).
6. Repeat on the bottom (in more of a closed shape than what is at the top) with assorted grays used in the ax blade.

8. Draw the Gold Coin

Step 1

Our final icon for the second menu is the gold coin. Once again, create a New Layer and get your Pencil Tool ready.

1. Draw 7 pixels across for the top edge of the coin.
2. On either side of the top line, you'll go 2 pixels across, 1 pixel diagonally (outward), and 2 pixels down.
3. The sides are 6 pixels down in this design and the bottom is a repeat of the top half of pixels (I found it easiest to just Copy, Paste, and Flip Vertically, then Merge the coin's lineart layers).
4. In the corners of the circle's curve, place pixels in yellow ochre (#bb6403).
5. Continue using yellow ochre in creating a smaller circle in the center of the coin. Each side consists of 5 pixels in the center and 2 pixels on either side. Repeat around to close the smaller circle.
6. In the bottom half of the smaller circle, place dark ochre (#974000) pixels in the corners of each line (see below for exact placement).
7. Start filling in the coin by using gold (#ffaa1b) in the bottom half and a small line of 3 pixels in the lower center of the design.

Step 2

1. In the center of the coin is a capital letter G. Working off of the 3 pixels drawn in the previous step, continue with yellow ochre, dark ochre, and brown. See below for exact placement of each color. The shape consists of 4 vertical pixels, 2 pixels on either side, 5 pixels across forming the bottom edge, and 2 pixels up.
2. For the top edge of the G, draw 4 pixels across and 1 pixel on the diagonal.
3. Complete the G with 3 pixels across the arm of the letter. Fill the second line between the G with golden yellow pixels.
4. Fill the center of the coin, covering the rest of the G with a lighter golden yellow (#f9c325).
5. Using the same lighter golden yellow and a bright yellow (#ffef51), work to fill in the top of the coin.
6. Use cream (#fff7b6) for highlights in the top right of the coin design to complete it.

Step 3

Place your completed icons in a line in the center of the second menu. Copy and Paste the hand icon and make sure it's pointing at the icon corresponding with the first menu (in this case "item" corresponds with the treasure chest).

8. Inventory Level Gauges

Step 1

Each gauge starts with the same frame design. Create a New Layer and complete the following:

1. Draw a long rectangle with the Pencil Tool in the same brown used for the other lineart elements and covering most of the rest of the UI's space. Keep it rounded by deleting the corner pixels.
2. Draw small pixel boxes of 2 by 2 golden yellow pixels in each corner of the large rectangle.
3. Place a single yellow pixel in each corner. Use brown to draw a smaller rectangle, leaving a line 1 pixel wide on every side.
4. Fill the center of the smaller rectangle with light cream (#fffcd3) using the Paint Bucket Tool.
5. Fill in the frame with light brown (#c45d12).
6. Use medium brown (#9e3e14) to add 2 pixels on either side of each corner of the frame design. Line the bottom of the inside of the frame with a tan color (#cfa984).
7. Using the same medium brown, add a pixel or two every 5-8 pixels around the frame.

Step 2

Copy and Paste the frame design 3 times. Choose an arbitrary level for each gauge and fill in with each item's corresponding color:

• Red (#fe0211) for the heart.
• Brown (#d47d1e) for the treasure chest.
• Gray (#b1b1b1) for the axe.
• Gold (#ffc643) for the coin.

Advertisement

Step 3

Each level gauge gets a line or two of pixels in a highlight color and in a shadow color. Use the following for each one:

• Red Highlight: #ff6563; Red Shadow: #bd0704
• Brown Highlight: #f4912c; Brown Shadow: #f4912c
• Gray Highlight: #dee4e0; Gray Shadow: #5c5a5d
• Gold Highlight: #ffe33a; Gold Shadow: #d87e06

Well Done, You!

It's over! Unhide the background layer in the Layers panel and line up the level gauges in the manner seen below. Push your pixel art design further by creating a mock-up of the game this UI comes from, changing the amount of information displayed, or choosing your own color scheme for the overall piece. Show us your version, either faithful to this tutorial's design or your own spin on the concept, in the comment section below!
For more pixel art tutorials, check out the following:

• Create an Isometric Pixel Art Character in Adobe Photoshop
• What's the Deal With Pixel Art?
• Kandi Runner: Create a Pixel Art Sprite from Scratch