Did you know that you can “9-slice” in Axure RP? The Axure RP version of the feature is called “preserve corners”.

Sometimes you’ve got an image button that you want to resize quickly, without remaking it using widgets and without ending up with a jaggy, distorted mess. Perhaps your button has a detail that makes it trickier to quickly rebuild—maybe something like this button I found on the download page of a certain industry-leading prototyping tool:

If I wanted to make this button wider to fit a long piece of text, stretching it horizontally would leave me with some distortion, like this:

Notice how the “reflection line” detail is skewed as compared to the original, and how the right border is now thicker than the top and bottom borders. Not great.

This is where the preserve corners feature comes in. Observe:

When you right-click on an image and select “Preserve Corners”, four dotted red lines appear over the image.The lines are marking out areas on the borders of the image which will not be scaled when the image is resized. Because I wanted that reflection detail to be preserved when I resized, I dragged the left-side divider to the right of the reflection line, making the preserved portion of the image on that side nice and wide. Then, when I widened the whole image, only the center portion scaled. Because the part I defined as the center is just a simple vertical gradient, I didn’t get any distortion when making that part wider.

I think of the preserve corners feature as the lime squeezer in the Axure RP kitchen drawer—designed to do one thing really well, and super useful when you need it. Next time you’re making margaritas or working with image buttons, give it a try.

Share this: