Scaling images

To run your application on multiple devices, you may have to rescale your UI for the different screen sizes. If you rescale a rounded box in Photoshop, your shape layers lose their original crispness, even if you made the box by using a shape layer. Designers usually edit vector shapes by hand after scaling to preserve sharpness. You can use Cascades Exporter to easily achieve a similar result.


Diagram that compares rescaling an image using Cascades Exporter with rescaling an image with Adobe Photoshop.

In the above images, notice the difference between the zoomed versions of the original image, the image with fuzzy edges that is scaled in Photoshop, and the image with sharp edges that is scaled in Cascades Exporter. The rescale feature in Cascades Exporter is designed to maintain edge sharpness when scaling vector shapes. It can really help you save time.

Nine-slice scaling an image

Nine-slice scaling preserves some detail when you scale an image in Cascades Exporter. You can use this feature to scale different parts of an image differently, to preserve corner and edge detail while scaling the center of the image. Cascades Exporter provides you with different ways of nine-slicing images: you can cut only the corners (saving the file size) or create a reference for scaling different parts of the image. The following image shows how nine-slice scaling preserves the details of the original image.

Animation showing how nine slicing works.

Nine-slice scaling an image with gradients

Before you begin, download the cascades_exporter_assets.zip file which contains the .psd images used in this tutorial.

  1. Click Windows > Extensions > Cascades Exporter to open the plug-in.
  2. Open the Button_for_nine_slicing_gradient.psd file.
  3. Select the BIG DOWNLOAD BUTTON COPY layer group.
  4. Select the Nine slice check box.

A new area with nine-slicing controls appears in the Cascades Exporter window.

Your plug-in UI should match the image on the right. The plug-in should draw guides on your image. By dragging these guides, you can specify the area you want to preserve and the area you want to scale. Inside the guides, the image is preserved and outside the guides, the image is scaled. When you are satisfied, you can export the image. The plug-in exports the button to an image and an .xml file with coordinates for your nine-slicing.

Screen showing the nine-slice options available in the Cascades Exporter.

Cascades Exporter does not change the image, it just extracts the coordinates for nine-slicing the image.

Nine-slice scaling a non-textured image

The main difference between nine-slicing a non-textured image and nine-slicing an image with gradients is that you use Minimize center controls in nine-slicing an image with gradients. These controls allow you to reduce the size of the middle section of the image to a few pixels, so that only the corners remain. You can use this remaining structure to create expandable boxes with the corners as reference points. The image retains the solid color from the center of your exported image.

Screen showing the nine-slice options available in Cascades Exporter.
  1. Click Windows > Extensions > Cascades Exporter to open the plug-in.
  2. Open the Button_for_nine_slicing_gradient.psd file.

Before scaling:

Screen showing an object before being nine-sliced.

After scaling:

Screen showing an object after being nine-sliced.

Cascades Exporter reduces the size of the mid section of the image to a few pixels, maintains the corners, and puts them together into one image.

Last modified: 2013-12-21



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus