Make a 9-slice UI element

Last updated: October 30, 2026

Turn a button, frame or panel into a 9-slice element whose edges and middle tile to any size, 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, and a plain band through the middle on each axis. Painted texture there, such as stone, wood grain or paper, is fine. A crest, a label, a seam or a pattern running across the middle is not. 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 whose edges and middle tile.

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

  4. Choose Tiled to see it drawn twice as wide, the way an engine tiles it. The corners keep their size and the middle repeats without a seam.

Set the guides by hand

When detail runs across the middle of the image, a label, an emblem, a seam or a pattern, 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 repeats in the copy, so a label across the middle repeats too. 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, the corners are kept as they were. The edges and middle keep their texture and are made to tile, so each repeats without a seam. Lighting and shading stay in the border, and light is evened out of the middle so the repeats don't show. 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. Texture along the edges and across the middle is kept and tiles; a crest, seam or pattern across the middle stops Layer finding the corners.

  • Light it in the border. The middle is evened out so it can repeat, so a glow or a lit spot painted there is lost. Paint the shading into the frame, or add lighting in the engine.

  • Letter in the engine. A button with its label painted on can't tile. 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 draw it 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). Godot and CSS fit whole tiles, Unity tiles and cuts the last one, and PixiJS and Phaser stretch: see Hand it off.

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 band through the middle.

  • A faint line shows where an edge meets the middle. The edges and the middle tile separately, so a regular pattern such as a grid or hexes breaks where they meet. Use an irregular texture, or keep the pattern in the border.

  • 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