Illustratorを効率よく使おう!

Bigmacでは、Webデザインでは主にPhotoshopを使用していますが、ここ最近印刷物やロゴの制作なども多く、Illustratorを使用することが多かったので、Illustratorの基本的なことから効率良くIllustratorを使う方法まで初心者向けにまとめていきたいと思います。

Illustratorとは?

IllustratorとPhotoshopの違いの記事でも書かれていますが、Illustratorとは、アドビシステムズが提供しているイラスト制作や印刷物(DTP)制作をメインとした有料のデザイン制作ソフトのことです。また、Illustratorでは以下のようなことができます。

・印刷物(DTP)制作
・ロゴデータ制作
・イラスト制作
・Web制作(デザイン制作)

Photoshopでは点の集合体で画像を表現するのに対し、llustratorはベクター画像と呼ばれる、点座標や線の方程式で画像を表現しています。そのため、拡大・縮小しても画像が荒れることがないので、ロゴデータやイラストデータを制作するのに適しています。余談ではありますが、IllustratorやPhotoshop、名称が長いので、「イラレ」や「フォトショ」と呼ばれております。

Illustrator使用時確認したい設定

では、Illustratorを使用する際に、最初にやっておくといい設定などを挙げたいと思います。Webなのか印刷物なのかで設定が変わってきますので注意しましょう!

環境設定

[編集]→[環境設定]で様々な設定をしていきます。

単位の設定

[編集]→[環境設定]→[単位]

印刷物では用紙サイズなどミリメートルを使うことが多いです。比べてWebではピクセルを使用するので以下のように設定しましょう。

Web:全てピクセル
印刷物(DTP):一般、東アジア言語のオプションはミリメートルに、線や文字はポイント

一般の設定

[編集]→[環境設定]→[一般]

キー入力
Web:1px
印刷物(DTP):0.1mm

ガイド・グリッドの設定(任意)

[編集]→[環境設定]→[ガイド・グリッド]

こちらはガイド機能やグリッド機能を使用するのであれば設定しておくといい項目となります。Web:グリッドの項目の単位をpxに。グリッド・分割数の数値は任意で問題ありません。ピクセルグリッドを表示にもチェックしておくと便利かも!印刷物(DTP):単位がmmになっていれば問題ありません。

ワークスペースの設定

IllustratorやPhotoshopにはワークスペースという機能があります。これは、あらかじめ想定されるような作業(Web、トレース、レイアウトなど)をするにあたり操作しやすいようにパネルやツールの表示・並びを切り替えてくれる機能です。特にWebの場合は、ワークスペースをWebにして作業を進めていくといいでしょう。こちらを元に自分の使いやすいようにパネルを配置・表示していって、オリジナルのものを保存することもできるので、ぜひぜひ活用してみてください!

新規ドキュメントを作成する際の設定

制作を開始する際に、まずは新しくドキュメントを作成しますが、その際に確認しておきたい点があります。

カラーモードの設定

Web:RGB
印刷物(DTP):CMYK

RGBとCMYKに関しては、こちらの記事で詳しく書かれています。
RGBとCMYKの違いとは?

ラスタライズ効果

Web:スクリーン(72ppi)
印刷物(DTP):高解像度(300ppi)

プレビューモード

Web:ピクセル
印刷物(DTP):デフォルト

以上で各種設定は終了です。制作前にこのような設定をしっかり行っていくことで、効率よく作業を進めることができたり、入稿時のミスを防ぐことができたりするのでぜひ参考にしてみてください。

Illustratorのショートカットキー

Illustratorを使用する際、ショートカットキーを覚えておくと格段に作業効率があがります。覚えるのは難しいかもしれませんが、使っていくうちに自然と覚えていきますのでなるべくショートカットキーを使って作業していくといいでしょう。以下様々なショートカットキーをWindowsを基準に紹介させていただきますが、Macの場合ほとんどがWindowsのCtrlキーをCommandキーに変えていただければ大丈夫です!

画面表示

スペースキー:手のひらツール
スペースキー + Ctrl:拡大ツール
スペースキー + Ctrl + Alt:縮小ツール
Ctrl + +:画面中心に向かって拡大
Ctrl + −:画面中心に向かって縮小
Ctrl + 1:100%表示
Ctrl + 0:アートボード表示
Alt + Shift + Ctrl + Y:オーバープリントビュー
Alt + Ctrl + Y:ピクセルプレビュー
Ctrl + Y:アウトライン・プレビュー表示の切り替え
Ctrl + ¥ : グリッドの表示・非行事切り替え
Ctrl + U : スマートガイドの表示・非表示
Ctrl + R : 定規の表示・非行事
Tab : ツールバー・パレットの表示・非表示切り替え
Ctrl + 5 : ガイドを作成
Ctrl + : : ガイドを表示/非表示

ツール切り替え

V : 選択ツール
A : ダイレクト選択ツール
P : ペンツール
Enter : ペンツールの描画を終了
Shift  +   + : アンカーポイントの追加ツール
– : アンカーポイントの削除ツール
Shift + C : アンカーポイントの切り替えツール
T : テキストツール
¥ : 直線ツール
M : 長方形ツール
L : 楕円形ツール
B : ブラシツール
N : 鉛筆ツール
U : メッシュツール
Shift + E : 消しゴムツール
R : 回転ツール
Shift + R : ワープツール
C : はさみツール
G : グラデーションツール
W : ブレンドツール
I : スポイトツール
Shift + O : アートボードツール(CS3から)
Q : なげなわツール
P : ペンツール
E : 自由変形ツール
O : リフレクトツール
S : 拡大・縮小ツール
K : ライブペイントツール
Z : ズームツール
Shift + K : スライスツール

