Is there a way to easily resize an image as a Ninepatch would resize in photoshop?

Question

A ninepatch, for those unfamiliar, is described here. In a nutshell, you can take an image and put a few pixels on the outermost pixels to represent which areas should stretch and not stretch when they're used on UI widgets of varying sizes. That's great if the program you're working with knows how to understand a ninepatch style image.

Is there a way to resize something in photoshop in the same way? Normally I would just scale it, but that doesn't work if I want to keep the borders edges a specific thickness and only stretch the center portions.

Answer 1

If you stick with vector shapes in Photoshop, that will give you want you want.

If you need to stretch raster images, I believe Adobe Fireworks now offers that feature.

If these are gui elements for web, note that you can do a lot with CSS now and may not need actual images.

Answer 2

If you're trying to do this to a raster image, and using version CS4 or later, you can use the Content-Aware Scale tool, in combination with an Alpha channel, to get a similar effect.

First create a new alpha channel in the image, and fill the areas you'd like to protect from scaling with white. Leave the rest of it black.

Make sure the layer you want to resize is selected, and not a background layer. Then go to Edit > Content-Aware Scale.

Once the tool is active, the second option from the right in the options bar should be "Protect". Select the Alpha channel you just created from the drop down list and then start resizing.

Answer 3

The Illustrator, Fireworks and Flash equivalent is "Nine-Slice Scaling" and it's pretty simple to work with in those applications, so if you need this frequently in your workflow, you're better off working in FW or AI.

Photoshop doesn't have such a capability. You can't transform a shape (vector or raster) in Photoshop without distorting such things as corner shape or radius (the things 9-slice is most useful for). Neither scale tools nor Content-Aware Scaling are going to help you much.

One way that you can achieve 9-slice Nirvana in Photoshop is to create the object in Illustrator or Fireworks and place it as a Smart Object, double-click to edit the original as needed. This is a pretty clumsy workaround, though. You're better off in a program that does this natively.