[UI Design] Simple Nine-patch Generator – 9パッチ（9スライス）のジェネレーター
Nine-Patch、もしくはNine-Sliceと呼ばれる、主にAndroid Appなどの開発現場などで使われるボタン画像フォーマットのジェネレーター。主に上下左右に大きさが可変する角丸ボタンに使われるアレを、簡単にWebから生成できるというものです。Nine-Patchがどういうものであるかはこのあたりを参照してください。画像の作り方は簡単で、まずは「Select Image」ボタンからNine-Patch化したいPNG画像を選択。ロードされると右側に表示されるので、あとは拡大に応じて伸長するエリアとコンテンツパディングを指定するだけ。またこの際「Trim」のプルダウンメニューから「Stretch Region」を選ぶ事で、必要な画像部位だけにトリミングしてくれます。なのでPhotoshopを使ってUIデザインをしている場合、いつも通りに画像をアセット保存して出力されたフルサイズのボタンPNGを放り込むだけでオッケー。画像を最小サイズにするのはジェネーレーター側に任せる事ができます。いちいち制作サイドで最小サイズにトリミングする手間が省けます。
またこのジェネレーターでさらに便利なのが、画面中央にある「Interactive Preview」という機能。これをクリックすると、現在のNine-Patch指定で画像がどのように伸縮するのかを、実際にドラッグして挙動を確認する事ができます。これがもう死ぬほど便利で、指定ミスによる想定外の挙動を防ぐ事ができます。あとプログラマーに渡す直前に「この動きでオッケーだよね？」的な確認をするのにも便利です。Nine-Patch画像はPhotoshopだけでも作れるといえば作れるんだけど、こういう便利なツールはどんどん使っていきたいですな。