図形描画

スペースキー + ドラッグ : 描画位置の変更(図形描画中のみ)
Alt + ドラッグ : 中心位置から描画(長方形・角丸・楕円形・多角形ツールのみ)
ドラッグ中 ↑ または ↓ : 角丸の調整・角の増減(角丸・多角形・スターツールのみ)

配色

F6 : カラーパネルの表示
Shift + X : 塗りと線を入れ替え
/ : 塗りまたは線をなしにする

レイヤー

F7: レイヤーパネルの表示
Ctrl + L : 新規レイヤー作成

オブジェクト・配置

Enter: 移動(オブジェクト選択時のみ)
Ctrl + D : 直前の変形を繰り返し
Ctrl + Z : 前の処理を取り消す
Ctrl + Shift+Z : 取り消した処理をやり直す
Shift + Ctrl + M : 移動
Alt + Shift + Ctrl + D : 個別に変形
Ctrl + J : パスの連結(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + Alt + J : パスの平均(ダイレクト選択ツールでアンカーポイント選択時のみ)
Ctrl + 7 : クリッピングマスクの作成
Ctrl + Alt + 7 : クリッピングマスクの解除
Ctrl + ] : オブジェクトを前面に
Ctrl + [ : オブジェクトを背面に
Ctrl + Shift + ] : オブジェクトを最前面に
Ctrl + Shift + [ : オブジェクトを最背面に
Ctrl + C : コピー
Ctrl + F : 前面(Front)へペースト
Ctrl + B : 背面(Back)へペースト
Ctrl + Shift + V : 同じ位置へペースト
Ctrl + G : グループ化
Ctrl + Shift + G : グループ解除
Ctrl + 2 : 選択項目をロック
Ctrl + 5 : 選択項目をガイドに設定

文字

Ctrl + T : 文字パネル表示

カーソルを文字間に置いて
Alt + ← または → : カーニング20/1000em動かす

文字列を選択して
Alt + ← または → : トラッキング20/1000em動かす

文字を選択して
Ctrl + Shift + > : 文字を2pt大きくする
Ctrl + Shift + < : 文字を2pt小さくする
Alt + Shift + ↓ : ベースラインを2pt下げる
Alt + Shift + ↑ : ベースラインを2pt上げる

段落を選択して
Alt + ↑ : 行間を2pt減らす(横書きのみ)
Alt + ↓ : 行間を2pt増やす(横書きのみ)

以上、主に使用するものを挙げましたが他にも様々なショートカットキーがあります。また、カスタマイズでショートカットキーを登録することもできるので効率よく作業ができるように一度見直してみてください。

イラレがおもーいとき・・・

Illustratorを使って作業をしていると、はじめはさくさく動いていたはずなのに、だんだんと動きが遅くなってきて作業がなかなか進まない・・・・!という事態によく陥ります。そんなとき、少しでも動作を軽くするための方法をご紹介させていただきます。

リンクされたEPSに低解像度の表示画像を使用

Illustratorで画像を配置する際、多くの場合はepsに変換したものを使用するかと思います。このepsをプレビューの際に低解像度で表示するという設定です。

[編集]→[環境設定]→[ファイルの管理・クリップボード]こちらで「リンクされたEPSに低解像度の表示用画像を使用」にチェックを入れましょう。

フォントプレビューをオフ

[編集]→[環境設定]→[テキスト]こちらで「フォントプレビュー」のチェックをはずします。

使用する画像ファイルをできるだけ実寸サイズに

illustratorで画像ファイルを配置して使う場合、配置する画像ファイルを実際に使用する実寸サイズ(100%)にしておいたほうがパフォーマンスが良いです。当初の予定していたサイズより後からも大きいサイズで使用したかったり、画像をトリミング拡大して使いたいケースもあったりするので、ちょっとだけ余裕を持たせて、使用予定の実寸サイズよりも少し大きめの画像サイズ(110%~120%)にするといいと思います。

これだけでもだいぶ改善はされるかと思いますが、それでも多く画像を配置していたりすると限界があります・・・・そんなときはCtrl + Yでアウトライン表示で作業をすると、文字の入力などはスムーズになります。また最近は画像を配置するのをある程度形が出来上がってからにしたりしています。動作が遅くなるだけで作業効率がぐっと下がってしまうので、気をつけて作業していきたいですね。

このエントリーをはてなブックマークに追加

筆者

M.Nakayama

Bigmac inc. 制作部所属。 前職でBigmacと出会い、2015年6月制作部の立ち上げと共に入社。オンとオフの切り替えをしっかりすることをモットーに、仕事の日はがっつり仕事、休みの日は子どもと目一杯遊び、家事に励むようにしています。 Webデザインからサイト構築まで幅広く携わっていますが、基本的には人が作った綺麗なデザインを寸法の狂いなくコーディングしていくことが好きで、難しいものができたときほど達成感・やりがいを感じます。シンプルでフラットなデザインが好物です。

筆者が最近執筆した記事