【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop

基礎ノウハウから応用まで、WEB用「バナーデザイン」をAdobe Illustrator(イラストレーター)とPhotoshop(フォトショップ)を実際に操作しながら完全習得できます。

4.78 (134 reviews)
Udemy
platform
日本語
language
Web Design
category
1,617
students
14 hours
content
Apr 2023
last update
$59.99
regular price

What you will learn

Adobe IllustratorとAdobe Photoshopによるバナーデザイン技術の習得

バナーデザイン基礎知識の習得

高画質WEB画像の作成方法の獲得

テンプレートによる効率の良いバナーデザイン手法の獲得

Description

この講座は「バナーデザイン(WEB広告デザイン)」に特化した専門コースです。

バナーデザインの実演レクチャーは『【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】』の続編になってます。沢山、テクニックを応用する箇所がでてきます。事前に『【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】』を受講してからこの講座に挑戦してください。


Adobe Photoshopは、最新機能を使うので最新バージョン(2021年移行のAdobe Photoshop CC)が必要です。Photoshopのレタッチスキルは初心者レベルのテクニックがあればOKです。

Photoshopに苦手意識がある方は、超初心者用のPhotoshop専門講座『いきなりPhotoshop!』を受講してから挑戦してください。

※講座の詳細は私の「プロフィール」をご覧ください。


Content

バナーデザインマスター講座へようこそ

この講座の学習内容
Adobe Fontを自動でダウンロードする自動アクティベート設定のやり方
【ヘルプ】動画が再生できない、ダウンロードできない場合
Q&Aの使い方(質問、メッセージ送信方法)
スクリーンショットを必ず投稿してください
Illustratorの不具合について

シンプルなバナーデザイン

このセクションの学習内容
【DL】練習用データのダウンロード
【ヘルプ】ダウンロードできない場合
ダウンロードデータの解説
「クラウドドキュメント保存」と従来の「コンピューター保存」交互に切り替える方法
素材をラスタライズする方法
下絵レイヤーを作る&参考用ラスター画像を半透明表示する方法
指定したアートボードの中央にオブジェクトを整列する方法
文字を別のアートボードにレイアウトする
文字を縦横比率で指定する方法
文字の欧文ベースラインで文字を下に揃える方法
【裏技】書体をクルクルと素早く確認しつつ変更する方法
文字に赤線を引く(スポイトツールで色だけ抜き取る方法)
帯のデザイン(スマートガイドとポイントにスナップの設定方法)
【裏技】文字を帯の中心に整列するアピアランスの設定方法
全体バランスを微調整する
【PSD】写真画像切り抜きをPhotoshopでレイヤーマスクサムネイルで実現する方法
【PSD】Photoshopで髪の毛を切り抜く部分を微調整する方法&レイヤーマスク自動複製の設定方法
写真をイラレにリンク配置する方法
【重要】トリミング表示の使い方
イラレのクリッピングマスクで写真をトミングする方法
イラレの「リンク」と「埋め込み」のバージョン別表示について
リンク写真をPhotoshopで更新しイラレに反映させる方法
埋め込み画像にする方法
埋め込み画像をリンク画像にする方法
隣のアートボードにデータをコピーしバナーデザインをアレンジする
イラレのアートボードそのものをまるごと複製する方法
文字を縦組みにする&角度をつけるアレンジ方法
「文字タッチツール」で斜めにした文字をさらにアレンジする方法
アレンジで728✕90pxのバナーに写真をレイアウトする
ロゴと文字をアレンジレイアウトする&サイズ差のある文字をアウトライン化し整列させる
CTA部分のアレンジ(文字の縦組み)
オフセットのやり方&「ガイド作成」ショートカット
バナーデザインの仕上がりをチェックする
ロゴデザインの背面に背景を入れる方法&書き出されないレイヤーにする設定方法
不要なアートボードを削除する方法
アートボードの名前と順番の変更方法
【重要】WEB画像用「スクリーン用に書き出し」の正しい設定方法
【検証】わざと座標に小数点を入れて書き出すとどうなるか?
【DL】完成データプレゼント

WEBバナー画像(jpeg,png)が超高画質化する設定と具体的やり方の実演

このセクションの学習内容
スクリーン用書き出し2倍サイズ「サフィックス」付きでバナー用画像をワンクリックで一括高画質書き出する方法
【PSD】バナー画像サイズと解像度をPhotoshopで確認する
【検証】ブラウザで画像サイズを再スケールして画質を比較する
【記事】バナー画像の比較をご覧ください
【検証】WordPressでもバナー画像を比較

バナーデザイン用テンプレートの使い方

このセクションの学習内容
【DL】バナーデザイン用テンプレートのダウンロード
バナーデザインテンプレートの解説
バナーサイズについての解説
PC、モバイルマークの解説
【予備知識】テンプレートレイヤーについての解説
一括でアートボードを削除する方法
アートボードを複製コピーで増やす方法
アートボードの中身をそのまままるごと別ファイルにコピペする方法
アートボードを独自サイズで新規作成し名前までオリジナルで作成する方法

ガイドの作り方とアクションとショートカット

