WEBデザイン
Adobe Illustrator -基礎編-
INDEX
目次

0. できるようになること

Figmaと同様に、様々なものをプロのクオリティでデザインできるようになります!

==

  • WEBサイト
  • WEBアプリ
  • ロゴ
  • 名刺
  • ポスター
  • その他印刷物等

==

Adobe Illustratorは、Figmaとできることが似通っているためロゴ・イラスト制作はもちろん、文字や図形を配置したり、画像の拡大縮小をしたりすることにも優れています。

1. 学習のポイント

  • Adobe Illustratorは、直感的に操作することが可能であるため、Figmaと同様に、「まずは気楽に試してみる」という精神が大切です。
  • Adobe Illustratorは Adobe社の製品のため、将来的に他のAdobe製品(PhotoshopやAdobe XD等)を操作する上でも活きてくるので、Adobe製品を将来的に使用していきたいという人はぜひ操作に慣れておきましょう!
  • Adobe公式では基本操作をマスターするためのチュートリアルや無料のオンライン講座が非常に充実しています。それらを用いて学習を進めていくのが最も効率的です。

2. Adobe Illustrator導入編

a. Adobe Illustratorの概要

Adobe Illustratorとは、Adobe(アドビ)社が提供するグラフィックデザインツールです。

Adobe社は他にもPhotoshopやXDなど様々なアプリケーションをサブスク型で提供しており、Illustrator以外のAdobe製品との互換性の高さから、案件獲得の現場でIllustratorでの納品を指定される場合もあります。

Adobe Illustratorの料金体制

7日間の無料体験後、月額2,728円で利用することが可能です。

「スキル学習として短期間で基本操作を身につけたい」という方は7日間の無料体験期間を利用して操作方法を身につけましょう!
Adobe Illustratorは希望者向けの追加課題となっているため、料金は自己負担となります。 そのため、無料体験期間を利用して一気に操作方法を身につけるのがおすすめです!

b. 今後の学習の進め方

  • まずこのページでは、Adobe公式サイトのチュートリアルを用いて基本的な操作方法を身につけていただきます。
  • その後、さらに踏み込んだ操作方法を Adobe Illustrator -応用編- で学んでいただきます。
  • 最後に Adobe Illustrator -実践編- で実際に課題を作成していただきます。
手を動かして学習し、最後までやり切ることで確実に現場レベルのスキルが身に付きます!始めたからにはやり切りましょう!

c. Adobe Illustratorにログインする

動画を見ているだけの学習方法では使えるようにはならないので、早速ログインしましょう! まずログインを完了させてから以下の「Adobe Illustratorの基本操作を学ぶ」に進みましょう!

3. Adobe Illustratorの基本操作を学ぶ

使用する教材

Adobe公式ページで掲載されているチュートリアル、及び無料のオンライン講座動画を使用いたします。

Adobe Illustrator自体、操作が直感的でわかりやすいため、基本的な操作方法を網羅的に順序立てて説明している公式教材が最も学習を進める上で効率的であると考えています。

必ず各動画ごと、各セクションごとに実際にIllustratorを操作しながら動画を閲覧しましょう!手を動かすことで操作方法が体に染み付きます!

Step1:図形の組み合わせで絵を描いてみましょう!

まずは以下のページに掲載されている3つの動画を上から順に閲覧してください。 アートボードと呼ばれる画像作成を行うページの開き方から、図形の組み合わせを用いてイラストを描く方法について順を追って丁寧に説明しています。必ず、動画毎に実際にIllustratorを操作してから次の動画に進みましょう!

Step1-1 理解度確認チェック

動画の視聴お疲れ様でした!オブジェクトの作成方法について理解が深まったと思います!

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

Illustratorの特徴である「ベクター画像」の特徴とはなんですか?
  • 画像を無限に拡大・縮小しても画質が悪化することが無い
  • 印刷に適している
