In the Fundamentals section, we learned about the three basic 2D forms: the circle, the square/rectangle, and the triangle. Now it’s time to put that knowledge into practice.
We’re going to create a simple character face using only these shapes. The result will be a clean, stylized character perfect for 2D games. Let’s begin!
Prerequisites
Before you start, make sure you have:
- Adobe Photoshop (any recent version)
- Understanding of Basic Forms
- 30 minutes of focused time
Step 1: Draw a Circle
Start by opening a new file in Photoshop. The file size should be twice as big as the desired in-game graphic—my picture size will be 256 × 256 pixels.
Leave the background white and add a new layer on top of the background. Draw a circle in the middle of the picture using the Ellipse tool. While drawing, hold Shift to create a perfect circle.
This circle will become the head of your character. Remember: the circle is one of our basic forms and represents wholeness and approachability.
Step 2: Eyes Are Circles
Add another smaller dot in the same color, and an even smaller white one on a new layer.
Change the color to black and add the iris. Then change the color to white and add a highlight.
The key here is layering: every element should be on its own layer so you can adjust it later. The highlight gives the eye life and makes your character feel more alive.
Step 3: Group and Duplicate
Group all the layers from the previous step. This keeps your project organized and makes it easy to manipulate the eye as a single unit.
Duplicate the group and use the Transform tool (Ctrl/Cmd + T) to mirror and position it on the other side of the face.
Pro tip: Hold Shift while transforming to maintain proportions, and use guides to ensure both eyes are symmetrically placed.
Step 4: Draw a Triangle Nose
Draw a white triangle in the center of the big circle using the Polygon tool. To draw a triangle, you need to adjust the Polygon tool to draw 3 sides in the top menu.
Use a new layer for the nose. Position it between and slightly below the eyes.
The triangle adds a sense of direction to your character’s face. Point it downward to create a natural nose shape.
Step 5: Draw a Triangle Mouth
Draw another triangle with the Polygon tool and adjust it with the Transform tool to look mouth-like.
You can rotate and scale the triangle to create different expressions. A triangle pointing down creates a frown, while pointing up suggests a smile or open mouth.
Experiment with the shape to give your character personality!
Step 6: Draw Rectangle Eyebrows
For the eyebrows, use the Rectangle tool. Adjust the size and position with the Transform tool.
Eyebrows are crucial for expression. Angled down toward the center = angry. Arched up = surprised. Straight = neutral.
The rectangle—representing stability and order—creates a strong, defined look for the eyebrows.
Step 7: Finish Your Character
In the last step, duplicate the left eyebrow and use the Transform tool to position it on the other side.
Save the .psd file for later adjustments. Then, turn off the background layer and save as .png to get an image with transparency (alpha channel).
Congratulations! You’ve created your first game character using only basic shapes: circles, triangles, and rectangles.
What You’ve Learned
- How to use basic shapes to construct character faces
- Proper layer organization in Photoshop
- Exporting game-ready assets with transparency
- How shape choice affects character expression
Next steps: Try creating variations—change the shapes, rotate elements, or add new features. Each combination creates a different personality!