IllustratorとPhotoshopでつくるバナー制作講座

こんな方へグラフィックソフト初心者の方

Webのお仕事で案件が多いバナー制作。どうやって作ればいいの？とお悩みの方のためにこの講座を作りました。この講座を受けると未経験者でもIllustratorとPhotoshopを使って、プロレベルのバナーが作成できるようになります！

この講座で、できるようになること

バナー制作の基本がわかる
デザインが思いつかない…と悩まなくなる
Illustratorの基本操作ができるようになる

この講座について

バナーを作ってみたい! でも、こんなことありませんか？

未経験からでも、１週間以内でバナー制作案件が受注可能なレベルへ！

～デザイン未経験者からはじめるIllustrator, Photoshopを使ったバナーデザイン～

Webサイトを見ていると、至るところで目にするWebバナー。季節による入れ替わりもあるので、クラウドソーシングサービスなどでも依頼数も多く、人気のある案件ですね。
バナー制作案件チャレンジしてみたいけれど、「Photoshopでグラフィカルな表現なんてできないし」「そこまでセンスに自信はないし」とネガティブになってしまって、諦めていませんか？

実は、バナー制作はアーティスティックな才能よりも、ユーザーを意識した構成のほうが重要です。ほんとうに良いバナーとはなにかを知り、制作に必要なIllustratorとPhotoshopの操作ミニマムに習得しましょう! ただの作り方学習ではなく、実務の際に役立つノウハウも解説しています。

イチから作ることで、最短で「使える」技術を習得します

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。デザイン未経験の方を対象に、バナー制作の知識とグラフィックソフトの操作方法を厳選しました。講座と一緒に手を動かして頂くと、短期間で、仕事としてバナー制作を行えるプロスキルの習得が可能な内容となっています。

効果的なバナー広告を作成する知識を得る

Webバナー、特に広告用のバナーではオシャレさよりも“誘導効果”が重視されます。

バナーがしっかりと役割を果たすために、ユーザーの注意をひくためのコツ、このページを見たいと思わせるために必要なポイントを解説。専門用語は使用せず、図解もたっぷりです。良い例と悪い例の比較図などもありますので、デザイン未経験の方もご安心下さい。

今すぐ使える学習方法＆仕事術を伝授

バナー制作もWebデザインも、典型的なレイアウトパターンを知ったり、リリースされているデザインを参考にしたりして作り上げることが多々あります。

本講座ではただ作るのではなく、アイディア探しの方法、自分のデザインストックを引き出すための方法もお教えします。どれも実際にプロが行っている方法。実務のサポートにも、スキルアップのための自学にも役立ちますよ。

Illustrator、Photoshopを使って、仕事レベルのバナーデザインを作成できる

本講座は実務形式で、実際にクライアントの要件確認からバナー制作までを通しで行っていきます。手を動かして、お仕事でも通用するレベルのバナーデザインを習得していきましょう。

Illustrator, Photoshopの操作もしっかり解説。ショートカットの多用を避け、分かりやすさを重視した構成になっていますので、Illustrator、Photoshop初心者の方でも「解説通りにできない」なんて心配は不要です！

本講座を終えると、できるようになること

クライアントの要件を理解したデザインができるようになる
効果的なバナー広告を作成するための深い知識を得ることができる
Illustrator, Photoshopを使ったデザインができるようになる
未経験スタートでもプロレベルのバナー広告がデザインできるようになる
Lancersなどクラウドソーシングサービスで、バナー制作案件を受注できるスキルが身につく

この講座で学べること

バナー制作の基本がわかる

デザインが思いつかない…と悩まなくなる

Illustratorの基本操作ができるようになる

Photoshopの基本操作ができるようになる

こんな方におすすめです

グラフィックソフト初心者の方
バナー制作のお仕事を受けてみたい方
Illustratorの使い方を学びたい方
Photoshopの使い方を学びたい方

受講の前に用意するもの

Adobe Photoshopのインストール
Adobe Illustratorのインストール

カリキュラム

3章全12レッスン上から順に進めると、最後まで迷わず進めます

1章　バナー制作基礎知識3レッスン

1Webバナーの目的、良いデザインとは何かを知ろうWebバナーとは何か、サイト上に設置される目的について解説します。バナーの役割と目的を知り、ほんとうに良いバナーデザインについて考えましょう。
2広告媒体とバナーサイズを知る一口にWebバナー、広告バナーと言っても使用されているサイズは様々。広告媒体別によく使われているバナーサイズを把握しておきましょう。
3バナー制作で意識すべき５つの基本バナーデザイン・制作を行う際に、意識しておきたい５つのポイントについて解説します。知っているとバナー制作だけではなく、クライアントとの打ち合わせもスムーズに進みますよ。

2章　Webバナーを作ろう8レッスン

4お仕事（バナー制作）の内容・条件を確認するここからは実際のバナー制作案件を想定した実習形式でレッスンを進めていきます。まずは制作するバナーのターゲット、遷移先、掲載したい内容などを確認しましょう。
5バナー作成に必要な素材（画像）を探す制作に必要な画像探しに使える、代表的なストックフォトサービスと、Adobe Stockの使い方について解説します。無料で使えるおすすめサイトもありますよ。
6バナーの競合調査を行い、ラフを作成するバナー制作時には競合をチェックし、デザイン参考を探すことも大切。代表的なレイアウトパターンを知り、実際に使用されているバナーも参考にしてラフを作ってみましょう。
7Illustratorでバナー掲載要素を配置Illustratorを使って、バナーを構成するための画像やテキストを配置します。いきなり完璧に作る必要はありません。最初はバランスをみながら大まかに配置していきます。
8テキスト部分を確定するバナーに掲載する文字の、フォントタイプ・サイズをそれぞれ考えていきましょう。文言を読みやすくするカーニングの方法も解説します。
9バナーに色を付け最終調整、書き出すバナーに色を付けて、全体のバランスを見ます。情報の優先順位に沿ったコントラストがあるか確認・調整しつつバナーを完成させましょう。納品時の注意点と書き出し方法も解説します。
10Photoshopで背景を透明化するPhotoshopを使って、人物写真に写っている背景を透明にする方法を解説します。背景の透過は、バナーでもWebデザインでも多用するPhotoshop操作の１つです。
11Photoshopで補正（レタッチ）するPhotoshopを使った写真補正について解説します。使用する写真のコントラストを整えたり、背景色の影響を緩和することで、バナーのクオリティが上がります。

3章　講座終了課題1レッスン

12バナー講座 - 最終課題お手本を参考にバナーを作成してみましょう。トレース（模写）はグラフィックソフトの使い方に慣れつつ、デザインの引き出しも増やすことができる最強の自主トレーニング方法です。