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:
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: