libresprite.dev
v1.3

Guide · Outline

How to outline a sprite in LibreSprite

Aseprite has an Outline command; LibreSprite 1.3 doesn’t. Here are three ways to get a clean one-pixel outline, from fully manual to one click on every frame.

Checked with LibreSprite 1.3Updated 2 min read
On this page 5 sections
  1. 1. One click: the outline script
  2. 2. By hand on a layer below
  3. 3. The selection trick
  4. Outline tips
  5. FAQ

Short answer

Is there an outline tool in LibreSprite?

No built-in one. The fastest route is our free outline.js script: put it in your scripts folder, then Scripts → outline. It adds a one-pixel outline around the current layer in every frame (tested on 1.3). Without scripts, draw the outline on a layer underneath the art, or use the selection method below.

1. One click: the outline script

  1. Install it

    Download outline.js (or the version with a colour dialog, outline-dialog.js). In LibreSprite: Scripts → Open Folder, copy the file there, Scripts → Rescan scripts.

  2. Pick the layer

    Select the layer to outline in the timeline. Tip: outline a copy (Layer → Duplicate) so you can compare.

  3. Run it

    Scripts → outline. Every transparent pixel touching the art (left, right, above, below) becomes the outline colour. On our demo sprite it outlined 75–78 pixels per frame.

Sprout before
Before
Sprout after the outline script
After outline.js (body layer), saved by LibreSprite

Change the colour on the first line of outline.js (pixelColor.rgba(26, 28, 44, 255)), or use the dialog version and type a hex code. The outline is drawn into the layer itself, so the art grows by one pixel on each side: leave a one-pixel margin around your art.

2. By hand on a layer below

The traditional method, and the one that gives the most control (selective outlines, lighter on the lit side):

  1. Add a layer below your art (new layer, then drag it down).
  2. Pencil (B) with pixel-perfect on, 1 px brush, dark colour.
  3. Draw around the silhouette, one pixel outside the edge. Hold Shift to draw straight runs from the last point.
  4. Hide the art layer now and then (eye icon) to check for gaps.

3. The selection trick

  1. On the art layer, pick the Magic Wand (W), click an empty area, then Select → Inverse (Ctrl+Shift+I): the art is selected.
  2. Select → Modify → Expand by 1 pixel (square brush for corners, circle brush for a softer outline).
  3. On a new layer underneath, fill the selection with the outline colour: Paint Bucket (G) inside it.

Repeat per frame for animations, or use the script, which does every frame at once.

Outline tips

  • Use a very dark version of each area’s colour instead of pure black for a softer look (“selective outlining”).
  • Keep the outline one pixel wide and avoid double pixels on curves: pixel-perfect mode helps.
  • Inner lines (between arm and body) are usually drawn by hand even after an automatic outline.

FAQ

Can the script outline all layers at once?

It works on the current layer. Merge a copy of your layers first (Layer → Merge Down or Flatten on a duplicate sprite), or run it once per layer.

Does it include diagonal pixels?

No: it checks the four direct neighbours, which gives the standard pixel-art outline. Corners get filled only where an edge touches them.

Can I undo it?

Yes, with Ctrl+Z in the app.

Keep going

ScriptingAutomate LibreSprite with JavaScript: first script to dialogs.ToolsAll 23 tools, their options and their keys.LayersAdd, reorder, hide and merge layers, and what about groups.

Found something wrong or out of date? Tell us: hello@libresprite.dev. We fix mistakes within a day.