technologiesこの広告は、90日以上更新していないブログに表示しています。WebデザインFireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のillustratorはCS6なので、CCにはより最適な設定があるかもしれません。1.新規ドキュメントのプロファイルを「Web」にする。併せて「新規オブジェクトのピクセルグリッドに整合」のチェックを外す。illustratorの新規ドキュメントのデフォルトは印刷物に最適な設定になっています。Webを選ぶことによって、ある程度画面に表示するものに最適な設定に変わります。「ピクセルグリッドに整合」は後述しますが、座標が整数にならなくなってしまうため外しておいて下さい。※ピクセルグリッドに整合のチェックを外すと、プロファイルは「カスタム」と表示されます。2.「表示>ピクセルプレビュー」にチェックを入れる。illustratorはベクター形式のデータで、どこまでもズームしていってもキレイに表示できるという特徴があります。UIなどピクセルベースのものをデザインする際にはディテールを確認したいがためズームしたときにキレイに表示されてしまうと、実際の見栄えと異なってしまうので少し厄介です。このオプションを入れることによって拡大してもピクセルの粗さはそのままになります。3.上記の設定の後、「表示>ピクセルにスナップ」をチェックする。このオプションにチェックを入れると、新しいオブジェクトを作るときに整数のピクセルにスナップされるようになります。UIの座標系では小数点まで指定することはほぼないので、このチェックは忘れずに入れるようにしましょう。4.変形パネルの「ピクセルグリッドに整合」のチェックを外す。illustratorの線デフォルトは、「内側」でも「外側」でもなく「中央」です。その状態でピクセルピッタリに見えるようにするオプションです。〜.5px」という中途半端な数値になってしまいます。座標指示するときに少々厄介になるのでこのオプションは外して、線は「内側」にしておいてください。5.アピアランスパネルのオプションで「新規アートに基本アピアランスを適用」のチェックを外す。このチェックが入っていると新しい図形を描くたびに、デフォルトの塗り白+黒線のアピアランスになってしまいます。ここで厄介なのが、線が「中央」に戻ってしまうことです。(毎回毎回内側の線にするのが億劫で・・・)このチェックを外しておくことによって、直前のアピアランスを保持したまま新しい図形が描け、作業の効率化につながります。6.「環境設定>一般>キー入力」を「1px」にする。この設定を1pxにしておくと、オブジェクトを選択して上下左右キーを押した時に、それぞれの方向へ1pxずつ動くようになります。Shiftキーを押しながらだと10pxずつになります。7.「環境設定>単位」で単位をピクセルにする。座標系の単位がピクセルになります。文字はピクセルにするかポイントにするかは、開発対象のシステムごとに変更したほうが良いと思いますが、illustratorのドキュメントには解像度の概念が無いはずなので「ピクセルの大きさ=ポイントの大きさ」になります。8.「環境設定>グリッド・ガイド」でグリッドのサイズを変更する。開発対象のシステムごとに最適なグリッドにします。Androidの場合は6の倍数ごとがよいので「グリッド6px、分割数6」、Windows8の場合は10の倍数ごとがよいので「グリッド10px、分割数10」などに設定します。9.「アートボード」のサイズを画面サイズに合わせる。「プリセット」または「幅・高さ」を指定してアートボードのサイズを変更することができます。10.「表示>定規>ビデオ定規を表示」でアートボードごとに表示される定規を設定する。この定規はアクティブなアートボードだけにしか表示されないので、現在どのアートボードが選択されているかがわかりやすくなります。11.開発対象のシステムで使用するフォントをシンボルに設定しておく。使うフォントをシンボルとしてあらかじめ登録しておくと、いちいちフォントの種類を選ぶという手間が省けるようになります。12.上記の設定を再利用できるよう「テンプレートに保存」をしておく。11番までで下ごしらえはほぼ終わりなのですが、毎度毎度設定するのは手間です。そこでテンプレートとして保存しておくと、次回から上記の設定を行っている新規ドキュメントを作成できるようになります。11番で設定したシンボルの設定も引き継ぐので11番は必ず行っておいたほうが良いと思います。使う画面サイズごとにテンプレートを数種類用意しておくとよいでしょう。私が作成したテンプレートをダウンロードできるようにしました。illustratorのtempletesこれらの設定を行うと、とりあえずUIデザイン用のファイルを作れる下準備ができたことになります。次は実際にデザインをしていく際のTIPSを紹介したいと思います。topの違い座標をいじるようなスクリプトを作成していると、たまに予測不...2014-10-03illustratorでUIデザイン:属性抽出スクリプト文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してく...2014-09-11illustratorでUIデザイン:スクリプトことはじめAdobeの製品は自分で書いたプログラムを動かすことができ、バッ...2014-09-04illustratorでUIデザイン:ボタン量産スクリプトまたillustrator用のスクリプトを作成してみました。タイトルそ...2014-09-03illustratorでUIデザイン:便利なショートカット今回は便利なショートカット集です。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。