• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Components > Nine Slice Tutorial
Nine Slice Tutorial
Components,Beginner
  
August 21, 2017
  
Allison Brebner

Overview

This tutorial shows some examples of how to use the Nine Slice Component to scale images while preserving image corners.  This is handy for all sorts of UI elements such as borders, banners, backgrounds, dialog boxes and buttons.

Prerequisites

  1. Umajin Editor downloaded and installed.

Instructions

Step 1) Create a new blank project in the Umajin Editor to use as a testing platform for our image scaling.

Step 2) Add whatever images you would like to try nine slicing into the images Folder.
Open Umajin Editor → Click File → Open Resources Folder → images → Add your images.

We will be using the following images that you are welcome to use for your own trials.

Step 3) Insert your Nine Slice Component. To add the Nine Slice, click the large plus button to the right of your project name. This opens the Component Selector, as pictured below.We have combined these sample nine-slice ready images into a zip file for you to experiment with, download and decompress the nineslice_images.zip file to use them.

Once you click insert, you will be brought to a menu of your images to select from.

In our next section, we will take you through each of our example images, and how to effectively scale them using Nine Slice.

Examples

Example 1: The Banner

This first image is what Example appears after selecting the banner image to slice.



To properly slice, click and drag the little target flags at the four points along the image. We want to preserve the banner’s tails while scaling only the rectangle. To ensure this, we place the vertical target flags on the inside of the banner tails at the point at which they meet the rectangle. This keeps the shadowing as well as tail shape while the width and height of the rectangle are variable.

This allows us to have a very long message on a banner, as pictured below.

Example 2: The Gray Button

After selecting the grey button to slice, it is important to be wary of the gradient features. When scaling this image, we want the gradients to be preserved. So the vertical flags will go inside the corners to preserve them, and the horizontal flags will be placed just above the bottom gradient and just below the top gradient.

After saving, this is the button that appears. As you can see, the borders are very heavy in this image. We can adjust the scale of the border down to about 25 points using the ‘Border scale’ slider under the Properties tab.

 

Below is the image with a Border scale of 25.

Now we can make a button of a different shape and scale with preserved gradients and corners like below.

Example 3: Gold Button

After selecting the gold button to slice, it is important to be mindful of the gradient features. When scaling this image, we want the gradients to be preserved. So the vertical flags will go inside the corners to preserve them, and the horizontal flags will be placed just above the bottom gradient and just below the top gradient.

After saving, the gold button appears. Now we can make a button of a different shape and scale with preserved gradients and corners like below.

Example 5: Sticky Note

After selecting the sticky note to slice, it is important to note the special feature of the curl in the bottom left corner. When scaling this image, we want this and the shadowing preserved. So, the left vertical flags will go inside the left corner to where the shadowing stops, and the bottom horizontal flag will be placed just above the bottom where the shadowing from the curl ends.

After saving, the sticky note appears. Now we can make a note of a different shape and scale with preserved curls and shadowing.

Example 5: Panel

After selecting the panel to slice, it is important to note the rounded corners that we want to preserve when scaling. So, the left vertical flags will go inside the corners to where the curve stops, and the horizontal flags will land just above the bottom corner and just below the top corner.

After saving, the panel appears. Now we can make a note of a different shape and scale with preserved curved corners.

Example 6: Speech Bubble

After selecting the speech bubble to slice, it is important to note the bubble tail and the rounded corners that we want to preserve when scaling. So, the left vertical flag will go inside the tail, the right vertical flag will go inside the right corner, and the horizontal flags will land just above the bottom corner and just below the top corner.

After saving, the speech bubble appears. Now we can make a note of a different shape and scale with preserved curved corners and bubble tail.

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home