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

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

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

私が講師をさせていただいているWebスクールで、【Web広告バナー制作実践講座】を行っています。

週1・2時間×全6回の予定で、Photoshop・Illustratorを始めて2~3ヶ月前後の受講生を対象に「短期間でお仕事レベルの広告バナーを作る」力をつけよう!というミニコースです。

授業内容は、

「どうしたらPhotoshop・Illustratorの経験の浅い人でもお仕事レベルの広告バナーを作ることができるか?」

私が考えて考え抜いて作った独自のカリキュラムになっています。

その授業内容を全6回分、レポートしていきます。

第1日目は、スキルチェックを兼ねたPhotoshopの復習。

Photoshopで、図形が描ける・文字が打てる・レイヤー操作ができたら、バナー制作で次に覚えるべきは、何はともあれ「レイヤーマスク」。

今回は、これを中心に授業を進めました。

レイヤーマスク解説内容

  • レイヤーマスクの基本
  • 選択した範囲のみ表示させる(見た目上の切抜き)
  • 画像の周囲をぼかすテクニック(選択範囲をぼかした、見た目上の切抜き)
  • グラデーション上のレイヤーマスクで背景となじませる。

レイヤーマスクは「マスク」の隠すという意味の通り、レイヤーの一部を隠すためのモノ。

元画像のデータを残したまま、画像の見せたい部分と見せたくない部分をコントロールできる機能です。

レイヤーマスクを使えば、直接、画像を加工することがないので、何度でも編集しやり直しがきくのでとても便利です。

レイヤーマスクのポイント

白色で塗った部分は表示される・黒色で塗った部分は非表示になる
レイヤーマスクは、グレースケールの画像で表示され、黒い部分は非表示に、白い部分が表示されるという管理方法になっています。
自分がどちらのサムネールを編集しているのかを常に把握すること
画像にレイヤーマスクを追加すると、同じレイヤー上に、画像のレイヤーサムネールとマスクサムネールの2つのサムネールが表示されます。
画像に対して操作する場合は、画像のレイヤーサムネール。
レイヤーマスクの編集をする場合は、マスクサムネールを選択している必要があります。

この部分が、今一つ把握しきれていない方が多かったです。

それから、みなさん、背景となじませるグラデーション状のあたりが一番苦戦されていました。

一通り、解説後、一人一人回って、理解できていない部分をサポート。

全員にレイヤーマスクをマスターしてもらい、1日目は終了。

なぜ、レイヤーマスクなのか?

バナー制作に限らず、Photoshopで様々なイメージ制作を行う時、すべてを教科書通り行うことは、まずありません。

どんなイメージを作りたいか?どんな画像合成をしたいか?

自分の知っている、Photoshop機能の引き出しの中から何をどう使い、表現したいことを実現させるか?

というアイデアが必要になります。

そんな時、役立つのがレイヤーマスクです。

レイヤーマスクは画像だけでなく、文字や図形、各種効果にも適用することができます。

選択範囲と組み合わせることで、バリエーション豊かな表現が可能になります。

そのことから、まずは、レイヤーマスクの基本操作を覚えよう!ということで、授業、第1日目にみなさんに必ずマスターしてもらいたかったのです。

Photoshopの操作は、レイヤーマスクに限らず、ガンガン使っていかないとすぐに忘れてしまいます。

今日は、スキルチェックのためのPhotoshopの復習でしたが、2日目からは、授業前半は、Photoshopの機能解説、後半はバナーの課題制作という流れになります。

メルマガ読者限定で課題制作も盛り込んでいき、ご希望者には私の方で添削させていただこうと思っています(^^)

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

次回のPhotoshopの機能解説はペンツールを使った切抜きを行う予定です。

そして、ガンガン、実践向けの課題をこなしていただきます。


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

最新情報をお届けします

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

この記事をシェアする



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

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

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

PAGE TOP