Root-013

WEBデザインはPhotoshopをメインで使っていましたが、一人で仕事するようになっていつのまにかIllustratorメインになっていました。

イラレって、
・座標が小数点になってイラッ
・オブジェクトの大きさが小数点になってムカッ

という印象しか無かったんですが、

ちゃんと設定とか気をつけて使うようになると、
あれ、
・スポイトとか超便利
・レイヤー操作とかフォトショより感覚的で良い感じ
・リンクファイル便利。スライスとかも、使い方によっちゃイラレの方が便利なんじゃ・・・

ってなりました。

イラレでWEBデザイン始める時に気をつけること。

photoshopにも言えることですが、新規ファイルのカラーモードだけはWEB用にしましょう。
後から変更はできますが、色味が変わっちゃいます。

新規ドキュメントプロファイルを「WEB」にすれば、単位がピクセル・カラーモードはRGBになってくれます。
アートボードは後からも変更できますし、サイズを入力して変えることもできます。

「プリント」を選ぶと単位がミリメートリ、カラーがCMYKになります。

「線」を使うときの注意点

『線と塗り』これはフォトショには無い概念なので、けっこう戸惑いました。
座標の基準点はパスなのに、線は基本的にパスの「中央」で描画されます。

そのため、線を太くすると「線の太さ÷２」分パスの外に出てしまいます。
すると、見えているオブジェクトの大きさと、W/H に表示されている幅・高さにもズレが生じます。

線は「内側」にした方が整列し易く、数値管理もし易いです。

デフォルトで内側にする方法ってあるの？あったら教えて下さい！！

「線」の位置と整列したときの違い

整列の便利な方法と、線を内側にした場合、中央の場合の違いをまとめてみました。

イラレは選択・整列が便利！

選択ツールを使って、整列していきます。
キーオブジェクトなんかは、フォトショだと選択範囲を作ったりしなくてはいけませんでしたが、
いちいちレイヤーパネルを触らないといけないし、ちょっと面倒。

①選択ツール

複数のオブジェクトを選択

背景になにもない（背景ロックしてる）なら、ドラッグでもOKです。
しかし、そんなにオブジェクトが多くないなら、Shift+Single “1” Crickで選択オブジェクトを増やしていけるので、微調整には一番使えます。

②キーオブジェクトに整列

複数のオブジェクトを選択した　状態で、
基準（キーオブジェクトにしたい方）オブジェクトを選択

複数選択した上で、選択済みのオブジェクトを更にクリックすると、それがキーオブジェクトになります。

その状態で整列を行うと、例えばボタンの上でアイコンを整列したいときなんかにかなり便利！

線が中央だと・・・

こういう整列をする際にも、線が中央だと弊害があるんですよね。

パスで整列するので線がハミ出ます。。

線が内側だと・・・

内側にしておけば気持ちよく整列可能！

イラレでgoogle mapのアイコン作ってみよう

コレですね。

線有りの円を書く

前面にコピーして大きさ・線の色を変える

オブジェクトを選択して

Ctrl + C
からの
Ctrl + F

で、前面に同じオブジェクトをコピーできます。

ちなみに、Ctrl + B

で背面にコピー。Front と Back と覚えましょう。

下のパスを移動

ダイレクト選択ツールで下のパスだけ移動します。マウスでも良いですが、カーソルを利用した方が微調整できて良いですよ。

アンカーポイントの切り替え

最後にアンカーポイントの切り替えツールで移動したパスをクリックすれば、パスのラインをカーブさせてるハンドルが無くなり、角になります。これで完了です。

こういうシンプルな素材は探すより作った方が早い時が多々ありますね（笑

まとめ

今回は本当に基本的なものでしたが、今後もショートカットや便利な使い方を紹介していければと思います。
まだまだイラレ修行中ですが、使っていけばイラレの良さに気付きますよ！