Make a 9-slice UI element

Last updated: October 14, 2026

Turn a button, frame or panel into a 9-slice element that stretches to any size without smearing, ready to export as a UI kit.

Before you start

  • Any flat still image can be copied as a 9-slice. A layered file, a skybox or a tiling texture can't: the action isn't offered for them.
  • The copy works best on art drawn for it: ornament in the four corners, plain edges between them, and a plain middle. To get pieces drawn that way from the start, see Make a 9-slice UI kit for your engine.

Steps

  1. Open the image full-size from the board, the gallery or the library.

  2. In Tools, choose Make 9-slice copy. Layer finds where the corners end and makes a copy with the edges and middle cleaned to stretch.

  3. Open the copy from the versions down the left of the image. Slices shows the four guides it splits along.

  4. Choose Stretched to see it drawn twice as wide, the way an engine stretches it. The corners keep their size and nothing smears.

Set the guides by hand

When detail runs across the middle of the image, a label or an emblem, Layer can't find the corners on its own. The guides open on the image instead, a quarter in from each side, for you to place.

  1. Choose Make 9-slice copy. When the corners can't be found, the guides open with Save copy with these insets and Cancel under the image.

  2. Drag the left and right guides to just past the corner ornament, so each corner keeps its ornament whole.

  3. Drag the top and bottom guides the same way.

  4. Select Save copy with these insets. The copy joins the image's versions.

Everything between the guides is made plain in the copy, so a label across the middle is flattened. Leave labels off the art and draw them in the engine instead.

The same guides are on every 9-slice copy. To move them, drag them in Slices and select Save copy with these insets; Reset puts them back. The image you dragged on stays as it was.

Result

A PNG copy of the image, next to the original in its versions. The original is not changed. In the copy, each edge is one strip repeated along its length and the middle is one colour, so stretching it never smears. Its details list 9-slice insets (left, top, right and bottom, in pixels) and 9-slice set by: Detected or Hand.

Production tips

  • Draw for the slice. Keep ornament, gems and highlights in the corners, and keep edges and the middle plain. Anything between the guides is flattened, including studs or rivets along an edge.
  • Letter in the engine. A button with its label painted on can't stretch. Make the button plain and set the label as text in the engine, where it can be localized too.
  • Make it at the size you stretch from. Corners keep their pixel size, so a panel made at 4K has corners far larger than the screen needs. Make it near the smallest size it is drawn at.
  • Use a solid background. Ask for the element on a plain background colour and remove the background afterwards. Asked for a transparent background, a model paints a grey-and-white checkerboard into the image, and the copy keeps it.
  • Export the set together. Select every 9-slice copy and choose Download as..., then pick an engine under UI kit (9-slice).

If something goes wrong

  • The guides open instead of a copy. Detail runs across the middle of the image. Set the guides by hand, or make the element again with a plain middle.
  • Detail along an edge is gone in the copy. It sat between the guides, where everything is made plain. Move the guides out past it, or redraw the edge plain.
  • The copy has a checkerboard around it. The checkerboard is painted into the image. Make the element again on a solid background, then remove the background.
  • Make 9-slice copy is missing. The image is layered, is a skybox or texture, or is already a 9-slice copy. A 9-slice copy shows its guides instead.

Related