Images & texture design · focused workspace

Nine-patch Image Builder

Create a one-pixel Android-style stretch and content border around an image, preview guide placement and export a .9.png asset.

Before / after previewEditable projectsLocal processing

Source → inspect → export

Preparing the worked example…

Your source & settings

Settings & options
Start with your images

Drop a still image here. PNG inputs preserve their original RGBA pixel values.

Upload still PNG, JPEG, WebP or BMP images. Source images are limited to 1,048,576 pixels and 4,096 pixels per edge. Multiple selected files must total at most 20 MiB. PNG exports retain computed RGBA values; source metadata and color profiles are not copied.

Inspect your result

PREVIEW & EXPORT

Know what changed

Adds a single continuous stretch range per axis. Marker positions are rounded to source pixels. The preview shows the marker border; framework padding interpretation should be checked in your target application.

    Choose another output above or open Export files.

    Explore the example

    Create a one-pixel Android-style stretch and content border around an image, preview guide placement and export a .9.png asset.

    What you can inspect

    • Marker ranges — Edge, Role, First, Last.

    Keep the result you need

    Use the output selector to inspect each generated file, then download it. Save a project to keep source inputs and settings together. Result files and editable projects serve different purposes.

    Processing & file support

    Upload still PNG, JPEG, WebP or BMP images. Source images are limited to 1,048,576 pixels and 4,096 pixels per edge. Multiple selected files must total at most 20 MiB. PNG exports retain computed RGBA values; source metadata and color profiles are not copied.

    Your working session

    Processing runs locally in a worker with a 30-second cancellation limit. Undo and redo keep up to 20 edits in this tab. Project files include imported assets and are limited to 40 MiB. There is no automatic saving.

    Public pages include advertising and optional analytics under our privacy policy. Review the method and any flagged output before sharing files.

    Using Nine-patch Image Builder

    Create a one-pixel Android-style stretch and content border around an image, preview guide placement and export a .9.png asset.

    1. Try the built-in sample, then choose your own supported files.
    2. Adjust stretch x start · %, stretch x end · %, stretch y start · %, stretch y end · %, content inset x · %, content inset y · %. Change one setting at a time so you can understand its effect.
    3. Choose “Build nine-patch image”. Inspect the visual comparison before using the result.
    4. Download the selected output, inspect other files in Export files and save a project if you want to reopen the same inputs.

    Example

    Try the built-in example, inspect marker ranges and compare the result after changing one option.

    Questions & answers

    What does Nine-patch Image Builder do?

    Create a one-pixel Android-style stretch and content border around an image, preview guide placement and export a .9.png asset.

    What are the important limitations?

    Adds a single continuous stretch range per axis. Marker positions are rounded to source pixels. The preview shows the marker border; framework padding interpretation should be checked in your target application.

    Can I save and reopen my work?

    Yes. Save a project JSON file containing your inputs, settings and any imported assets. Projects are limited to 40 MiB. Undo/redo stores up to 20 edits in this session and is not saved in the project. There is no automatic saving.

    How do imports and output previews work?

    Upload still PNG, JPEG, WebP or BMP images. Source images are limited to 1,048,576 pixels and 4,096 pixels per edge. Multiple selected files must total at most 20 MiB. Text previews show up to 150,000 characters; downloads include the complete output. Tables show 50 rows per page; CSV files include all rows.

    Help improve this tool

    Report a problem or suggest an improvement

    Describe the issue without pasting private tool input. Feedback goes to our admin inbox.

    Find another tool · Read practical guides