Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn More【上級者用】続！バナーデザインマスター講座｜Adobe Illustrator（イラストレータ） ＆ Photoshop
Rating: 4.7 out of 54.7(312 ratings)
3,368 students
【上級者用】続！バナーデザインマスター講座｜Adobe Illustrator（イラストレータ） ＆ Photoshop
基礎ノウハウから応用まで、WEB用「バナーデザイン」をAdobe Illustrator（イラストレーター）とPhotoshop（フォトショップ）を実際に操作しながら完全習得できます。
Created byChiba Meizin | 千葉名人
Last updated 4/2024
Japanese
Japanese [Auto],
What you'll learn
- Adobe IllustratorとAdobe Photoshopによるバナーデザイン技術の習得
- バナーデザイン基礎知識の習得
- 高画質WEB画像の作成方法の獲得
- テンプレートによる効率の良いバナーデザイン手法の獲得
Explore related topics
Course content
12 sections • 231 lectures • 14h 1m total length
- この講座の学習内容13:08
この講座全体の学習内容のプレビュー
- Adobe Fontを自動でダウンロードする自動アクティベート設定のやり方1:23
Adobe Fontを自動でダウンロードする自動アクティベート設定のやり方
- 【ヘルプ】動画が再生できない、ダウンロードできない場合0:16
受講していて困った時のヘルプです。ブックマークしておくとストレス無く受講できて安心です。
- Q＆Aの使い方（質問、メッセージ送信方法）8:04
Q＆Aの使い方（質問、メッセージ送信方法）
- スクリーンショットを必ず投稿してください0:56
質問についてのお願い。
- Illustratorの不具合について2:14
Illustratorの不具合について
- このセクションの学習内容2:07
このセクションの学習内容
- 【DL】練習用データのダウンロード0:05
練習用データのダウンロード
- 【ヘルプ】ダウンロードできない場合0:08
【ヘルプ】ダウンロードできない場合の解決方法
- ダウンロードデータの解説3:29
ダウンロードしたデータ内容の解説
- 「クラウドドキュメント保存」と従来の「コンピューター保存」交互に切り替える方法1:33
「クラウドドキュメント保存」と従来の「コンピューター保存」交互に切り替える方法
- 素材をラスタライズする方法2:42
素材をラスタライズする方法
- 下絵レイヤーを作る＆参考用ラスター画像を半透明表示する方法4:30
下絵レイヤーを作る＆参考用ラスター画像を半透明表示する方法
- 指定したアートボードの中央にオブジェクトを整列する方法2:58
指定したアートボードの中央にオブジェクトを整列する方法
- 文字を別のアートボードにレイアウトする2:28
文字を別のアートボードにレイアウトする
- 文字を縦横比率で指定する方法4:42
文字を縦横比率で指定する方法
- 文字の欧文ベースラインで文字を下に揃える方法2:21
文字の欧文ベースラインで文字を下に揃える方法
- 【裏技】書体をクルクルと素早く確認しつつ変更する方法1:18
【裏技】書体をクルクルと素早く確認しつつ変更する方法
- 文字に赤線を引く(スポイトツールで色だけ抜き取る方法)1:11
文字に赤線を引く(スポイトツールで色だけ抜き取る方法)
- 帯のデザイン（スマートガイドとポイントにスナップの設定方法）1:37
帯のデザイン（スマートガイドとポイントにスナップの設定方法）
- 【裏技】文字を帯の中心に整列するアピアランスの設定方法3:12
【裏技】文字を帯の中心に整列するアピアランスの設定方法
- 【重要】整列の「プレビュー境界を使用」をONにしてポイントテキストをキーオブジェクトのど真ん中にする方法3:57
整列の「プレビュー境界を使用」をONにしてポイントテキストをキーオブジェクトのど真ん中にする方法
- 全体バランスを微調整する3:07
全体バランスを微調整する
- 【PSD】写真画像切り抜きをPhotoshopでレイヤーマスクサムネイルで実現する方法3:33
【PSD】写真画像切り抜きをPhotoshopでレイヤーマスクサムネイルで実現する方法
- 【PSD】Photoshopで髪の毛を切り抜く部分を微調整する方法＆レイヤーマスク自動複製の設定方法2:37
【PSD】Photoshopで髪の毛を切り抜く部分を微調整する方法＆レイヤーマスク自動複製の設定方法
- 写真をイラレにリンク配置する方法3:23
写真をイラレにリンク配置する方法
- 【重要】トリミング表示の使い方1:08
【重要】トリミング表示の使い方
- イラレのクリッピングマスクで写真をトミングする方法3:16
イラレのクリッピングマスクで写真をトミングする方法
- イラレの「リンク」と「埋め込み」のバージョン別表示について1:30
イラレの「リンク」と「埋め込み」のバージョン別表示について
- リンク写真をPhotoshopで更新しイラレに反映させる方法1:32
リンク写真をPhotoshopで更新しイラレに反映させる方法
- 埋め込み画像にする方法1:45
埋め込み画像にする方法
- 埋め込み画像をリンク画像にする方法1:20
埋め込み画像をリンク画像にする方法
- 隣のアートボードにデータをコピーしバナーデザインをアレンジする5:40
隣のアートボードにデータをコピーしバナーデザインをアレンジする
- イラレのアートボードそのものをまるごと複製する方法2:06
イラレのアートボードそのものをまるごと複製する方法
- 文字を縦組みにする＆角度をつけるアレンジ方法5:04
文字を縦組みにする＆角度をつけるアレンジ方法
- 「文字タッチツール」で斜めにした文字をさらにアレンジする方法2:49
「文字タッチツール」で斜めにした文字をさらにアレンジする方法
- アレンジで728✕90pxのバナーに写真をレイアウトする6:17
アレンジで728✕90pxのバナーに写真をレイアウトする
- ロゴと文字をアレンジレイアウトする＆サイズ差のある文字をアウトライン化し整列させる5:14
ロゴと文字をアレンジレイアウトする＆サイズ差のある文字をアウトライン化し整列させる
- CTA部分のアレンジ（文字の縦組み）5:08
CTA部分のアレンジ（文字の縦組み）
- オフセットのやり方＆「ガイド作成」ショートカット2:37
オフセットのやり方＆「ガイド作成」ショートカット
- バナーデザインの仕上がりをチェックする3:06
バナーデザインの仕上がりをチェックする
- ロゴデザインの背面に背景を入れる方法＆書き出されないレイヤーにする設定方法4:05
ロゴデザインの背面に背景を入れる方法＆書き出されないレイヤーにする設定方法
- 不要なアートボードを削除する方法3:03
不要なアートボードを削除する方法
- アートボードの名前と順番の変更方法1:11
アートボードの名前と順番の変更方法
- 【重要】WEB画像用「スクリーン用に書き出し」の正しい設定方法8:47
【重要】WEB画像用「スクリーン用に書き出し」の正しい設定方法
- 【検証】わざと座標に小数点を入れて書き出すとどうなるか？5:57
【検証】わざと座標に小数点を入れて書き出すとどうなるか？
- 【DL】完成データプレゼント0:05
このセクションの完成データのプレゼントです。
- このセクションの学習内容1:07
このセクションの学習内容
- スクリーン用書き出し2倍サイズ「サフィックス」付きでバナー用画像をワンクリックで一括高画質書き出する方法7:00
スクリーン用書き出し2倍サイズ「サフィックス」付きでバナー用画像をワンクリックで一括高画質書き出する方法
- 【PSD】バナー画像サイズと解像度をPhotoshopで確認する5:06
【PSD】バナー画像サイズと解像度をPhotoshopで確認する
- 【検証】ブラウザで画像サイズを再スケールして画質を比較する8:36
【検証】ブラウザで画像サイズを再スケールして画質を比較する
- 【記事】バナー画像の比較をご覧ください0:24
バナー画像の比較です。一目瞭然の結果をご覧ください。
- 【検証】WordPressでもバナー画像を比較3:42
【検証】WordPressでもバナー画像を比較
- このセクションの学習内容1:11
このセクションの学習内容
- 【DL】バナーデザイン用テンプレートのダウンロード0:06
バナーデザイン用テンプレートのダウンロード
- バナーデザインテンプレートの解説2:01
バナーデザインテンプレートの解説
- バナーサイズについての解説4:09
バナーサイズについての解説
- PC、モバイルマークの解説1:33
PC、モバイルマークの解説
- 【予備知識】テンプレートレイヤーについての解説3:44
【予備知識】テンプレートレイヤーについての解説
- 一括でアートボードを削除する方法2:15
一括でアートボードを削除する方法
- アートボードを複製コピーで増やす方法1:47
アートボードを複製コピーで増やす方法
- アートボードの中身をそのまままるごと別ファイルにコピペする方法3:59
アートボードの中身をそのまままるごと別ファイルにコピペする方法
- アートボードを独自サイズで新規作成し名前までオリジナルで作成する方法4:36
アートボードを独自サイズで新規作成し名前までオリジナルで作成する方法
- このセクションの学習内容0:53
このセクションの学習内容
- 【重要】ガイドの元になるオブジェクトの作り方5:36
【重要】ガイドの元になるオブジェクトの作り方
- アートボードの中心にオブジェクトを整列させる方法0:52
アートボードの中心にオブジェクトを整列させる方法
- パスのオフセット＆ガイド作成方法6:38
パスのオフセット＆ガイド作成方法
- 【自動化】アクションを作る方法4:12
【自動化】アクションを作る方法
- アクションにオフセット処理を記録する方法3:43
アクションにオフセット処理を記録する方法
- アクションを実行し多重ガイドをワンタッチで自動処理にする裏技1:42
Illustratorで作成した「オリジナルアクション」を実行し「多重ガイド」をワンタッチで自動処理にする裏技
- 整列したいアートボードを指定する方法1:15
整列したいアートボードを指定する方法
- ガイドをロックしたり自由に動かしたり位する方法1:15
ガイドをロックしたり自由に動かしたり位する方法
- 残りの箇所もアクションでガイド化する2:51
残りの箇所もアクションでガイド化する
- このセクションの学習内容1:00
このセクションの学習内容
- 【DL】バナーデザイン用テンプレートのダウンロード0:06
随時更新しております。最新版バナーデザイン用テンプレート（Illustratorファイル）をダウンロードしてください。
- バージョンアップ内容3:00
バナーデザイン用テンプレートのバージョンアップ内容
- アートボードウィンドウからアートボードをコピーする方法4:42
アートボードウィンドウからアートボードをコピーする方法
- アートボードサイズの変更2:03
アートボードサイズの変更
- 透明枠からガイドをアクションで作る3:09
透明枠からガイドをアクションで作る
- ガイドの表示、非表示、固定、固定解除、レイヤー間移動の方法4:06
ガイドの表示、非表示、固定、固定解除、レイヤー間移動の方法
- スカイスクレイパー160×600追加5:32
スカイスクレイパー160×600追加
- アートボードの並び順を変更する方法2:39
アートボードの並び順を変更する方法
- このセクションの学習内容1:11
このセクションの学習内容
- バナーデザインの流れと目的7:24
バナーデザインの流れと目的についての解説
- ロゴについて3:20
ロゴについて
- 権威性、実績のPRのためのデザインについて6:23
権威性、実績のPRのためのデザインについて
- 地図、写真、CTAボタンについての考え方3:18
地図、写真、CTAボタンについての考え方
- バナーデザイン掲載場所と目的およびCVRの基礎知識5:24
バナーデザイン掲載場所と目的およびCVRの基礎知識
- ターゲットは絞れば絞るほど良い理由5:38
ターゲットは絞れば絞るほど良い理由
- デザインのリサーチ「エッセンス」を抽出する考え方11:12
デザインのリサーチ「エッセンス」を抽出する考え方
- 情報に「優先順位」をつける3:02
情報に「優先順位」をつける
- バナーデザインで色バランスがまとまる着色方法3:38
バナーデザインで色バランスがまとまる着色方法
- 色を明度のコントラストで調節する考え方5:32
色を明度のコントラストで調節する考え方
- このセクションの学習内容3:54
このセクションの学習内容
- 【DL】練習用データのダウンロード0:05
【DL】練習用データのダウンロード
- 画像のラスタライズ処理1:40
画像のラスタライズ処理
- イラレで「画像の切り抜き」をする方法1:25
イラレで「画像の切り抜き」をする方法
- 画像のレイヤー間移動と下絵レイヤー設定方法3:16
画像のレイヤー間移動と下絵レイヤー設定方法
- 画像マスクとマスクサイズを後から変更する方法6:09
画像マスクとマスクサイズを後から変更する方法
- マスクした写真の中身だけを移動、拡大縮小し大きさを調製する方法6:03
マスクした写真の中身だけを移動、拡大縮小し大きさを調製する方法
- サブレイヤーを使わず固定、非表示で個々のオブジェクトを瞬時に制御する方法4:58
サブレイヤーを使わず固定、非表示で個々のオブジェクトを瞬時に制御する方法
- 文字を曲げるためのパスを作る方法3:57
文字を曲げるためのパスを作る方法
- パス上文字ツールの使い方とカーニングトラッキング調整のやり方6:03
パス上文字ツールの使い方とカーニングトラッキング調整のやり方
- パス上文字ツールでさらに文字をカーブさせる5:00
パス上文字ツールでさらに文字をカーブさせる
- 【比較】効果のワープとパス状文字ツールの違い3:17
【比較】効果のワープとパス状文字ツールの違い
- シンボルマークのレイアウト2:13
シンボルマークのレイアウト
- ボタンを別のアートボードと「同じ位置にペースト」する1:16
ボタンを別のアートボードと「同じ位置にペースト」する
- 真円作成＆スポイトで卵色を着色する方法4:31
真円作成＆スポイトで卵色を着色する方法
- 文字列を真ん中にレイアウトする2:54
文字列を真ん中にレイアウトする
- クローズパスを半透明にする方法1:28
クローズパスを半透明にする方法
- 描画モードの適用5:50
描画モードの適用
- 【追加】描画モードを全部適用するアクションの作り方10:05
【追加】描画モードを全部適用するアクションの作り方
- CTAボタンに写真から色を入れる3:45
CTAボタンに写真から色を入れる
- ガイド見ながらレイアウトを仕上げる5:24
ガイド見ながらレイアウトを仕上げる
- 【高解像度】バナー画像のWEB保存3:41
【高解像度】バナー画像のWEB保存
- 【DL】完成データプレゼント0:05
【DL】完成データプレゼント
- このセクションの学習内容2:57
このセクションの学習内容
- ファイナル証券様からの依頼内容1:20
ファイナル証券からの依頼内容
- 【DL】練習用データのダウンロード0:05
練習用データのダウンロード
- 【デザイン】リボンでキャンペーン内容を装飾した理由2:19
【デザイン】リボンでキャンペーン内容を装飾した理由
- 【デザイン】要素の強弱でメリハリをつける重要性3:33
【デザイン】要素の強弱でメリハリをつける重要性
- 【デザイン】footerの囲み作ってしまう1:30
【デザイン】footerの囲み作ってしまう
- 【デザイン】人物の向きと目線はそっぽを向いてはいけない2:56
【デザイン】人物の向きと目線はそっぽを向いてはいけない
- 【小技】デザイン検証で便利な「復帰」の使い方1:22
【小技】デザイン検証で便利な「復帰」の使い方
- 【準備】アートボードをコピーする2:38
【準備】アートボードをコピーする
- 【準備】ラスタライズし下絵画像にする2:05
【準備】ラスタライズし下絵画像にする
- 【PSD】Photoshopで人物をマスクして切り抜く3:55
【PSD】Photoshopで人物をマスクして切り抜く
- 【PSD】Photoshopのマスク範囲を微調整する4:04
【PSD】Photoshopのマスク範囲を微調整する
- 【PSD】Photoshopで作業後のレイヤーを自動生成する設定方法3:43
【PSD】Photoshopで作業後のレイヤーを自動生成する設定方法
- 【PSD】拡張子変更とその意味2:13
【PSD】拡張子変更とその意味
- 【PSD】Photoshop切り抜きツールで必要な箇所だけ残す方法3:29
【PSD】Photoshop切り抜きツールで必要な箇所だけ残す方法
- Photoshop画像をIllustratorに配置する2:23
Photoshop画像をIllustratorに配置する
- 【環境設定】アイコンをわかりやすくする方法＆Photoshopで開いて編集する3:33
【環境設定】アイコンをわかりやすくする方法＆Photoshopで開いて編集する
- イラレとPhotoshopを同時に使う方法4:08
イラレとPhotoshopを同時に使う方法
- 【ワンクリック】文字に装飾を入れる4:17
【ワンクリック】文字に装飾を入れる
- 文字を分解しサイズ＆組方向を変えてレイアウトする方法3:41
文字を分解しサイズ＆組方向を変えてレイアウトする方法
- 文字詰めする4:43
文字詰めする
- スポイトで文字情報抽出しながらレイアウト微調整5:38
スポイトで文字情報抽出しながらレイアウト微調整
- 吹き出しを作る5:21
吹き出しを作る
- 写真をアートボードサイズで切り抜き中身だけダイレクト選択ツールで動かす方法3:51
写真をアートボードサイズで切り抜き中身だけダイレクト選択ツールで動かす方法
- footer部分の帯デザインをペンツールで作ろう！10:51
footer部分の帯デザインをペンツールで作ろう！
- アートボードサイズで背景を入れる3:14
アートボードサイズで背景を入れる
- 微修正＆メリハリとトレードオフについて3:27
微修正＆メリハリとトレードオフについて
- 紙吹雪の「シンボル」についての解説4:04
紙吹雪の「シンボル」についての解説
- 【シンボルスプレーツール】消したり混ぜたりする方法6:48
【シンボルスプレーツール】消したり混ぜたりする方法
- 【シンボルシフトツール】シンボルを移動させる方法1:38
【シンボルシフトツール】シンボルを移動させる方法
- 【シンボル】直径サイズ変更方法2:29
【シンボル】直径サイズ変更方法
- 【シンボルスクランチツール】シンボルをクリック箇所に集める方法1:11
【シンボルスクランチツール】シンボルをクリック箇所に集める方法
- 【シンボルリサイズツール】 シンボルを拡大OR縮小させる方法1:24
【シンボルリサイズツール】 シンボルを拡大OR縮小させる方法
- 【シンボルスピンツール】シンボルを回転させる方法0:55
【シンボルスピンツール】シンボルを回転させる方法
- 【シンボルステインツール】シンボル彩度を変更する方法1:10
【シンボルステインツール】シンボル彩度を変更する方法
- 【シンボルスクリーンツール】シンボルを透明にする方法4:10
【シンボルスクリーンツール】シンボルを透明にする方法
- 【シンボルスタインツール】シンボルにグラフィックスタイルを適用する方法0:57
【シンボルスタインツール】シンボルにグラフィックスタイルを適用する方法
- 【バグ】シンボルツールのバグ検証2:59
【バグ】シンボルツールのバグ検証
- シンボルのリンクを解除する意味と理由6:30
シンボルのリンクを解除する意味と理由
- 【データ整理】孤立点だけ選んで削除する方法2:49
【データ整理】孤立点だけ選んで削除する方法
- 仕上げ8:17
仕上げ
- アートボードの削除で完成データを上書き保存1:55
アートボードの削除で完成データを上書き保存
- 【完成】バナーを高解像度JPEGに書き出す3:19
【完成】バナーを高解像度JPEGに書き出す
- 【微修正】再書き出しでバナー画像を上書き保存する方法1:34
【微修正】再書き出しでバナー画像を上書き保存する方法
- 【DL】完成データプレゼント0:05
このセクションの完成データプレゼントです。
- このセクションの学習内容2:30
このセクションの学習内容
- 【DL】作例ダウンロード0:05
【DL】作例ダウンロード
- シャイラル様からのご依頼内容の解説2:59
シャイラル様からのご依頼内容の解説
- 高級感のデザイン理論9:34
高級感のデザイン理論
- 【余白】上質をデザインする方法2:06
【余白】上質をデザインする方法
- 【比較】メリハリ＆情報を最小化する考え方「文字サイズが同じくらいならどうなるか？」4:55
【比較】メリハリ＆情報を最小化する考え方「文字サイズが同じくらいならどうなるか？」
- 【構図】商品だけを目立たせるレイアウト方法の考え方2:58
【構図】商品だけを目立たせるレイアウト方法の考え方
- ラスタライズと「画像の切り抜き」機能の解説5:22
ラスタライズと「画像の切り抜き」機能の解説
- 【PSD】白黒モデル写真の作り方の手品の種を見せます7:00
【PSD】白黒モデル写真の作り方の手品の種を見せます
- 【PSD】モデルだけ切り抜く2:47
【PSD】モデルだけ切り抜く
- 【PSD】トーンカーブで明るさを調整するプロ手法暴露【自然な美白】3:06
【PSD】トーンカーブで明るさを調整するプロ手法暴露【自然な美白】
- 【PSD】写真を白黒し一部だけカラーにする方法7:43
【PSD】写真を白黒し一部だけカラーにする方法
- モデルの写真を配置しマスクする5:22
モデルの写真を配置しマスクする
- 商品画像をレイアウトする1:32
商品画像をレイアウトする
- 【鏡面反射】不透明マスク用グラデーションを作る方法9:32
【鏡面反射】不透明マスク用グラデーションを作る方法
- 不透明マスクを適用する方法3:22
透明マスクを適用する方法
- 不透明マスクをさらに全体的に「透明」にする方法3:15
不透明マスクをさらに全体的に「透明」にする方法
- Newの素材を完璧に作る方法6:09
Newの素材を完璧に作る方法
- 【縦組み】文字をレイアウトする2:40
【縦組み】文字をレイアウトする
- 【文字装飾】アピアランスの作り方5:28
【文字装飾】アピアランスの作り方
- アピアランスをグラフィックスタイルにしてオリジナル素材にする方法2:06
アピアランスをグラフィックスタイルにしてオリジナル素材にする方法
- 斜めグラデーションの作り方（グラデーションツールの使い方）7:46
斜めグラデーションの作り方（グラデーションツールの使い方）
- 【完成】余白の取り方と仕上げ作業8:11
【完成】余白の取り方と仕上げ作業
- アレンジで要素をレイアウトする7:07
アレンジで要素をレイアウトする
- 「画像の切り抜き」で下絵を切り抜く2:30
「画像の切り抜き」で下絵を切り抜く
- 円形グラデーションで背景を入れる方法5:10
円形グラデーションで背景を入れる方法
- レクタングルから「横長バナー」のデザインにアレンジする時の考え方4:04
レクタングルから「横長バナー」のデザインにアレンジする時の考え方
- その他の要素もレイアウトする4:33
その他の要素もレイアウトする
- 【完成】ガイドを修正して微調整しながら仕上げる5:34
【完成】ガイドを修正して微調整しながら仕上げる
- アートボード名称を書き出し画像用に整理する3:08
アートボード名称を書き出し画像用に整理する
- 【WEB画像】バナーデザインを複数一括書き出ししよう3:51
【WEB画像】バナーデザインを複数一括書き出ししよう
- 【DL】完成データプレゼント0:05
プレゼントです。下記をクリックし完成データ（Illustratorファイル）をダウンロードしてください。
Requirements
- 【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】を最後までクリアした方のみ受講してください。
- 【必須】Adobe Illustrator CC 以上をインストールしていること（体験版OK）＜最新機能が使えない＆古いバージョンでは素材がバグるリスクがあるため＞
- 【必須】Adobe Photoshop CC以上をインストールしている（体験版OK）＜最新機能が使えない＆.psファイルはバージョンダウン保存できないため＞
- 【必須】Adobe Illustrator CC上級者以上のスキル（基本操作（文字入力等）+ ペンツールでトレース等できる程度の基本知識とスキル要）
- 【必須】Adobe Photoshop CC初心者程度のスキル（ファイルを開く、別名保存程度の初歩スキル要）
Description
この講座は「バナーデザイン（WEB広告デザイン）」に特化した専門コースです。
バナーデザインの実演レクチャーは『【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】』の続編になってます。沢山、テクニックを応用する箇所がでてきます。事前に『【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】』を受講してからこの講座に挑戦してください。
Adobe Photoshopは、最新機能を使うので最新バージョン（2021年移行のAdobe Photoshop CC）が必要です。Photoshopのレタッチスキルは初心者レベルのテクニックがあればOKです。
Photoshopに苦手意識がある方は、超初心者用のPhotoshop専門講座『いきなりPhotoshop！』を受講してから挑戦してください。
※講座の詳細は私の「プロフィール」をご覧ください。
Who this course is for:
- Adobe IllustratorとAdobe Photoshopによるバナーデザインの技術を習得したい方