illustratorでUIデザイン：ボタン量産スクリプト
またillustrator用のスクリプトを作成してみました。
タイトルそのまま、ボタンを沢山作るスクリプトです。
と言っても、ボタンの見た目まで作ってくれるのではなく、四角形のパスでボタンのワイヤーフレームを作ってくれるだけです。
UIデザインを行っていると、ある範囲にボタンをキレイに並べる作業というのがあります。
単に数が決まっていて並べるだけなら良いのですが、ボタンの数を何個表示させるかを検討しはじめると大変になります。
ボタンがタッチできる大きさでボタンの数をできるだけ多く表示させるのを検討するときや、ボタンに表示する文字数を確保しつつボタンを何個まで配置できるかなどを検討し始めると、行や列を増やしたり減らしたりを頻繁に行うことになります。
そのたびに毎度計算機取り出して計算しなければならないので結構手間です。
そこでこのスクリプトを作成しました。
余りの扱い方について
どうしてもキレイに割り切れない、あまりが出てしまうというときがあります。
その時の処理方法をオプションとして幾つか用意しておきました
例：「53 x 53px」のエリアにボタンを配置したとき
1.余りを割り振らない。
文字通り余りは割り振らず、余ったままにしておきます。
その代わり、ボタン縦横サイズも行間・列間もキレイな整数値になるという特徴があります。
ボタンは画像部品だから全て同じ大きさにする必要があるときなどで重宝します。
2.余りをボタンに均等に割り振る
こちらはボタンの間隔をキープしたいときに使います。
その代わり、ボタンのサイズに小数点がでてきてしまうときがあります。
3.余りを間隔に均等に割り振る
ボタンのサイズをキープしたいときに使います。
その代わり、間隔に小数点がでてきてしまうときがあります。
ご活用下さい。
関連記事
UIデザイン作るためのイラレの使い方編
illustratorでUIデザイン：設定編 - Two hats
illustratorでUIデザイン：基本編 - Two hats
llustratorでUIデザイン：応用編 - Two hats
illustratorでUIデザイン：便利なショートカット - Two hats
UIデザイン用の自作スクリプト編
llustratorでUIデザイン：縦横サイズ書出しスクリプト - Two hats
llustratorでUIデザイン：相対座標書出しスクリプト - Two hats
illustratorでUIデザイン：属性抽出スクリプト - Two hats
illustratorでUIデザイン：ボタン量産スクリプト - Two hats
illustratorでUIデザイン：画面遷移図作成スクリプト - Two hats
illustratorでUIデザイン：画像切り出しスクリプト - Two hats
illustratorでUIデザイン：切り出しスクリプトの設定変更 - Two hats
スクリプト作成入門編
illustratorでUIデザイン：スクリプトことはじめ - Two hats
illustratorでUIデザイン：スクリプトの注意点 - Two hats
illustratorでUIデザイン：スクリプトでの座標系 - Two hats
illustratorでUIデザイン：positionとleft, topの違い - Two hats
