Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード

これだけは押さえたい!イラストレーター初心者のための基本機能10選と使い方

村上

こんにちは。ライターの村上です。

Illustrator(イラストレーター)を使ってみたいけど、「初心者で他のツールとの違いがわからない」「使い方を知りたい」という方もいますよね。

そこで今回は、Illustratorでできることや、最初に知っておきたい10個の機能と使い方について紹介します。

※なお、記事の前半ではIllustratorを正しく使うための基礎知識を紹介しています。今すぐに使い方を知りたい!!という方は、こちらをクリックすると、該当箇所まで一気にスクロールします。

※この記事は2022年5月に編集部が情報を更新しました

Illustratorとは?

まずは簡単に、Illustratorがどんなツールなのか紹介してきます。

Illustrator(イラストレーター)とは、アドビが販売をしているテキストと画像を組み合わせたレイアウトの作成やデザインに適したツールのこと。「イラレ」と略されることも多いです。

利用にあたっては、まずIllustratorのライセンス契約をおこないます。学割や法人契約、年間契約といった料金体系の違いや、Adobeの他のソフトも一緒に使えるセットなどもあるので、自分に適したプランで契約をするようにしましょう。

ちなみに7日間の無料体験もできるので、最初はこちらを試してみるのもいいかもしれません。

参考:Adobe Illustrator

利用開始前に:Illustratorの基本知識

いきなり利用する前にまずは、基本知識のおさらいです。Illustratorを使いこなすためにはちょっとした手間を惜しんではいけません。

選択ツールとダイレクト選択ツール

選択ツールとダイレクト選択ツールの解説画像

選択ツールダイレクト選択ツールは、形は似ているけれど機能としては別物です。選択ツールはオブジェクトを選ぶときに使い、ダイレクト選択ツールはアンカーポイントを選択して図形の形を変える時に使います。

どっちでもいいや、という使い方をしないように気をつけましょう。

パスの名称

パスの名称の解説画像

Illustratorでは図形を構成する要素のことを「パス」といいます。パスはアンカーポイント(端点)同士をセグメント(線)で結んで構成されます。曲線の場合はアンカーポイントから方向線が伸び、方向線の形は先端の方向点で調整ができます。

さらに作成した図形やイラストのことを「オブジェクト」といいます。

Illustratorで知っておきたい基本機能10選

1. ペンツール

ベジェ曲線練習の解説画像

ペンツールは、ツールバーのペンマークをクリックすることで使えます。

イラレの操作方法

まずクリックでアンカーポイントを作成し、2つ目のアンカーポイントをクリックすると、セグメントが作成されます。線を終了する場合はEnterキーを押しましょう。

ペンツールの練習は直線のみで描けるA、曲線で描くS、曲線から直線の切り返しが必要になるP、総仕上げとしてRの練習をしてみるのがおすすめです。

Rの赤い点は、上方向にドラッグしてしまうと形は整いますが、次の線を引くときに曲がってしまう、初心者が「ベジェ曲線の意味がわからない」となりがちな部分です。

回避方法としては、赤い点をもう一度クリックすることで曲線から直線に切り替えるのですが、2.でもっと簡単な方法をご紹介します。

2. アンカーポイントの切り替えツール

アンカーポイントの切り替えツールの解説画像

曲線が苦手な場合でも、アンカーポイントの切り替えツールで直線を曲線に変更すると、簡単に曲線が描けるようになります。アンカーポイントに切り替えるには、ペンツールの状態で、optionキーを押し続けます。

SとRを直線だけで作成して、ペンツールの中にあるアンカーポイントの切り替えツールで、図の赤色部分にあるアンカーポイントを矢印の方向にドラッグしてみましょう。

最後にダイレクト選択ツールを使って、アンカーポイントや方向線の位置を綺麗に整えれば、曲線で構成されたSとRの完成です。

3. パスの編集

パス編集の練習の解説画像

1.〜2.で確認した機能を使って、パスを編集します。ハートマークなどの曲線と直線を含むオブジェクトがおすすめです。

これをマスターしてしまえば、ペンツールで直線をざっくりと描いて、思い通りのイラストに調整することができるようになります。

4. ナイフツール・はさみツール

ナイフツールとはさみツールの解説画像

図形を分割するために使うのがナイフツールはさみツール。ナイフツールはクローズパスからクローズパスを作る、はさみツールはクローズパスからオープンパスを作るという違いがありますので、加工過程を考慮してどちらを使うか決めます。

クローズパスというのは四角形などのどこも開いていないパス、オープンパスというのは始点と終点のアンカーポイントが離れているパスのことです。

はさみツールはその名の通り、はさみのマークをクリックすることで使えます。なお、イラストレーターのバージョンによってはデフォルトで表示されていない場合も。その場合は、消しゴムマークを長押しすることではさみツールを選択できるようになります。

イラレではさみツールがでてこない場合の対処方法

ナイフツールもはさみツールと同様、表示されない場合があります。その際は、画面上の「ウィンドウ」→「ツールバー」をクリックし、[基本]から[詳細]に切り替えてください。

イラレでナイフツールがでてこない時の対処方法

切り替え後、同じく消しゴムマークを長押しすることで、ナイフツールを選択できるようになります。

5. ブレンドツール

ブレンドツールの解説画像

2個以上のオブジェクトから中間のオブジェクトやグラデーションを作るツール。カラーバリエーションや途中の図形を作るのに役立ちます。

間のオブジェクトを作るステップ数の指定と、グラデーションを作るスムーズカラーの2種類の機能があります。「オブジェクト」メニュー→「ブレンド」→「ブレンドオプション」から選びましょう。

6. スウォッチパネル

パターンの登録の解説画像

カラーパレットとして使う他に、作成したオブジェクトをドラッグすると、新しいパターンとして登録できます。最背面に塗りも線もない正方形を配置して、スウォッチパネルにドラッグで登録すると、その部分のパターンを作成できます。

CS6からは「Illustrator新機能で簡単にシームレスパターンを作ろう!」の手順をご覧ください。とっても簡単!

7. 透明パネル

描画モードの解説画像

描画モードの特徴を押さえておきましょう。描画モードは透明パネルの「通常」と書いてあるボタンで調整をします。

オブジェクトを重ねたときの色を調整する機能で、絵の具と同じように色を混ぜたい場合は比較(暗)〜焼き込みカラーまでのいずれか、逆に重ねて明るくしたい場合は比較(明)〜覆い焼きカラーのいずれかを選択します。

8. パスファインダパネル

パスファインダの解説画像

ペンツールで描かなくても、複数の図形を組み合わせてイラストを作れるのがパスファインダパネル。まずは上の形状モード4つのボタンを使って、パズルのように組み合わせたり、型抜きしたりして色々なオブジェクトを作成してみましょう。

図ではまとめて重ねていますが、合成や型抜きは1つずつ行うのがポイントです。

9. パスのオフセット

パスのオフセットの解説画像

作成したオブジェクトの周りに同じ形状のパスを作成する場合に使います。オブジェクトの縁取りやロゴマーク、シールの外枠づくりなどに活用します。

パスのオフセットは「オブジェクト」メニュー→「パス」→「パスのオフセット」で行います。角を丸くしたい場合は「マイター」を「ラウンド」に変更しましょう。

10. ライブトレース(画像トレース)

ライブトレースの解説画像

写真などのビットマップ画像をアンカーポイントを持つベクトル画像に変換する機能です。写真からざっとトレースしたいときや、色面分割をして配色の練習をしたいときなどに役立ちます。

図のように色面分割をする場合は4色〜6色でトレースをして、同じ色同士をグループ化しなおすと簡単にできます。同じ色を選択するには「選択」メニュー→「共通」→「塗りと線」で選びましょう。もちろん、ライブトレース後はグループ化されているので、グループ解除するか、グループ選択ツールを活用してくださいね。

IllustratorとPhotoshopの違い

初心者だと混同してしまうことも多いのが、IllustratorとPhotoshopという2つのソフト。両者の違いをざっくりと説明すると、Illustratorはロゴやイラスト・写真のレイアウトが得意なソフト、Photoshopは写真加工や合成が得意なソフトとされています。

とはいえ、IllustratorとPhotoshop、どちらも同じことをできる場合もあり、違いを理解していないと実はとっても効率が悪いことをしていた!なんて場合も。

自分が作りたいものを作るには、どちらのソフトを使うべきなのでしょうか?両者の機能や用途の違いを見ていきましょう。

画像の種類|ベクター画像とビットマップ画像

IllustratorとPhotoshopの大きな違いは、画像の種類が違うということ。画像はビットマップ画像とベクトル画像の2つに分けることができます。

