会員の方はこちらトップバナー制作テクニックバナーを作ってみよう【初級編】コスメ通販サイトのバナーを作ろう(後半)バナー制作テクニックコスメ通販サイトのバナーを作ろう(後半)このレッスンでは、Photoshopを使ってお題に沿ったバナーを制作していきます。後半では本格的にバナーのデザインを行っていきます。公開日:2019/11/19最終更新日:2019/11/19目次1.写真を選ぼう2.写真を切り抜こう3.文字と切り抜いた写真を配置してみよう4.白黒にして配置を考えよう5.フォントを選ぼう6.装飾を加えよう7.色をつけてみよう8.完成9.まとめ1.写真を選ぼうまずはバナーに適した写真を選んでいきましょう。今回のターゲットには、"化粧品、コスメ、スキンケアしたい"という背景があるので、化粧品と判断できる写真を選びます。ターゲットが想起しやすいよう女性の写真を入れてもいいですが、今回はより、商品をメインに打ち出していきたいので商品単体の写真を選びます。今回は以下の写真を選びます。ダウンロードはこちら※写真AC様の会員登録が必要となります。今回はMサイズを使用します。続いて、背景写真も選びましょう。背景には以下の写真を使用します。ダウンロードはこちら背景に使用する写真は最後に使用するので、ダウンロードだけしておきましょう。2.写真を切り抜こう今回は2枚の写真をそれぞれ組み合わせバナーを作成していきます。メインとなる商品画像を切り抜いていきます。前回の「エステサロンのサイトバナーを作ろう(後半)」で紹介された方法と同様に切り抜いていきます。「クイック選択ツール」を選択します。メインの商品画像を切り抜いていきます。商品エリアをドラッグで塗り絵をする感覚でなぞっていきましょう。背景が少し選択範囲に含まれても大丈夫です。altを押しながらドラッグしていくとその部分が選択範囲から削除されます。次に選択範囲の境界線を滑らかに修正していきます。滑らかに」から変更することができます。この調整をする前と後で、境界線の滑らかさが変わっているのがわかります。境界線の調整が完了したら、「レイヤーマスクを追加」を選択します。これで切り抜きが完了します。3.文字と切り抜いた写真を配置してみよう前半で考えたキャッチコピーとキャンペーン内容の文章、そして先ほど切り抜いた写真をバナーに詰め込みましょう。この段階でレイアウトは考えなくても良いです。4.白黒にして配置を考えよう最初からフルカラーで考えるのは難しいことと、明暗がはっきりしているかを確認するためにも、まずは白黒にして配置を考えみましょう。すると白黒レイヤーの下にあるレイヤーが全てがモノクロで表示されるようになります。流れを考えるレイアウトを考えるにあたって、流れを考えてみましょう。バナーをみた人と会話をするように考えてみてください。1キャッチコピー(もち肌化粧水誕生)2ビジュアル(写真)3サブキャッチと内容(頑張るお肌のための補給液/ビタミンC/ヒアルロン酸/コラーゲン/通常価格3,800円/今だけ価格1,800円/お申し込みはこちら)この流れに沿うように配置していきましょう。流れを考えることは、バナーを見た人の心理の流れに繋がります。配置するでは先程の流れをもとい配置していきましょう。「メインキャッチ→商品画像→サブキャッチ→価格→申し込みボタン」の流れで配置しました。Gothic」を使用し、もち肌の柔らかさを表現します。Gothic」「W6」を使用していきます。キャッチコピーにレイヤースタイルをつけようキャッチコピーにレイヤースタイルをつけ、読みやすくしていきます。レイヤースタイルで「境界線」にチェックし、以下の画像のように設定していください。すると黒背景に重なって、見えずらくなっていたテキストが見えやすくなりました。6.装飾を加えよう現在のバナーに装飾を加えていきます。現在の配置だと、中間の余白が気になります。そこで、「ビタミンC(配合成分)」「ヒアルロン酸」「コラーゲン」は同じ情報カテゴリーに分類されるので、丸で囲ってあげましょう。続いて、価格エリアを目立たせていきます。1「長方形ツール」でテキストの後ろに背景を作ります。2「通常価格」と「今だけ価格」のテキストを目立たせていきます。今回は角丸を使用しています。3三角形を3つ連続で並べて、矢印を作ります。4お申し込みボタンを作成します。※ボタンには追加で影を作成します。ボタンを複製しておきます。「塗り」と「線」はなしで設定します。コピーした方にレイヤースタイルを加えていきます。設定は以下の通りです。パターンオーバーレイを設定すると以下のような画像ができます。影としてコピー元のボタンの下に配置したら、お申し込みんボタンの完成です。7.色をつけてみようレイアウトができたので、色をつけてみましょう。白黒レイヤーを非表示にして作業しましょう。色は写真の中で使われている色を選ぶと、まとまった印象を与えます。ターゲットイメージに合ったカラーを選択することも重要となってきます。カラー比率を考えながら作成すると良いでしょう。今回は以下のカラー比率で作成しました。「写真を選ぼう」で背景用にダウンロードしていた写真をバランスを見ながら背景に配置します。背景と、その前の情報が被ってしまい乱雑した印象になるので、背景の「不透明度50%」で設定します。透明度を下げることでキャッチコピーと商品がより見やすくなります。8.完成これで完成です。9.まとめ今回はコスメ通販サイトのバナーを作成しました。コスメサイトの強み、ターゲットの背景を結びつけ作成していきました。「選択範囲を変更」は普段のデザイン業務の中でも役立つ技術です。カラー比率はターゲットイメージに与える印象を左右する重要な要素となります。この点も踏まえながらデザインすると良いでしょう。