Skip to main content

​
Overview

Aseprite’s shape tools let you draw geometric primitives with precision. Each tool supports both outline and filled modes, making them versatile for UI design, level layouts, and geometric artwork.

Rectangle

Draw rectangles and squares

Ellipse

Draw circles and ellipses

Line

Draw straight lines

Polygon

Draw custom polygons

​
Rectangle Tool

Keyboard Shortcut: U

​
Basic Usage

1

Select Rectangle Tool

Press U or click the rectangle icon
2

Draw Rectangle

Click and drag from one corner to opposite corner
3

Choose Mode

  • Empty checkbox: Outline only
  • Filled checkbox: Solid fill

​
Modifiers

Hold Shift: Force square proportions
Constrains width = height
Perfect for: UI buttons, tiles, icons

​
Rounded Rectangles

Rectangle tool supports rounded corners:
1

Draw Rectangle

Create your rectangle normally
2

Hold R Key

While still holding mouse, press and hold R
3

Adjust Radius

Drag to increase corner radius
4

Release

Release mouse to apply
// From: source/src/app/tools/controllers.h:115
class CornerRadius {
  int radius() const { return m_radius; }
  // Radius is capped by maximum rectangle dimension
  int maxRadius = min(width, height) / 2;
};
Corner radius is automatically limited to half the shortest side of the rectangle.

​
Rotating Rectangles

Create rotated rectangles:
1

Draw Base Rectangle

Click and drag to define size
2

Activate Rotation

Hold Ctrl+Shift (don’t release mouse)
3

Rotate

Move mouse to rotate around center
4

Release

Release mouse to finalize
Rotation Details:
  • Rotation is free-form (not snapped) unless combined with shape snapping
  • Angle displayed in status bar
  • Can combine with rounded corners
  • Works with both outline and filled modes

​
Ellipse Tool

Keyboard Shortcut: Shift+U

​
Basic Usage

1

Select Ellipse Tool

Press Shift+U or cycle through shape tools
2

Draw Ellipse

Click and drag to define bounding box
3

Mode Selection

Toggle fill checkbox for solid or outline

​
Modifiers

Hold Shift while draggingForces perfect circle:
  • Width = Height
  • Maintains circular shape
  • Best for: Buttons, planets, wheels
Hold Alt while draggingDraw from center point:
  • Start point = center
  • Expands outward
  • Symmetric in all directions
Hold Ctrl+Shift after drawingRotate the ellipse:
  • Drag to rotate
  • Angle shown in status bar
  • Maintains width/height ratio

​
Technical Details

// From: source/src/app/tools/intertwiners.h:445
class IntertwineAsEllipses : public Intertwine {
  void joinStroke(ToolLoop* loop, const Stroke& stroke) {
    // Uses Bresenham's ellipse algorithm
    algo_ellipse(x1, y1, x2, y2, 0, 0, loop, doPointshapePoint);
  }
};
Algorithm characteristics:
  • Bresenham’s midpoint ellipse algorithm
  • Pixel-perfect edges
  • Efficient calculation
  • Supports rotation via matrix transformation

​
Line Tool

Keyboard Shortcut: Shift+B (cycle through line tools)

​
Basic Line Drawing

1

Select Line Tool

Click line tool icon or use shortcut
2

Click Start Point

Click where line should begin
3

Click End Point

Click where line should end

​
Angle Snapping

Hold Shift: Snap to specific anglesSnaps to:
  • 0°: Horizontal (left/right)
  • 26.565°: Isometric angle
  • 45°: Diagonal
  • 63.435°: Isometric angle
  • 90°: Vertical (up/down)
// From: source/src/app/tools/controllers.h:254
if (angle < 18.0) {
  stroke[1].y = m_first.y;  // Snap horizontal
}
else if (angle < 36.0) {
  // Snap to 26.565° (isometric)
}
else if (angle < 54.0) {
  // Snap to 45° diagonal
}
The 26.565° and 63.435° angles are perfect for isometric pixel art!

​
Line+Freehand Tool

Special combined tool:
How it works:
  1. Click to start line (two-point mode)
  2. Click again to end line
  3. Without releasing, continue as freehand
  4. Release to finish
Use cases:
  • Quick straight segment + curve
  • Architectural outlines
  • Mixed geometric/organic shapes
// From: source/src/app/tools/controllers.h:562
class LineFreehandController : public Controller {
  // Switches from TwoPoints to Freehand controller
};

​
Polygon Tool

​
Point-by-Point Drawing

1

Select Polygon Tool

Click polygon icon in toolbar
2

Click Points

Click to place each corner point
3

Close Polygon

  • Double-click to finish
  • Or click near start point to close
  • Press Esc to cancel

​
Fill Options