ビットマップ画像とは、ドット絵のような小さな四角形の集まりで画像を表現したもの。拡大すると、ドットの集合体であることがハッキリわかるようになります。つまり、拡大すると粗くなるということです。(画像左)

一方ベクター画像は、点座標や線の方程式で画像を表現されたもの。拡大しても粗くなることはありません。(画像右)

図形を使ってビットマップ画像とベクター画像の違いを表す画像

Photoshopはビットマップ画像(拡大すると荒くなる)、Illustratorはベクター画像(拡大しても荒くならない)、この違いにより各ソフトの得意分野にも違いがでてきます。

イラストレーターでできること

今お伝えしたように、イラストレーターはベクトル画像を扱います。そのため、はっきりとした線や色を表現することが得意です。
 

イラストレーターの主な機能
  • 円や三角などの図形の作成
  • ペンツールで絵を描く
  • 色をつける
  • 図形や写真のレイアウト

上記のような機能を応用することで、ロゴの作成やイラストを描くことができます。なお、このページの最後では、イラストレーターを使ったロゴの作り方やイラストの描き方に関する記事も紹介しているので、ぜひ合わせてご覧ください。

イラストレーターを使って作成した画像は以下の通り。

▼テキストとイラストのデザインはIllustrator向き

出典:https://liginc.co.jp/575961

 

フォトショップでできること

一方、フォトショップはビットマップ画像を扱います。ドットの一つ一つに色をつけることができるため、ベクトル画像ではできない細かい色や陰影の強弱の表現が可能です。
 

フォトショップの主な機能
  • 色や明るさなどの細かな調整
  • 写真の加工(顔のシミやシワをなくす等)
  • 写真の切り抜き
  • ブラシで透明度や筆圧を再現

上記のような機能を使うと、以下のような画像が作成できます。

▼写真がメインデザインの場合はPhotoshop向き

出典:https://liginc.co.jp/583391
 

▼Photoshopについて詳しく知りたい人はこちらの記事をご覧ください

各ソフトの使い分け例

よりイメージを膨らませるために、写真を使ってポスターを作成する場合を例に各ソフトの使い分け例を見てみましょう。
 

写真を使ってポスターを作成する流れ
  1. Illustratorでロゴを作成する
  2. Photoshopで写真の編集・加工をする
  3. 加工した写真をイラストレーターに読み込む
  4. Illustratorでテキストや画像を配置する

上記のように、それぞれのソフトの特性を活かしながら、デザインを作成していきます。

職種による使用ソフトの違い

また、職種によっても、主にどちらのソフトを使用するかの違いがあります。
 

Illustratorを主に使用する職種例
  • DTPデザイナー
  • キャラクターなどのイラストレーター
  • ロゴ制作
Photoshopを主に使用する職種例
  • Webデザイナー
  • フォトグラファー
  • グラフィックデザイナー
  • 水彩画や油絵のような塗り重ねて書くテイストのイラストレーター

もちろんこれらは一般的な例。両方使えることが必須!という場合もたくさんあるので、あくまでも参考程度にご覧いただければ幸いです。

少々長くなってしまいましたが、Illustratorがどんなツールなのか、どんなことができるのかを紹介してきました。

ここまでの内容をまとめると・・・

Illustrator Photoshop
特徴 ベクトル画像で、拡大縮小をしても画像が荒くならない ビットマップ画像で、繊細な色遣いや陰影をつけられる
できること 図形を崩さずに拡大・縮小 写真の切り抜き、合成・加工、色や明るさの設定、ブラシで透明度や筆圧を再現
向いている制作物 作字、ロゴ、図形 画像の加工・編集

ということになります。

次のステップ:Illustratorのさらに詳しい使い方

Illustrator上達のコツは、とにかくさまざまなものを真似して作ってみること。チラシやポスターなどはほとんどIllustratorで作られています。色々な機能を活用して、たくさん練習してみてください。

この記事の他にもIllustratorに関する記事はたくさんあります。併せてご覧ください!

初心者向け

▼初期設定について知りたい方はこちら

▼まず最初に覚えておきたいことはこちら

▼実際に手を動かしてみたい方はこちら

中級者向け

「ググってわからないこと」が一瞬で解決するかも?

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します!

▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
デジタルハリウッドSTUDIO by LIG