Illustrator初心者が見ておきたい使い方と初期設定まとめ



Illustrator初心者が見ておきたい使い方と初期設定まとめ

デザイナーやイラストレーターにとって必須ツールとなっているIllustrator。今年で販売から28年を迎え、未だに進化し続ける Illustrator について迫ってみたいと思います。難しそうだから Illustrator を敬遠してきた方、有料ソフトだから敬遠してきた方、自分の守備範囲”ペイント”で満足している方、Illustrator の可能性を知ってみてください。

目次
  1. Illustratorとは
  2. Illustratorでできること
  3. イラストの作成
  4. グラフィックデザインの作成
  5. web&モバイルデザイン
  6. 初期設定と環境設定
  7. 新規ドキュメント作成時
  8. 単位の確認
  9. グリッド線の設定
  10. ワークスペースの最適化
  11. プラグイン環境の準備
  12. クラウド上でファイル管理するなら
  13. まとめ

Illustratorとは

photo : Adobe

Illustratorとは、アメリカの Adobe 社が提供しているイメージ画像の作成・編集ソフトになります。他のイメージ・ソフトと異なる点は、ベクタ画像方式を採用している点でデザインした画像や文字を拡大しても画像が粗くならない特徴があります。その特徴から Illustrator は、ロゴデザインやアイコンデザイン、web デザイン、ポスター作製などを制作する現場で広く用いられています。Illustrator の利用にあたっては、Adobe 社と月 2,180円の契約を結び、ソフトをインスト―ルして利用します。

Illustratorでできること

photo : Adobe

1987年に Illustrator がデビューしてから幾度となくバージョンアップされて、現在の Illustrator は『Illustrator CC』が最新になります。メイン機能となる”描く”ことについてはプロのイラストレーターからもお墨付きで、現在はクラウドとの連携や web デザインを意識した機能も多く用意されています。Illustrator のできることをご紹介します。

イラストの作成

photo : Adobe

Illustrator は、ロゴや広告、ポスター、アニメキャラなどのイラスト作成をスムーズにゴールへと導いてくれます。Illustrator 初心者でも直感的に操作できるワークスペースを使いこなすのにそれほど多くの時間は必要としないでしょう。またIllustrator と連携できるアプリ Illustrator Line Illustrator Draw を利用すると、外出先で得たインスピレーションを画面に落とし込むことができます。

グラフィックデザインの作成

photo : Adobe

画像と文字が交差し合うグラフィックデザイン。よりクオリティーの高い作品を作り上げるために、Illustrator では 250種類以上のフォント・ライブラリ Typekit と連携し、さらに質の高いロイヤリティーフリーの写真とグラフィック数千万点を提供する Adobe Stock を使い、デザインを校正することができます。

web&モバイルデザイン

photo : Adobe

Illustrator は、フレームワークから web デザイン、サイトマップなど web 開発にとって重要な作業を担うことができます。web デザイナーを目指す方にとって Illustrator は必須アイテムといえるでしょう。また以下に Illustrator ならではの web デザイン機能をご紹介します。

アイコン作成

photo : Adobe

web & モバイル デザイン全体から考えれば小さいウェイトの”アイコン”かもしれませんが、他とは違うアイコンを採用したいと考えている方も少なくありません。Illustrator では、一つ作ったアイコンを数種類のサイズに複製することもできます。これによってデザイン作業の効率を飛躍的に向上させます。また使用するアイコンは、ワークスペース内に表示できますので簡単にデザインしたアイコンを何回でも使うことができます。

合成フォント

合成フォント

Illustrator は、フォント・ライブラリ Typekit に加えて、合成フォントをセッティングすることができます。全角入力や半角入力など入力タイプによって表示されるフォントを自分好みの設定をすることができます。文字のバランスを重視する方には有り難い機能です。

テンプレートでデザイン

eleqtriq.com

Illustrator には標準で名刺やパンフレットなどのテンプレートが用意されています。web デザインについては、ネット上で公開されているテンプレートを利用し、スピーディーに web デザインを仕上げることができます。イメージとしては、年賀状のテンプレートの様な感覚です。

テンプレートのサンプル http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/

”一喝”ペースト機能

photo : Adobe

異なる画面サイズの web デザインも Illustrator なら快適に作業することができます。Illustrator の貼り付け機能「同じ位置にペースト」を使うと、サイズ違いのデザインである隣のアートボードにもペーストして配置し直してくれます。他にも「すべてのボードにペースト」など便利な機能が備わっています。

サイトマップ作成も

photo : Adobe

必要な画面デザインをすべてアートボードに並べて管理できるのが Illustrator の特徴ですが、それを応用するとサイトマップも作成することができます。

Mid_IV_Miyoshi

