Illustratorの基本画面・基本概念について学ぼう「べジェ曲線」「パス」

LIGブログ編集部


Illustratorの基本画面・基本概念について学ぼう「べジェ曲線」「パス」

こんにちは、LIGブログ編集部です。こちらは「Illustratorをはじめて使う人が、ひと通りの基本的な操作ができるようになる」ところまでを目標とした全4回の超初心者向けIllustrator講座です。

前回は「Illustratorって何?」というところから、ダウンロードしたIllustratorをWeb制作に適した環境に設定するところまでを説明しました。
第2回となる今回では、Illustratorの基本画面および基本概念について説明をしていきます。とくにIllustratorの特徴でもある「ベジェ曲線」は、多くの初心者の方が挫折してしまうポイントでもあります。初心者の方はもちろん、初心者ではない方も、おさらいのつもりで確認してみてください。

 

▼目次

Illustratorの基本画面

まずは基本画面について説明していきます。Photoshopとは違う点も多いので、しっかり確認をしましょう。

画面の説明

画面の説明

  • メニューバー
      デフォルトの設定変更やウィンドウに関しては、こちらからおこないます。
  • ツール
      各ツールがアイコンで並べてあります。ショートカットキーを覚えるまでは、こちらのアイコンから利用しましょう。
  • パネル
      パスや書体の設定などをおこなうパネルが表示されます。
  • アートボード
      実際に作業をおこなう領域です。アートボードはベースボードに複数配置することが可能です。

Web制作の際に便利なポイント

印刷物の制作がメインとなることが多いIllustratorですが、Web制作の際に便利なポイントが2つあります。

1. 制作したデザインをCSSで吐き出すことができる

画像の書き出しについてはPhotoshopのほうが使いやすく、画像主体のサイト制作の頃はPhotoshopでの制作が便利でした。
しかしCSS3の登場により、画像でなくとも表現できるデザイン幅が広がりました。そのため、画像を書き出す必要がなくなり、CSS3で表現ができるデザインならIllustratorのほうが便利でもあります。
また、Illustrator自体もWeb制作向けに進化しており、CCからは作成したデザインのCSSを吐き出すことができるようになっています。

2. マルチデバイスのデザイン

ペースボード上には複数のアートボードを作成することが可能です。
そのため、1つのWebサイトの複数ページを並べて制作することや、レスポンシブデザインのようなマルチデバイスに対応するページを並べて制作することができるので、複数のファイルを行き来する必要がなくなります。

Illustratorで知っておきたい基本概念ーベジェ曲線ー

では、ここからが今日の本題です。
Illustratorの特徴の1つである「ベジェ曲線」について解説していきます。実際にIllustratorを操作しながら説明を読んでいただくと、より理解が深まると思います。

ベジェ曲線とは?

ベジェ曲線とは「パス」の計算方法のことです。
難しい計算方法自体は覚えてなくて大丈夫ですので、“パスはベジェ曲線っていう方法で計算されているらしいけど、「点」と「線」を使って描いてるんだな”ぐらいに捉えていただければ、と思います。

パスはPhotoshopでも扱いますが、前回の記事で説明した通りPhotoshopはビットマップ画像のため、拡大縮小による劣化が伴います。その点Illustratorは、ベクター画像のため、拡大縮小による劣化がなく、鮮明に表示されます。
パスで描かれたイラストやロゴを作るのはIllustratorのほうが向いているとされるのは、このためです。

実際にパスで描いてみる

それでは以下、実際にパスで描いてみましょう。

パスの説明

パスは「点」と「線」から成り立っており、それぞれ名称があります。

「アンカーポイント(点)」から出ている「ハンドル」を動かすことでカーブを付け、複雑な形を作成する

「アンカーポイント(点)」から出ている「ハンドル」を動かすことでカーブをつけ、複雑な形を作成することができるようになります。

オープンパスとクローズパス

パスには2種類あり、パスを閉じないオープンパスと閉じるクローズパスがあります。

オープンパスとクローズパス

直線を描く・四角形

ツールから「ペンツール」を選択すると、下記のようなペン型のポインターになります。

まずはまっすぐ線を描いてみましょう。
描き始めたいところに始点を打ち、描き終えたい長さのところで終点を打ちます。

直線を描くー四角形ー

直線を描くー四角形ー

オープンパスの線を描くことができました。

次は四角形を描いていきます。先ほどと同じ手順で各頂点を打っていき、最後に始点となる箇所をクリックします。
※始点のパス部分をマウスオーバーすると、ポインターの右側に「◯」が表示されます。表示された場所でクリックすると始点と終点が重なりクローズパスになります。

クローズパスの四角形を描くことができました

このようにして、クローズパスの四角形を描くことができました。

曲線を描く・曲線

次は曲線を描きます。
まずはツールから「ペンツール」を選択します。

描き始めたいところに始点を打ち、描き終えたい長さのところで終点を打ちます。
ここまでは直線を描くのと同じですが、終点を打ったときにそのまま指をマウスから離さず、そのままドラッグしてください。

曲線を描きます

するとアンカーポイントからハンドルが出てきて、自由自在に曲線を描くことができます。

アンカーポイントからハンドルが出てきて、自由自在に曲線を描くことができます

まとめ

いかがでしたでしょうか。Illustrator、パスについて理解が深まれば嬉しいです。

パスはハードルが高いと思われがちですが、点と線から成り立っている図形だということを意識しつつ、いろいろ描いて練習してみてください。

また、ベジェ曲線の基本についてはこちらの記事「イラレが得意になる!ロゴ作りから学ぶベジェ曲線の基本と疑問点」もぜひ参考にしてください。

以上、最後までお付き合いいただきありがとうございました。全4回のこのシリーズでIllustratorの基本をマスターしていきましょう。

 
▼Illustrator関連シリーズ記事(日々更新)

LIGブログ編集部
この記事を書いた人

この記事を読んだ人におすすめ

こちらもおすすめ

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

  • 著者鷹野 雅弘,茄子川 導彦,鈴木 ともひろ
  • 価格¥ 2,570(2015/11/27 17:47時点)
  • 出版日2014/10/18
  • 商品ランキング608位
  • 単行本(ソフトカバー)256ページ
  • ISBN-104774167967
  • ISBN-139784774167961
  • 出版社技術評論社