WEB

イラストレーター初心者向け!使い方や知っておきたい初期設定まとめ

イラストレーター初心者向け!使い方や知っておきたい初期設定まとめ
(編集部注*2014年9月16日に公開された記事を再編集したものです。)

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

第1回は「Illustratorって何?」というところから、ダウンロードしたIllustratorをWeb制作に適した環境に設定するところまでを説明していきます。初心者ではない方は、おさらいのつもりで確認してみてください。

Illustratorって?

Illustratorって?

Illustratorとは、アドビシステムズが販売をしているイラスト制作や印刷物(DTP)制作をメインとした有料のデザイン制作ソフトのことです。

利用にあたっては、まずIllustratorのライセンス契約をおこないます。学割や法人契約、年間契約といった料金体系の違いや、Adobeの他のソフトも一緒に使えるセットなどもあるので、自分に適したプランで契約をするようにしましょう。
ちなみに1ヶ月間の無料体験版もあるので、最初はこちらで試してみるのもいいかもしれません。

▼Adobe Illustrator CC

Illustratorでできること

Illustratorでは、主に以下のような作業を行うことができます。

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

もっとも一般的な使われ方になるのは「印刷物(DTP)制作」だと思います。
Photoshop講座でも少し紹介しましたが、Illustratorはベクター画像と呼ばれる、点座標や線の方程式で画像を表現しています。そのため、ロゴデータやイラストデータなどの拡大・縮小するデータを制作するのに適しています。

ビットマップ画像とベクター画像の違い

また、最近ではWebサイト制作でもIllustratorを使用することがあり、最新バージョンのIllustrator CCではWebデザインに特化した機能も充実しています。

Illustratorで作成する場合の注意点

印刷物の制作でよく使用されるIllustratorですが、Web制作で使用する場合はカラー形式の設定に注意しましょう。

カラー形式にはCMYKとRGBの2種類があり、以下のような違いがあります。

CMYK (色料の三原色)

CMYK (光の三原色)

Cyan=シアン、Magenta=マゼンタ、Yellow=イエロー、Key Plate=黒

プリンターなどの印刷物がこの形式になります。「減法混色」という方式で、混ぜると色が暗くなり、黒に近づきます。

RGB (光の三原色)

RGB (色料の三原色)

Red=赤、Green=緑、Blue=青

テレビやPC、デジカメがこの形式で表現されています。「加法混色」という方式で、混ぜると色が明るくなり、3色を混ぜると白になります。

 
もっと詳しく知りたい方はこちらの記事を参考にしてください。

ダウンロードしたら環境を整えよう

ダウンロードしたら環境を整えよう

ここからはWebデザインの制作に適した環境設定にする方法を紹介していきます。

デフォルトでは印刷物制作の設定になっていると思いますので、まずはこちらで設定を確認しておきましょう。

※以下、Macをベースとした記載となっております。Windowsの方は“メニューバーから「Illustrator」を”という部分を“メニューバーから「編集」を”に置き換えて操作いただければ大丈夫だと思います。

※CC以前のIllustratorをお使いの方は、ごめんなさい……

単位の設定

まずは基本的な「単位」の設定をしましょう。

Illustratorでは初期設定が「mm」となっているはずですが、Webの世界では基本的に「pixel(ピクセル)」でサイズを表すので、変更しておきましょう。

1. 「環境設定」⇒「単位」を選択

メニューバーから「Illustrator」を選択し、「環境設定」⇒「単位」を選択します。

1. 「環境設定」⇒「単位」を選択

2. すべての単位を「pixel」に変更

単位の囲いの中の項目を全て「pixel」に設定します。

2. すべての単位を「pixel」に変更

これでWebデザイン制作の第一歩を踏み出せました。

キー入力を1pxに固定する

「1.001px」などの中途半端な数値になっている場合があるので、設定を確認しておきましょう。

1. 「環境設定」⇒「一般」を選択

メニューバーから「Illustrator」を選択し、「環境設定」⇒「一般」を選択します。

1. 「環境設定」⇒「一般」を選択

2. 「キー入力」を「1px」に変更

数値はここで確認できます。
2. 「キー入力」を「1px」に変更

ワークスペースをwebデザイン向けにする

Illustratorを開くと左右にさまざまなパネルが表示されます。まだ何に使うかわからない項目も多いかと思いますが、この左右に表示されるパネルにもWebデザインに適した表示内容があるので、一番最初に最適化しておきましょう。

1. 「ウィンドウ」⇒「ワークスペース」⇒「Web」を選択

メニューバーから「ウィンドウ」を選択し、「ワークスペース」⇒「Web」を選択します。

1. 「ウィンドウ」⇒「ワークスペース」⇒「Web」を選択

少し表示が変更されたのが分かりましたでしょうか。
Webデザインでよく使うパネルが表示されたので、あとあと便利になるかと思います。

カラーモードをRGBにする

ここからは新しいファイルを開いてから設定するものになります。
まずは最初に説明したカラーモードの設定をおこないます。今回はWebデザインをするので「RGB」に設定しましょう。

1. 「ファイル」⇒「新規」を選択

メニューバーから「ファイル」を選択し、「新規」を選択します。
すると「新規ドキュメント」の設定画面が表示されます。

1. 「ファイル」⇒「新規」を選択

2. 「プロファイル」を「Web」に変更

1項目ずつカスタマイズすることも可能ですが、今回は一括で設定変更します。

「プロファイル」の項目で「Web」を選択すれば、「カラーモード」以外の設定もすべてWebに最適な設定にしてくれます。

2. 「プロファイル」を「Web」に変更

念のため、「詳細」も開き、Webに最適な設定になっているか確認をしましょう。

アンチエイリアスの設定

Illustratorで線を作成する場合、線の太さが0.75や0.5といった奇数になると、以下の例のように線がボケてしまいます。これをアンチエイリアスと言います。アンチエイリアスをOFFにすることで、線などがボケてしまうことを防止できます。

アンチエイリアス

1. 「効果」⇒「ラスタライズ」を選択

メニューバーから「効果」を選択し、「ラスタライズ」を選択します。

1. 「効果」⇒「ラスタライズ」を選択

2. 「アンチエイリアス」をなしにする。

これでボケた線になってしまうことを防止できます。

2. 「アンチエイリアス」をなしにする。

まとめ

いかがでしたでしょうか。

今回はこちらの設定までで一旦終了です。次回はIllustratorの基本画面や基本概念などについて紹介していきます。

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

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

この記事を書いた人

LIGブログ編集部
LIGブログ編集部です。噛み合ないコミュニケーションを曖昧な笑顔でごまかしつつ、平日は毎日ニュース/Web制作/ビジネス/生活などのお役立ち記事を配信しています。

こちらもおすすめ

プロの現場で使われているIllustratorの「超速」テクニック

プロの現場で使われているIllustratorの「超速」テクニック

  • 著者高橋 としゆき,ヤマダジュンヤ,大賀 葉子,三浦 悟,鈴木 貴子
  • 価格¥ 2,916(2015/10/26 10:53時点)
  • 出版日2015/03/12
  • 商品ランキング502,666位
  • 単行本(ソフトカバー)256ページ
  • ISBN-104844337688
  • ISBN-139784844337683
  • 出版社インプレス