正方形を移動したいのですが、どうすればいいですか?
ツールバーから「選択ツール(V)」をクリックして移動したい対象をドラッグ&ドロップすることによって移動可能です。
正方形を作成するにはどうすればいいですか?
ツールバーから「長方形ツール(M)」を表示し、Shiftを押しながらサイズを変更することで正方形になります。
正六角形を作成するにはどうすればいいですか?
ツールバーから「長方形ツール(M)」で長押しをすることで隠れていたツールが表示されるため、そこから多角形ツールを選択することで作成可能です。
正六角形を三角形に変更したいのですがどうすればいいですか?
正六角形の辺の右側の菱形の小さいボタンをドラッグすることで頂点の数を変更することが可能です。
ドーム型の図形を作成するにはどうすればいいですか?
「ダイレクト選択ツール(A)」を選択し、三角形の内部にある二重丸をドラッグすることで角を丸くし、ドーム型の図形を作成することが可能です。
複数のオブジェクトを選択するにはどうすればいいですか?
Shiftを押しながら選択したいオブジェクトをクリックすることで可能です。
オブジェクトをコピーしたい場合にはどうすればいいですか?
「選択ツール(V)」を選択し、Macの場合には Optionキーを、Windowsの場合には Altキーを押しながらオブジェクトをドラッグすることでオブジェクトの複製が可能です。

Step1-2 理解度確認チェック

動画の視聴お疲れ様でした!オブジェクトの着色方法についてよく理解できたと思います!

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

Shiftキーを押しながらオブジェクトをクリックする以外に複数オブジェクトを選択する方法を教えてください。
ドラッグすることで複数選択が可能です。(動画冒頭で解説されています。)
保存の仕方がわかりません。
「ファイル」から「保存」を選択することで保存が可能です。

Step1-3 理解度確認チェック

動画の視聴お疲れ様でした!画面設定についてよく分かったと思います!

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

ツールパネルとはなんですか?
「選択ツール(V)」や「長方形ツール(M)」などが選択可能な、画面左側に縦向きに表示される表のことです。
各種パネルとはなんですか?
画面右側に表示される表のことで、選択しているオブジェクトについて詳しく変更を加えてることができます。

Step2:アイコンを作成してみましょう!

続いて、ある程度基本的な操作を抑えたら、Illustratorの得意な領域でもあるアイコンの作成を行いましょう。

こちらも3つの動画が掲載されているので、上から順に取り組み、動画ごとに実際に手を動かしながら進めることを徹底しましょう!

Step2-1 内容確認チェック

動画の視聴お疲れ様でした!オブジェクトの合体・くり抜きについてよく分かったと思います!

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

オブジェクトの合体方法を教えてください
複数のオブジェクトを選択し、「シェイプビルダーツール(Shift+M)」を選択します。そのままドラッグをしていくとドラッグにかかったオブジェクトが合体します。(オブジェクトが重なっている必要があります。)
バウンディングボックスとはなんですか?
オブジェクトにマウスカーソルを合わせた際に表示される四角のボックスを意味します。
作業を失敗してしまったときに1つ前に戻すにはどうすればいいですか?
Macの場合には、「Command+Z」Windowsの場合には、「Ctrl+Z」で可能です。

Step2-2 内容確認チェック

動画の視聴お疲れ様でした!オブジェクトの着色方法についてよく分かったと思います!

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

オブジェクトが編集できないようにロックする方法を教えてください
ロックしたいオブジェクトを選択し、メニューバーの「オブジェクト」→「ロック」→「選択しているオブジェクト」を選択することで選択しているオブジェクトをロックすることが可能です。
「変形の繰り返し」のショートカットキーを教えてください
Macなら「Command + D」Windowsなら「Ctrl+D」で可能です。
オブジェクトの前後関係を変更するにはどうすればいいですか?
前後関係を変更したいオブジェクトを選択し、メニューバーの「オブジェクト」から「重ね順」を選択することでそこから変更が可能です。
グループ化をするにはどうすればいいですか?
グループ化したいオブジェクトを選択し、macの場合には「Commnad+G」Windowsの場合には「Ctrl+G」でグループ化が可能です。 よく使うものなのでショートカットキーは必ず覚えましょう!

Step2-3 内容確認チェック

動画の視聴お疲れ様でした!制作課題はうまくできたでしょうか?わからなかった部分は理解できましたか?

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

型抜きの仕方がわかりません
型抜きを行いたいオブジェクトを複数選択し、その状態で「シェイプ形成ツール」を選択するか「Shift+M」を入力した上で、Macの場合には「option」をWindowsの場合には「alt」を押しながらくり抜きたい部分をドラッグすることでくり抜くことが可能です。
画面を拡大するにはどうすればいいですか?
「ズームツール」を使用することで変更することが可能です。
画面表示のズーム倍率を初期状態に戻すにはどうすればいいですか?
Macの場合には「Command+0」Windowsの場合には「ctrl+0」を入力することで変更可能です。