このセクションの学習内容
【重要】ガイドの元になるオブジェクトの作り方
アートボードの中心にオブジェクトを整列させる方法
パスのオフセット&ガイド作成方法
【自動化】アクションを作る方法
アクションにオフセット処理を記録する方法
アクションを実行し多重ガイドをワンタッチで自動処理にする裏技
整列したいアートボードを指定する方法
ガイドをロックしたり自由に動かしたり位する方法
残りの箇所もアクションでガイド化する

【追加】バナーデザイン用テンプレートVer2

このセクションの学習内容
【DL】バナーデザイン用テンプレートのダウンロード
バージョンアップ内容
アートボードウィンドウからアートボードをコピーする方法
アートボードサイズの変更
透明枠からガイドをアクションで作る
ガイドの表示、非表示、固定、固定解除、レイヤー間移動の方法
スカイスクレイパー160×600追加
アートボードの並び順を変更する方法

バナーデザインのコツ徹底解説(ゆげ玉ラーメン)

このセクションの学習内容
バナーデザインの流れと目的
ロゴについて
権威性、実績のPRのためのデザインについて
地図、写真、CTAボタンについての考え方
バナーデザイン掲載場所と目的およびCVRの基礎知識
ターゲットは絞れば絞るほど良い理由
デザインのリサーチ「エッセンス」を抽出する考え方
情報に「優先順位」をつける
バナーデザインで色バランスがまとまる着色方法
色を明度のコントラストで調節する考え方

【実演】ゆげ玉ラーメンバナーアレンジ

このセクションの学習内容
【DL】練習用データのダウンロード
画像のラスタライズ処理
イラレで「画像の切り抜き」をする方法
画像のレイヤー間移動と下絵レイヤー設定方法
画像マスクとマスクサイズを後から変更する方法
マスクした写真の中身だけを移動、拡大縮小し大きさを調製する方法
サブレイヤーを使わず固定、非表示で個々のオブジェクトを瞬時に制御する方法
文字を曲げるためのパスを作る方法
パス上文字ツールの使い方とカーニングトラッキング調整のやり方
パス上文字ツールでさらに文字をカーブさせる
【比較】効果のワープとパス状文字ツールの違い
シンボルマークのレイアウト
ボタンを別のアートボードと「同じ位置にペースト」する
真円作成&スポイトで卵色を着色する方法
文字列を真ん中にレイアウトする
クローズパスを半透明にする方法
描画モードの適用
【追加】描画モードを全部適用するアクションの作り方
CTAボタンに写真から色を入れる
ガイド見ながらレイアウトを仕上げる
【高解像度】バナー画像のWEB保存
【DL】完成データプレゼント

ファイナルFX「ファイナル証券」100万円キャッシュバックキャンペーンバナーデザイン

このセクションの学習内容
ファイナル証券様からの依頼内容
【DL】練習用データのダウンロード
【デザイン】リボンでキャンペーン内容を装飾した理由
【デザイン】要素の強弱でメリハリをつける重要性
【デザイン】footerの囲み作ってしまう
【デザイン】人物の向きと目線はそっぽを向いてはいけない
【小技】デザイン検証で便利な「復帰」の使い方
【準備】アートボードをコピーする
【準備】ラスタライズし下絵画像にする
【PSD】Photoshopで人物をマスクして切り抜く
【PSD】Photoshopのマスク範囲を微調整する
【PSD】Photoshopで作業後のレイヤーを自動生成する設定方法
【PSD】拡張子変更とその意味
【PSD】Photoshop切り抜きツールで必要な箇所だけ残す方法
Photoshop画像をIllustratorに配置する
【環境設定】アイコンをわかりやすくする方法&Photoshopで開いて編集する
イラレとPhotoshopを同時に使う方法
【ワンクリック】文字に装飾を入れる
文字を分解しサイズ&組方向を変えてレイアウトする方法
文字詰めする
スポイトで文字情報抽出しながらレイアウト微調整
吹き出しを作る
写真をアートボードサイズで切り抜き中身だけダイレクト選択ツールで動かす方法
footer部分の帯デザインをペンツールで作ろう!
アートボードサイズで背景を入れる
微修正&メリハリとトレードオフについて
紙吹雪の「シンボル」についての解説
【シンボルスプレーツール】消したり混ぜたりする方法
【シンボルシフトツール】シンボルを移動させる方法
【シンボル】直径サイズ変更方法
【シンボルスクランチツール】シンボルをクリック箇所に集める方法
【シンボルリサイズツール】 シンボルを拡大OR縮小させる方法
【シンボルスピンツール】シンボルを回転させる方法
【シンボルステインツール】シンボル彩度を変更する方法
【シンボルスクリーンツール】シンボルを透明にする方法
【シンボルスタインツール】シンボルにグラフィックスタイルを適用する方法
【バグ】シンボルツールのバグ検証
シンボルのリンクを解除する意味と理由
【データ整理】孤立点だけ選んで削除する方法
仕上げ
アートボードの削除で完成データを上書き保存
【完成】バナーを高解像度JPEGに書き出す
【微修正】再書き出しでバナー画像を上書き保存する方法
【DL】完成データプレゼント

