プロの現場では必須！　新人デザイナーに伝えるIllustratorの基礎

概要

新人が入るたびにIllustratorを教えていたけれど、人によって解釈が違ってしまったので文章でまとめます。
他の会社の人も参考にしてください。

ファイルの作成方法

「ファイル」→「新規」から、作りたいものを選択（なければカスタマイズ）。単位のpxとmmを間違えないように（あとで変えられるけれど）。

webの場合はアートボードを1920pxなのか1280pxにするのかファイルで統一します。
制作するwebサイトのレスポンシブの切り替えを何段階にするかによって自動的に決まります。

例：横幅1000pxの場合1280pxで作成など。

ガイドライン

適切な場所にガイドラインを引いてから始めます。
ノーガイドラインとかやっちゃダメ。それはアートになってしまう。

Webの場合

Widthに合わせてガイドラインを作成。そこからはできるだけはみ出さないように。
わざとはみ出す場合はネガティブマージンなどをCSSの作成方法を考えながらレイアウトします。

紙の場合

紙面の中央、トンボ、ドブ、ノド、小口などに適切にガイドを引きます。
ノドや小口などは、テキストの級数を考え、ベタ組みなのか、一歯詰めなのか、テキストがきちんと組まれるように数値を計算した上で設定します。
（級数と文字数を考えると自動的に決まります。1Q=0.25mm）

レイヤー

印刷、Webなどその後の後工程のことを考えてレイヤーを作ります。海外で使用する場合も考えて、レイヤー名は英語に統一。

Webの場合は下記のようにします。
基本はSASSの構成ファイル名に合わせるけれど、粒度によって要調整。
* Header
* Footer
* Text
* Icon
* Images
* Button
* Background

こうすると、コーディングの時に迷わなくて済みます。

リンクファイル

基本はPSDファイルをリンクします。
格納場所は、同一階層状のLinksフォルダ。
リンクファイルがJPGの場合はPhotoshopでPSDへバッチ処理、PSDへ変換してから使用します。理由は、JPGファイルやTiffをリンクすると、どんどんファイルが重くなって取り回しが悪いから。。

アートボード

アードボードは整数値のxy軸から開始。
複数アートボートを作るときはそれぞれの開始位置を「-5000,0」「-3000,0」などにします。
こうすると、それぞれのアートボートの移動が整数値になり動かしやすくなります。
また、アートボードの名称は「PC」「SP」などわかりやすくつけます。
一括で書き出す場合に、ファイルがわかりやすくなるからです。

ファイルの保存方法

ファイル名

ファイル名は下記のようにします。

• 180209-hogehoge-hogehoge-v1.0.ai

最初は日付、続いてクライアント名、その先に案件名、最後にバージョン。
Ver情報をつけておくと、何回構成入ったかすぐわかって良いです。
v2.0へアップデートするときは大きな修正が入ったとき。
それ以外は0.1の方をアップデートしていきます。

　保存方法

普通に保存でOK。ただし、Illustratorは下位互換とはいえ、基本は下位保存はしません。（ファイルのアウトラインが取られることがあるから。）

また、PDF互換ファイルのチェックは外します。
PDF互換ファイルにチェックを入れると、PDFで確認できるようになる代わりにファイルが重くなります。PDFで確認したいなら、別にファイルを作成します。

納品ファイルについて

パッケージから全ファイルを収集してそれを納品します。
注意点としては、リンクファイル内にさらにリンクファイルがあると、それは溢れるので注意。

覚えておくべきショートカット

最初にツールパネルのショートカットは全て覚える。ツールの切り替えは、マウス移動ではなくキーボードで行うこと。
例：「v」→移動、「s」→拡大縮小など。

こうすると、オブジェクトを10px移動移動したいときは、
1. オブジェクトを選択
2. 「v」をクリックした後に「enter」をクリック
3. 10pxと入力
で、できるのですごく効率的。拡大縮小なども同様。

これ以外にもよく使うものは常にショートカット。

環境設定について

選択範囲・アンカーについての項目で「オブジェクトの選択範囲をパスに制限」にチェックを入れること。ここにチェックを入れると、下にあるオブジェクトが、上のオブジェクトをロックしなくても選択できるようになるので、ものすごく便利。

以上

おそらく役立つ情報

痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

• Qiita　プログラミングに関する情報はこちら
  http://qiita.com/nadonado

• Twitter　日々のつぶやきはこちら
  https://twitter.com/hironado