Step3:印刷物を作成してみましょう!

ここまで学べば、ある程度のイラストであれば自由に作成可能かと思います。

続いて、Illustratorの強みである印刷物の作成を行っていきましょう!少し実践的なレベルに踏み込んでいくので頑張りましょう!

練習用ダウンロード素材ファイル

下記の5つのファイルをダウンロードしてください。今から作成するメニュー表を作成する際に使用します。

(上記リンクの遷移先からでもダウンロードすることが可能です。)

img01.psd

img02.psd

img03.psd

img04.psd

cafe_menu_img.psd

Step3-1 内容確認チェックボックス

動画の視聴お疲れ様でした!新しい内容も多くありましたが理解できましたか?

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

ガイドの設定の仕方を教えてください
Macの場合には「Command+R」Windowsの場合には「Ctrl+R」で定規を表示し、定規からドラッグすることでガイドを表示することが可能です。
縦横比を維持しながらスケーリング(サイズ変更)をする方法がわかりません
対象のオブジェクトを選択しShiftを押しながらドラッグすることで縦横日を維持しながらサイズを変更することが可能です。
写真をもとにしたイラストを作成する方法がわかりません
写真を選択した状態でプロパティパネルから「画像トレース」を選択し、詳細を設定することで作成可能です。

Step3-2 内容確認チェックボックス

動画の視聴お疲れ様でした!動画の内容は理解できましたか?

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

タブキーの設定の変更方法を教えてください
メニューバーから「ウィンドウ」「書式」「タブ」を選択し、タブパネルによってタブの間隔を揃えたり、間隔を埋めるように文字を配列したりすることが可能です。
コピー&ペーストのショートカットキーを教えてください
Macなら「Command+C」でコピー「Commnad+V」でペースト。Windowsなら「Ctrl+C」でコピー「Ctrl+V」でペーストすることが可能です。
オブジェクトの配置を揃えたいときにはどうすればいいですか?
揃えたいオブジェクトを複数選択し、プロパティパネルから整列機能を利用することで配置を揃えることが可能です。
画像を任意の形で切り抜くにはどうすればいいですか?
写真の上に切り抜きたいオブジェクトを配置し、グループ化します。その後そのグループ化したオブジェクトを選択しメニューバーの「オブジェクト」から「クリッピングマスク」>「作成」を選択することで可能です。

Step3-3 内容確認チェックボックス

動画の視聴お疲れ様でした!動画の内容は理解できましたか?

以下に忘れやすい部分のチェック項目を作成したので、動画の理解度チェックに活用してください!すぐに答えを見るのではなく、動画を適宜振り返ることも大切です!

壁紙のように一つのアイコンを繰り返して背景を作成する方法を教えてください
オブジェクトを選択した状態でメニューバー「オブジェクト」から「スウォッチ」を選択します。オブジェクトをドラッグ&ドロップでスウォッチパネルに登録してください。さらにスウォッチパネルに登録したパネルをダブルクリックすることでパターンオプションパネルが表示され、そこから編集が可能となります。
レイヤーの追加の仕方を教えてください
プロパティパネルから、レイヤーパネルを選択し画面右下の「新規レイヤーを作成」をクリックすることでレイヤーの新規作成が可能です。
画像の背景を削除する方法を教えてください
「ダイレクト選択ツール」を選択した状態で写真を選択し、deleteキーを押すことで背景を削除することが可能です。
スポイトツールを使用する際のショートカットキーを教えてください
「I」を選択することで使用可能です。加えて、Shiftキーを押しながらスポイトを使用することで色だけを抽出することが可能です。
上書き保存のショートカットキーを教えてください
Macの場合には「Command+S」windowsの場合には「Ctrl+S」を選択してください

その他初級編チュートリアル

今まで学習した内容で簡単なイラストやチラシであれば、基本的になんでも作成可能です。

ですが、「もっとこだわったデザインを作成したい!」「もっと資料のデザインを向上させたい!」という方向けにさまざまなチュートリアルが用意されていますので、それぞれをご紹介をします。
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH