読者です 読者をやめる 読者になる 読者になる

Two hats

Design + technologies

illustratorでUIデザイン:ボタン量産スクリプト

またillustrator用のスクリプトを作成してみました。

タイトルそのまま、ボタンを沢山作るスクリプトです。
と言っても、ボタンの見た目まで作ってくれるのではなく、四角形のパスでボタンのワイヤーフレームを作ってくれるだけです。


UIデザインを行っていると、ある範囲にボタンをキレイに並べる作業というのがあります。

単に数が決まっていて並べるだけなら良いのですが、ボタンの数を何個表示させるかを検討しはじめると大変になります。

ボタンがタッチできる大きさでボタンの数をできるだけ多く表示させるのを検討するときや、ボタンに表示する文字数を確保しつつボタンを何個まで配置できるかなどを検討し始めると、行や列を増やしたり減らしたりを頻繁に行うことになります。

そのたびに毎度計算機取り出して計算しなければならないので結構手間です。
そこでこのスクリプトを作成しました。


ボタン量産.jsx

使い方

  1. 四角形ツールでボタンを表示したいエリアをなぞる。
  2. スクリプトを起動し、行数・列数、行間・列間のピクセルサイズを入力する。
  3. 「START」ボタンを押す。

f:id:two-hats:20140904232232g:plain

作成したボタンの枠に対して、既存のボタンのアピアランスなどをコピペしてあげると一瞬にして大量のボタンが作成できます。


余りの扱い方について

どうしてもキレイに割り切れない、あまりが出てしまうというときがあります。
その時の処理方法をオプションとして幾つか用意しておきました



例:「53 x 53px」のエリアにボタンを配置したとき
f:id:two-hats:20140904233230g:plain


1.余りを割り振らない。
文字通り余りは割り振らず、余ったままにしておきます。
その代わり、ボタン縦横サイズも行間・列間もキレイな整数値になるという特徴があります。

ボタンは画像部品だから全て同じ大きさにする必要があるときなどで重宝します。

f:id:two-hats:20140904233246g:plain


2.余りをボタンに均等に割り振る
こちらはボタンの間隔をキープしたいときに使います。
その代わり、ボタンのサイズに小数点がでてきてしまうときがあります。
f:id:two-hats:20140904233633g:plain



3.余りを間隔に均等に割り振る
ボタンのサイズをキープしたいときに使います。
その代わり、間隔に小数点がでてきてしまうときがあります。
f:id:two-hats:20140904233827g:plain


ご活用下さい。