初期設定と環境設定

Illustratorでは新規ファイル作成時に、作成対象物毎に適した単位やサイズが表示されます。しかし、いくつか見落としがちなセッティング・ポイントもありますので、後で困らない様にいくつかポイントをご紹介したいと思います。

新規ドキュメント作成時

プリント

新規ドキュメントを作成する時に、プロファイルの選択をすると作業に適した単位が設定されます。この時に合わせてチェックしておきたいことに詳細プレビューがあります。標準の状態ではデフォルトになっていますが、web デザインの場合はピクセルに変換しておく方が適当なケースが多いです。Illustrator の作成時、デフォルトのプレビュー表示時はベクター画像で表示されますが、実際にデザインしたモノが表示されるのは ラスタ画像のケースが多く、デザイン時にはなかった画像の粗さが露骨に発生する場合があるからです。

ピクセル設定             デフォルト設定

拡大画面の違い

プレビューの設定方法

①画面の上部のメニューバー内の ファイル → 新規 をクリックし、プロファイルプリントから Web に変更

プリント

②設定画面下部の詳細を開き、プレビューモードをピクセルに変更

web

③OK をクリック

単位の確認

ドキュメントが開いたら、ワークスペース内の単位も確認しておきましょう。一般以外の線や文字の単位もピクセルに変更しておきます。

単位の設定方法

①画面の上部のメニューバー内の 編集 → 環境設定 → 単位を選択 ②画面内の単位をすべてピクセルに変更

環境設定単位

グリッド線の設定

グリッド

作業画面にマス目を表示するグリッド線も、全体バランスを考慮する上では適切なマス目をセットしておく方が作業しやすくあります。作成するコンテンツや好みにもよりますが、「グリッド:100px」「分割数:10」に設定してみます。尚、グリッド線の表示・非表示は Ctrl + ¥ で操作できます。

※Mac OSはCommand+Shift+i

グリッド線の設定方法

①画面の上部のメニューバー内の 編集 → 環境設定 → ガイド・グリッドを選択

グリッドを 100、分割数 10 に変更

環境設定グリッド

ワークスペースの最適化

初めてIllustratorで作業する時のワークスペース(画面)は初期設定のモノになっています。Illustratorでは、作成するジャンル毎にワークスペースを変更することができ、作業しやすい環境を整えてくれます。webデザインとしてIllustratorを利用する場合は、画面右上の初期設定をWebに変更することをお勧めします。右サイドの表示項目がガラッと変わります。

表示web

プラグイン環境の準備

イラレプラグイン

Illustrator では無料・有料含めて約120のプラグインが Adobe Add-ons に公開されています。Illustrator CC でプラグインを利用する場合、Adobe Extension Manager CCという無償ソフトを使う方法が一般的です。Adobe Extension Manager CC にアクセスし、専用ソフトをインストールしておきましょう。QR コードの作成やファイル出力のサポートなど便利な機能を自分の Illustrator にプラスできます。

クラウド上でファイル管理するなら

同期ログイン

Photoshop CC をはじめ多くの Adobe ソフトにはクラウド同期機能が搭載されており、Illustrator も同様です。ファイルの管理や違う PC からでも自分のセットした Illustrator の環境で作業することができます。同期は、環境設定画面もしくはワークスペースの下部から実行できます。

同期

同期内容は、Adobe.com にログインし、ライブラリやファイルを開くと確認できます。作業環境の同期状況は、画面上部のアクティビティをクリックし、左メニューの設定デスクトップの同期をクリックすると同期内容を確認することができます。時々 Illustrator の設定を初期化したいことがありますが、同期設定を削除したのちに初期化作業(Shift + Ctrl + Alt を押しながら Illustrator を開く)をする必要があります。

※MacOSはCommand+Option+Shift

同期管理

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

いかがでしたでしょうか?Illustrator は、web デザインをはじめ、ロゴやアイコン、バナーなど広範囲のデザインをカバーしてくれることが分かると思います。Illustrator を使うとデザインに無限の可能性を感じることができますが、今まで扱ってきたようなペイントソフトとは要領がちょっと違うので最初のうちはちょっと使いにくいかもしれません。しかし、Illustrator の様なデザイン技術を習得しておくと web デザインに限らず広告作成やラベルデザイン、アニメーション作製など広い範囲で応用が利いてきます。まだ Illustrator を試したことのない方は、一度 Adobe から提供されている 1か月間の無料体験を試してみてください。隠れていたデザイナーの才能が開花するかもしれませんね。

また、Photoshopについて知りたいという方は、以下の記事も参考にしてみてください。

Photoshopで何ができるの?初心者のための使い方と初期設定まとめ

比べてみました Illustrator VS Photoshop

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp