A tutorial on how to create flexible UI Image/Button/… elements which uses sprites.

Using 9 sliced image makes UI elements look better and reduce size of sprites that needs to be used.

The sprite that will be used:

After using this image without proper import settings it gets disorted, unless UI image is of the multiplied size of the used image.

To fix that change sprite import settings to the following:

After that open sprite editor and change default border: 

to this:

It can be done either by draging green pivots (marked in first image with red border) or changing values in fields in Border settings.

After that change Image Type settings in image settings to Sliced:

In the end the image should not be disorted and should look like this:


Unity UI 9 Sliced Image
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. You can read more about it the Cookies&Privacy Policy Section Above. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. You can read more about it the Cookies&Privacy Policy Section.