【実演】高級ブランド「シャイラル」のバナーデザイン

このセクションの学習内容
【DL】作例ダウンロード
シャイラル様からのご依頼内容の解説
高級感のデザイン理論
【余白】上質をデザインする方法
【比較】メリハリ&情報を最小化する考え方「文字サイズが同じくらいならどうなるか?」
【構図】商品だけを目立たせるレイアウト方法の考え方
ラスタライズと「画像の切り抜き」機能の解説
【PSD】白黒モデル写真の作り方の手品の種を見せます
【PSD】モデルだけ切り抜く
【PSD】トーンカーブで明るさを調整するプロ手法暴露【自然な美白】
【PSD】写真を白黒し一部だけカラーにする方法
モデルの写真を配置しマスクする
商品画像をレイアウトする
【鏡面反射】不透明マスク用グラデーションを作る方法
不透明マスクを適用する方法
不透明マスクをさらに全体的に「透明」にする方法
Newの素材を完璧に作る方法
【縦組み】文字をレイアウトする
【文字装飾】アピアランスの作り方
アピアランスをグラフィックスタイルにしてオリジナル素材にする方法
斜めグラデーションの作り方(グラデーションツールの使い方)
【完成】余白の取り方と仕上げ作業
アレンジで要素をレイアウトする
「画像の切り抜き」で下絵を切り抜く
円形グラデーションで背景を入れる方法
レクタングルから「横長バナー」のデザインにアレンジする時の考え方
その他の要素もレイアウトする
【完成】ガイドを修正して微調整しながら仕上げる
アートボード名称を書き出し画像用に整理する
【WEB画像】バナーデザインを複数一括書き出ししよう
【DL】完成データプレゼント

【実演】スポーツライブチャンネル「GAZONE」

このセクションの学習内容
【DL】作例ダウンロード
ご依頼内容の解説
【ラスタライズ】下絵画像を作成しよう【画像切り抜き】
下絵画像用レイヤーに移動させよう【レイヤーオプション】
作例Aのデザイン構造解説(手品の種明かし)
【PSD】AI自動レイヤーマスクで切り抜きする方法
Photoshopファイルをイラレに2枚同サイズ&同一座標に配置しレイアウトする方法
文字を写真と写真の間にレイアウトする方法
CMYK、RGBカラーモードの修正方法
文字レイアウトを微調整して整える
【文字組み】ショートカットで文字を効率選択してバラバラにする方法
組方向変換&AdobeFontの適用方法と文字の微修正方法
帯(座布団)を入れて仕上げる
【完成】帯を半透明にして完成させよう
【作例B】作例解説
写真をコピーし2枚同時にサイズ調整する方法
【完成】作例Bの写真と写真の間に文字を入れて仕上げる
コピーしたアートボードと同じ位置に別のアートボードにコピペする方法
ロゴマークの形で写真を切り抜く方法
【完成】作例C仕上げ「帯の上部をアンカーポイントツールで膨らませる方法」
バナーデザインをアレンジして複数案生み出す方法
【作例モバイルB】他のアートボードーから要素をコピーレイアウトする
【完成】文字詰めして仕上げる
【作例モバイルA】アートボードをコピーする
アピアランスでアウトライン化して完璧に整列させる方法
【完成】余白を調整しながら仕上げる
【作例バナー横長】 要素をコピーしバナーサイズに合わせて変形する方法
一応座標位置確認&書き出しテスト
【完成】写真リサイズ
【作例スカイスクレイパー】サイズに要素を調整配置する方法
【完成】写真と文字をコピーし縦組にしてからサイズ調整する方法
保存、別名保存で準備する
アートボードを整理整頓する方法
アートボードの座標位置とサイズチェックの正しいやり方
【完成】バナー画像書き出し&最終チェックのやり方
【DL】完成データプレゼント

ボーナスレクチャー

ボーナスクチャー

Screenshots

【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Screenshot_01【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Screenshot_02【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Screenshot_03【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Screenshot_04

Reviews

えみ
November 15, 2023
イラレやPhotoshopの個別の機能の使い方は分かっていても、いざ、それを繋げて何かを作り上げるとなると手が止まってしまって。 こちらで一通りの作業を行えて、以前より作業効率に引き出しが増えました。 バナー作りの基本が学べて良かったです、ありがとうございました。
大越
September 21, 2023
千葉名人さんの講座はいくつか受講しましたが、今回も期待通りでした。単純にツールの使い方だけではなく、即戦力になるノウハウが詰まっているいるように思います。 現場にいないと分からない常識的なものも教えてくれます。 早速バナーを作り使ってもらうことになりましたが、今までより格段にレベルアップしたように思います。

Charts

Price

【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Price chart

Rating

【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Ratings chart

Enrollment distribution

【上級者用】続!バナーデザインマスター講座|Adobe Illustrator(イラストレータ) & Photoshop - Distribution chart

Related Topics

5016532
udemy ID
12/9/2022
course created date
4/16/2023
course indexed date
Bot
course submited by