Question 1

How do I make a Unity / Godot / Cocos / Unreal 9-slice without Photoshop?

Accepted Answer

This 9-Patch tool (https://gameimagekit.com/en/tool/nine-patch) edits stretch guides in the browser and exports Unity Sliced .meta / Image prefab, Godot StyleBoxTexture, Cocos 9-slice, Unreal UMG JSON, CSS border-image and Android .9.png. Files never leave your device.

Question 2

What is 9-patch / 9-slice stretching?

Accepted Answer

An image is split by two horizontal and two vertical lines into a 3×3 grid of 9 pieces: the four corners keep their size, the top/bottom edges stretch only horizontally, the left/right edges stretch only vertically, and the center stretches both ways. This lets a small border / button background scale to any size without blurring its rounded corners, strokes or shadows — the core technique for UI slicing.

Question 3

What is the difference between the stretch region and content padding?

Accepted Answer

The stretch region controls which pixels get stretched when scaling; content padding defines the safe area where text / icons should sit so they never overlap the corners or stroke. They are set separately. A standard .9.png marks the stretch region on the top/left border and the content region on the bottom/right border.

Question 4

Can the exported .9.png be used in Android directly?

Accepted Answer

Yes. The exported image adds 1px around the original and uses black pixels to mark the stretch region (top/left) and content region (bottom/right), following the Android NinePatch spec. Top/left may have multiple black marks (multi-region stretch); the preview and .9.png keep them. Unity / Godot / Cocos / CSS only support a single 9-slice, so engine export merges extra regions into a bounding rectangle.

Question 5

How do I use this in Unity, Godot, Cocos, or on the web?

Accepted Answer

Engine export packs a clean PNG (no Android 1px marks) plus sidecars. Unity: PNG, .png.meta and a uGUI Image prefab go together — drop the prefab under a Canvas; Image is already Sliced (or Tiled) and the Content child is inset by the 9-patch padding. Godot 4: StyleBoxTexture .tres, NinePatchRect .tscn, and a PNG .import (lossless, no mipmaps). Cocos: creator3 / creator2 folders each have PNG + .png.meta; set Sprite to Sliced. Unreal: open the .unreal.json, set the UMG Image to Draw As = Box, and copy Margin (UV 0–1) plus Slot Padding (pixels). Web: keep the PNG next to the CSS, or paste the border-image rules.

Question 6

What is the difference between stretch and tile?

Accepted Answer

Stretch scales the center region — best for solid or gradient fills on buttons and panels. Tile repeats the center pixels — better for patterned, dotted, or repeating borders. Turn on point filtering (nearest neighbor) so pixel-art stretching stays crisp.

Question 7

Are my images uploaded to a server?

Accepted Answer

No. Parsing, stretch preview, .9.png and engine metadata generation all happen locally in your browser — files are never uploaded to any server.