• 授業レポート 広告バナー制作講座

授業レポート Photoshop広告バナー制作実践講座 第5日目(8分34秒)

Photoshop広告バナー制作実践講座 第5日目

前回に引き続き、Photoshop広告バナー制作実践講座 第5日目の授業レポートです。

Photoshop バナー 作成 講座

5日目もこれまでと同様、授業前半は、4日目に出された課題の添削とPhotoshop機能解説を行いました。

課題は、コスメ系クライアントの広告用バナーの制作。

今回は、2パターンの作成に挑戦していただきました。

(メルマガでも同じお題を出しています。)

  • パターン1→プレミアム感・高級感
  • パターン2→フレンドリー感・親しみやすさ

同じコスメ系バナーでも表現するイメージが全く異なるお題だったので、「難しかった!!」という声も多く聞かれましたが、作品のクオリティは回を追うごとに、アップしていて、みなさん自信もついてきているようです(^^)

これら、2つのイメージを作り分けるコツは、

  • イメージにあった画像やイラストを選ぶ。
  • イメージにあった書体を選ぶ。
  • イメージにあった色使い。

これを基本に、レイアウトを考える。

  • 枠の中での画像と文字の占める割合。
  • 配置する情報の優先順位によって、文字の大きさ、太さに変化を付ける。
  • 色の濃さ、薄さを意識することで、メリハリを付ける。

これらを意識するだけで、バナーという小さな枠の中での表現の幅がグッと広がると思います。

さて、今回のPhotoshop機能解説は、Illustratorで作成されたオブジェクトをPhotoshopへ持ち込む方法でした。

こちらは、動画で解りやすく解説していますので、ぜひ、ご覧ください。

Illustratorで作成されたオブジェクトをPhotoshopへ持ち込む方法

この動画でのpsd・aiファイルは以下からダウンロードできます。

  • Photoshop広告バナー制作実践講座 サンプルデータ

Illustratorで作成された特定のオブジェクトをPhotoshopへ持ち込む方法の一つとしてスマートオブジェクト形式で配置する方法があります。

動画解説は、この方法を利用してPhotoshopで作成中のバナーに、Illustratorで作成したオブジェクトをコピー&ペーストで配置していきます。

IllustratorからPhotoshopへのペースト形式

IllustratorからPhotoshopへのペースト形式

スマートオブジェクト
Illustrator上でのベクトル情報を保持した状態でPhotoshopにペーストすることができます。
スマートオブジェクトにしておくことで、拡大・縮小・回転などの変形を行ったり、フィルター効果をかけても、データが劣化することなく、ベクトル情報が保たれます。
ペーストしたレイヤー(ベクトルスマートオブジェクト)のサムネイル部分をダブルクリックするとIllustratorでファイルが開かれ編集ができます。
編集後、保存すると、Photoshop上でもその編集が反映される仕組みになっています。
ピクセル
通常のビットマップオブジェクトとしてペーストされます。
変形すると劣化します。
パス
オブジェクトの塗りや線の情報などが無視されたパスだけのデータとしてペーストされます。
シェイプレイヤー
べた塗りのシェイプレイヤーとしてペーストされます。
Photoshop上での描画色が適用されます。
複合パスなどの情報は無視されます。

スマートフィルター

Photoshop スマートフィルター

対象のレイヤーがスマートオブジェクトになっていると、元の画像をそのまま維持してフィルター効果をかけることができます。

スマートフィルターの状態では、効果のかかり具合を編集したり、一時的に非表示にすることができます。

授業後半は、課題制作に取り組んでいただきました。

今回の課題は、コワーキングスペースの集客用バナーの依頼を受けたという想定です。

メルマガ読者限定で課題制作を行います。
ご希望者には私の方で添削させていただきます(^^)

メルマガにまだ登録していない方はこちらからご登録ください。

次回は授業最終日。

受講生の質問を中心にまとめていく予定です。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでWebcreatorsTipsをフォローしよう!

この記事をシェアする



まずは無料のWebデザインメルマガ講座から体験してみよう!

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルがアップするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP