Nine Slice For Young Ladies

Nine slice is a technique to cut up a pretty graphic design, to protect its corners, resize its borders, and tile its background.

I recently explained it, as just four lines, AI just handed me a square instead.

I got miffed, whatever that meas, because a square is a lot more elegant than 4 lines.

I use four standalone programs for this, if there is one thing you don’t want to underestimate, it is nine slice.

The first program is imagegen, you know it as OpenAI photo generator.

And incredibly it supports generating computer game assets, with transparent holes already properly cut out.

My second program, is my own called kut, kut, slices grids of images, whatever AI you use it can give you a 2x2 or 2x3 grid of designs.

And kut will split the designs, detect their edges and crop them to perfection.

These two steps used to take people weeks of work, maybe months, and it is really boring work.

Then my third program is a nine slice workspece, here I drop an image, ai puts that square at the center,

And I sit there aligning things, because you can’t just repeat a border, you have to find a repeatable are in a border.

This small microscopic step, is the difference between good UI and ugly UI.

If you can see a repeating pattern in the user interface borders, it does not matter how pretty your original art was.

I spent a week experimenting with AI here, automatic pixel reconstruction, difference detection, were not yet enough.

What if you want an interesting side motif? Do you want it top, bottom, or center, AI may not always answer that.

And in my nine slice, I have layers, so that I can put in vents, or stickers, or even a key chain, like by the dashboard of a car.

At the very least, you will need a workspace here, where you can sit down, load, save, check, retry.

And my fourth program, is the user interface system, the web browser does not really support multi-layer nine slice designs.

You are better of having an AI program a little thing for you, and than maybe try an image-border and CSS implementaion.

Here in closing, I need you to understand, that everything needs nine slice.

Nine slice is not just for a text box that resized, but also a button that has a variable width label.

Even a checkbox needs nine slice, because the font size of the little check-mark or dot can change.

Up until a couple of years ago user interfaces were drawn live, using good old geometry, squares and lines.

But now that we can generate beautiful frames and button, checkbox, we have to go back to the User Interface drawing board.

The modern user interface is ugly, it is boring.

It is rare for an OS or a web page to support many intricate graphic themes, and in the age of image generation that is just negligent.

The user interface can now become beautiful in ways not yet seen, and a robust nine grid and workflow to match is the only way to get there.