【コーダー用】Adobe Illustrator

ワークスペースの表示をコーディング向けにカスタムする

イラレの作業画面のことを「ワークスペース」と呼び、その中に配置する作業ツールを「パネル」と言います。その「パネル」の集合体を「ウィンドウ」と呼びます。

上部メニューの「ウィンドウ」＞「ワークスペース」「Web」のワークスペースを選択するとコーディング時に使うパネルが一通り揃います。

ウィンドウをカスタムしていると意図しない状態になってしまうことがよくあります。その場合は「Webをリセット」から初期状態に戻すことができます。

初期状態では用意されていないですが「アセットの書き出し」もよく使うので表示させましょう。ウィンドウの上部分をクリックすると移動できるので画面左橋に寄せておくのがおすすめです。

ピクセル単位に変換

イラレの初期設定は印刷用の設定になっていることがあるのでWeb用の設定に変更します。

上部メニューの「Illustrator」＞「設定」＞「単位」を選ぶと単位の設定画面が立ち上がるのですべてピクセルに変更します。

「書き出しに追加」をショートカットに追加

XDではComand + Eで書き出しが行えますが、イラレには書き出し用のショートカットが初期状態では用意されていません。

「編集」＞「キーボードショートカット」からショートカットを変更できます。

「メニューコマンド」を選択し、オブジェクト の中から 書き出しに追加 を見つけさらに展開します。

「単一のアセットとして」の右の部分をクリックするとショートカットを登録できるのでComannd + Eを押してください。

現在他のコマンドに割り当てられています。と警告がでますが、使う機能ではないので上書きしてしまって大丈夫です。

CYMKからRGBへの変更

イラレデータにはカラーモードというものがあり、データが印刷用のCMYKで作られているときがあります。そのまま書き出すと画像の色がデザインから変わってしまうことがあるため、RGBに変更します。

「ファイル」>「ドキュメントのカラーモード」>「RGBカラー」を選択することで変更できます。

この作業はデザインデータごとに必要です。

数値の拾い方

要素やテキストを選択すると「プロパティ」ウィンドウに情報が表示されます。

変形：W（横幅）、H（縦幅）
アピアランス：塗り、テキスト色、不透明度
文字：フォント、太さ、フォントサイズ、Line-Height、Letter-Spacing

XDではOptionキーを押すことで要素間の距離を測れますが、Illustratorではその機能はないため、図形ツールを使って要素間に長方形を置き、そのサイズを測るのが手っ取り早いです。

よく使うツール

コーディング時によく使うツールは限られています。

・選択ツール（ショートカットV）：一番よく使うツール。要素を選択します。

・ダイレクト選択ツール（ショートカットA）：パスなどを編集する時に使うツールですが、グループ化された中から特定の要素だけを選択したい時に使えます。普通の選択ツールでもクリックを続ければ選択したい要素まで辿り着けますが、階層が深いものだダイレクト選択ツールを使った方が早いです。

・長方形選択ツール（ショートカットM）：要素間の距離を測る時に使います。

・スポイトツール（ショートカットI）：色を吸い上げる機能です。要素を選択してプロパティから見てもいいですが、複雑にグループ化されたものだとスポイトで吸い上げた方が早いケースがあります。

・文字ツール：文字を打ち込むことは無いですがテキストを選択した後はこのツールが選択されています。選択ツールのつもりで文字を打ち込み始めることがあるので、Escape → Vで選択ツールに持ち帰る癖をつけましょう。

レイヤーパネルの使い方

レイヤーパネルではボード上にある要素をレイヤーで見ることができます。

複雑化しているグループはレイヤーパネルから選択した方が目的の要素を捉えやすい時があります。

右端にある青い四角が付いているものが現在選択中のものです。ここをクリックすることで選択する要素を変更できます。

また左にある目玉マークをクリックすることで、要素を非表示にできます。レイヤーの中から目的の要素を探す時に活用してください。

画像で書き出す

要素を画像として書き出したいときはその要素を選択した状態で「アセットの書き出し」に追加します。

書き出し対象をすべて選択して下部にある書き出しボタンから書き出せます。

各アセットは名前を変更できるので、あらかじめ適したファイル名を付けて置くと後で楽です。

書き出しサイズやファイル形式は下部から選択できます。

グループ化された要素は普通に選択するとグループでしか書き出せません。

グループ化された要素の特定の要素を書き出したい時は、その要素が選択できるまで選択ツールでクリックするか、ダイレクト選択ツールなどで選択します。

そのままだと編集モードになり書き出しに追加できないのでEscキーで編集モードを終了させます。

そうすると書き出したい要素を選択した状態になるのでショートカットキーで書き出しに追加してください。

まとめて画像で書き出す

要素をまとめて画像として書き出したいときはグループ化を利用する方法と、クリッピングマスクを利用する方法があります。

グループ化は選択ツールで目的の要素を囲むように選択し、Command + Gで行えます。

ただほとんどのケースでは背景が邪魔になるので、背景をDeleteで一時的に削除するか、Command + 2で固定するとグループ化の対象外にできます。