Photoshop/GIMP for Game Art

Guides / Photoshop/GIMP for Game Art / Photoshop/GIMP Basics: Interface and Essential Tools

Photoshop/GIMP Basics: Interface and Essential Tools

Photoshop and GIMP are two of the most popular tools for 2D game art.

Whether you are drawing sprites, painting backgrounds, or preparing UI icons, the basics are the same: understand the interface, keep your layers organized, and get comfortable with a small set of core tools.

This chapter focuses on:

Finding your way around the workspace
Understanding documents, layers, and history
Using the essential tools you will touch in almost every game art task

You do not need to master every button in the UI.

If you can confidently create a canvas, draw on the right layer, and undo mistakes, you are ready to start real game assets.

---

Interface Tour: What Actually Matters for Game Art

Both Photoshop and GIMP offer:

A canvas area in the center
A toolbar down the left (main tools)
Panels on the right:
Layers
Brushes
Color / Swatches
History

The exact layout and names differ, but conceptually:

The canvas is where your art lives.
The toolbar is how you interact with pixels (paint, select, move).
The layers panel is where you manage structure and avoid painting on the wrong thing.

For game art, you can safely ignore most of the more advanced panels at first.

Focus on:

Layers: visibility, order, and locking
History: rolling back mistakes
Brushes and Color: how your strokes look and what color they use

Spend a few minutes clicking around just to see how hovering over each icon shows a tooltip.

Knowing where things live is half the battle.

---

Creating a New Document for Game Assets

Before you start drawing, you need a canvas size that makes sense for your game.

Typical starting points:

Sprites and icons: 64×64, 128×128, or 256×256 pixels
UI buttons or panels: 256×128, 512×256, or similar aspect ratios
Background tiles: 256×256 or 512×512

Key settings when you create a new document:

Width & Height in pixels (not inches)
Resolution:
72–96 ppi is fine for most game art (engines care about pixel count, not DPI)
Color Mode:
RGB, 8‑bit per channel
Background:
Transparent if you are making sprites or UI elements

Once you have one canvas that works, save it as a template to reuse across assets.

---

Working with Layers (Your Safety Net)

Layers let you keep different parts of your art separate:

Backgrounds
Characters
Shadows and highlights
Text and UI elements

Fundamental habits:

Never draw everything on a single layer

At minimum, keep background, main subject, and effects separate.

Name your layers:
<code>bg</code>, <code>character</code>, <code>weapon</code>, <code>shadow</code>, <code>ui-text</code>, etc.
Use groups for complex pieces:
Group related layers (e.g., all parts of a button or a character)
Lock layers that should not be touched:
In Photoshop: lock icons in the Layers panel
In GIMP: use the lock options next to the layer

If you get into trouble, the Layers panel is usually the first place to look:

Are you painting on the correct layer?
Is the layer hidden or partially transparent?
Is the layer locked?

---

Essential Tools You Will Use Every Session

You do not need every tool to start creating game art.

Focus on these first:

Move Tool
Move layers, sprites, and UI elements around
Shortcut: <code>V</code> (Photoshop) or <code>M</code>/<code>Move</code> (GIMP)

Brush/Pencil Tool
For painting and pixel work
Shortcut: <code>B</code> (Photoshop), <code>P</code> or Brush tool in GIMP

Eraser Tool
Clean up edges or remove mistakes
Shortcut: <code>E</code>

Selection Tools
Rectangular/elliptical selects, lasso, polygonal lasso
Use them to move parts of a sprite, fill specific areas, or constrain edits

Fill/Bucket Tool
Quickly fill large areas with color

Zoom and Hand Tools
Zoom in/out (Ctrl/Cmd + <code>+</code> / <code>-</code>)
Hand tool (Spacebar while dragging) to pan the canvas

If you learn nothing else from this chapter, learn how to:

Select the right tool quickly via shortcuts
Undo (<code>Ctrl+Z</code> / <code>Cmd+Z</code>)
Switch foreground/background colors (<code>X</code> in Photoshop, similar in GIMP)

---

Color, Brushes, and Basic Strokes

For game assets, you often need:

Clean, readable silhouettes
Consistent colors and shading

Key basics:

Foreground vs Background color:
Foreground is what your brush uses
Background is what the Eraser or Fill may use in some modes
Brush size and hardness:
Size controls the width of your stroke
Hardness controls how soft or pixel‑sharp the edges are
Opacity and Flow (mainly Photoshop):
Lower opacity for softer shading
Higher opacity for crisp line art

In GIMP, look at:

The Tool Options below the toolbox:
Size, hardness, opacity, and dynamics

For pixel art:

Use a hard, 1‑pixel brush with no anti‑aliasing.
Avoid soft edges and large blurry brushes; they do not scale well in engines.

---

History and Undo: Safely Experimenting

Both Photoshop and GIMP keep a History of your actions:

Each brush stroke, transform, or adjustment can appear as a separate step.
You can step backwards to an earlier point if a change ruins your work.

Useful habits:

Learn your undo shortcut and use it constantly (<code>Ctrl+Z</code>, sometimes <code>Ctrl+Alt+Z</code> in Photoshop for multi‑step undo).
Keep an eye on the History panel so you know how far back you can go.
For bigger changes, consider duplicating a layer before making risky edits.

This makes experimentation safe:

Try new colors
Test different silhouettes
Explore multiple shading approaches

If one direction fails, jump back in History or hide/delete the experimental layer.

---

Pro Tips for a Clean, Game‑Ready Workflow

Tip 1: Work at 100% zoom frequently

What looks great zoomed out may be blurry or noisy at the actual in‑game size.

Tip 2: Group assets by purpose

Keep separate files for:

Character sprites
UI kits
Icons
Background tiles

Tip 3: Use guides and grids
Enable the grid when working on tiles or UI to keep elements aligned.
Snap to guides for pixel‑perfect edges.

Tip 4: Save in layers, export flattened
Keep a layered <code>.psd</code> or <code>.xcf</code> master file.
Export flattened <code>.png</code> files for your game engine.

---

Common Mistakes to Avoid

Painting on the wrong layer
Always glance at the Layers panel before you draw.

Using huge canvases for tiny sprites
Start with reasonably sized documents; massive canvases waste time and make details hard to judge.

Ignoring transparency
Make sure the background is transparent for sprites and UI elements—no hidden solid background layers.

Overcomplicating early pieces
Start simple: one character, one icon, one button. Complexity can come later.

---

Quick Practice (5–10 Minutes)

To lock in the basics:

Create a new 128×128 pixel document with a transparent background.
Add three layers:
<code>bg</code>
<code>character</code>
<code>shadow</code>
On <code>bg</code>, fill with a simple gradient or flat color.
On <code>character</code>, draw a very simple character or icon using the Brush tool.
On <code>shadow</code>, add a soft ellipse under the character.
Use the Move tool to nudge the character and shadow until they feel grounded.
Zoom in and out a few times to see how it reads at game size.

Once you are comfortable with the interface and these core tools, you are ready for the next chapter: Creating 2D Sprites: Drawing and Painting Techniques, where we will start turning blank canvases into actual game‑ready art.