Unchecked fill: Draws only edges
  • Connects all points with lines
  • Uses current brush settings
  • Good for: Wireframes, line art

​
Technical Implementation

// From: source/src/app/tools/controllers.h:413
class PointByPointController : public MoveOriginCapability {
  void pressButton(ToolLoop* loop, Stroke& stroke, const Stroke::Pt& pt) {
    stroke.addPoint(pt);  // Add each clicked point
    stroke.addPoint(pt);  // Preview next segment
  }
};

// From: source/src/app/tools/intertwiners.h:168
void fillStroke(ToolLoop* loop, const Stroke& stroke) {
  auto v = stroke.toXYInts();
  doc::algorithm::polygon(v.size()/2, &v[0], loop, doPointshapeHline);
}

​
Shape Controller System

All shape tools use the TwoPoints Controller: 
// From: source/src/app/tools/controllers.h:182
class TwoPointsController : public MoveOriginCapability {
  bool isTwoPoints() override { return true; }
  
  void pressButton(Stroke& stroke, const Stroke::Pt& pt) {
    stroke.addPoint(pt);  // First point
    stroke.addPoint(pt);  // Second point (updated on movement)
  }
  
  void movement(Stroke& stroke, const Stroke::Pt& pt) {
    stroke[1] = pt;  // Update second point
    // Apply modifiers (shift, alt, etc.)
  }
};
Key features:
  • Always uses exactly 2 points
  • First point locked on initial click
  • Second point follows mouse
  • Supports modifiers during drag

​
Fill vs Stroke

All shape tools support both modes:

Stroke (Outline)

Empty/unchecked fill checkbox
  • Draws only outline
  • Uses current brush size
  • Respects brush type
  • Ink mode affects outline
Use for: Line art, borders, wireframes

Fill (Solid)

Checked fill checkbox
  • Fills interior
  • No outline (unless drawn separately)
  • Faster rendering
  • Solid color application
Use for: Blocks, backgrounds, masks
Stroke + Fill Workflow:
  1. Draw filled shape on one layer
  2. Create new layer
  3. Draw outline stroke on top
  4. Adjust outline color/thickness independently

​
Status Bar Information

While drawing shapes, the status bar shows: 
:start: X Y :end: X Y :size: W H :distance: D :angle: A° :aspect_ratio: W:H
  • Start/End: Corner coordinates
  • Size: Width x Height
  • Distance: Diagonal length
  • Angle: Rotation angle (if rotating)
  • Aspect Ratio: Simplified width:height ratio
  • Corner Radius: If rounded corners enabled
Coordinates shown are relative to sprite origin, adjusted by any offset from transformations.

​
Practical Examples

​
UI Design Workflow

1

Create Button Background

Rectangle tool, filled, with rounded corners (R modifier)
2

Add Border

New layer, rectangle outline with contrasting color
3

Add Icon

Use circle tool for circular icons or badges
4

Align Elements

Hold Alt to draw from center for easy centering

​
Isometric Tiles

1

Enable Grid

View → Grid → Grid Settings (isometric ratio)
2

Draw Base

Rectangle tool with Shift for square base
3

Draw Sides

Line tool with Shift held for 26.565° angles
4

Fill Faces

Use polygon tool to create filled side faces

​
Quick Selections

Shape tools create selections when Selection ink is active:
1

Switch Ink Mode

Change ink to “Selection” in ink dropdown
2

Draw Shape

Use rectangle or ellipse tool
3

Shape Becomes Selection

Perfect selection in that shape

​
Common Issues

Problem: Shape outline draws but fill doesn’t appearSolutions:
  • Check fill checkbox is enabled
  • Verify layer is not locked
  • Ensure opacity is not 0%
  • Check ink mode isn’t set to “Selection”
Problem: R key doesn’t create rounded cornersSolutions:
  • Must hold R while dragging (before release)
  • Only works with rectangle tool
  • Check that rectangle is large enough (radius capped at half size)
  • Rectangle intertwiner must support corner radius
Problem: Can’t get exact angle when rotatingSolutions:
  • Use Shift for straight horizontal/vertical
  • Note: Free rotation doesn’t snap (except with Shift)
  • Consider using transform tool for precise angles
  • Check status bar for current angle

​
Keyboard Shortcuts

Quick Reference
U              - Rectangle tool
Shift+U        - Ellipse tool
Shift (hold)   - Square/circle constraint + angle snap
Alt (hold)     - Draw from center
Ctrl+Shift     - Rotate shape
R (hold)       - Adjust corner radius (rectangle)
[ / ]          - Decrease/increase brush size
Space (hold)   - Pan canvas

​
Related Topics

Tool Overview

Pencil & Brush

Fill Tool

Selection

Transforms

Tiled Mode