画像で詳しく解説付き!初心者向けバナー講座

初心者向けバナー講座アイキャッチ WEBデザイン
今回は前回の記事の続きでバナーの詳しい作成方法に付いて解説していきます。
前回の記事をみていない方はこちらからどうぞ。
まゆやん
まゆやん

全手順に画像付きで解説しているので初心者の方にも最適な内容になっています。

まずは要るものの準備から。

・真似したい参考バナーを用意する

・素敵な写真を探してくる

・やる気

この3つが揃ったら取り掛かりましょう。
今回参考にするバナーはこちら
デザインがとても素敵ですよね。
用意した画像は商用可能のところからダウンロードしてきました。同じレモンなら良いかと。
レモネード
バナー作りの流れ
  • Step1
    土台を作る
    土台となる長方形を作成
  • Step2
    写真を埋め込む
    用意した写真を入れ込みます
  • Step3
    写真の色合いを調整
    ネットで見た時に綺麗になるように調整
  • Step4
    文字を入れる
    必要な文字を入れ、文字を調整していきます
  • Step5
    画像全体の調整
    全体のバランスを見ながら調整します
  • Step6
    保存
    スライスツールを使ってWEB用に保存します

バナーの土台となる部分を作る

Photoshopのワークスペースを設定したあとの画面からスタートです。この画面までの設定の仕方はこちらの記事をご覧ください。

スクリーンショット8
①左側にある四角の長方形ツールを押す
②白いキャンバスの上で一回クリック
幅と高さを設定して「OK」ボタンを押す
まゆやん
まゆやん

これでバナーの一番下の土台となる部分ができました。

土台となっている長方形の色を変更する

スクリーンショット9
①右側にある移動ツールを選択する
②移動ツールの状態で先ほど作成した長方形をクリック
③左にあるレイヤータブにある長方形が選択されていることを確認する
④属性タブを開く
⑤幅とかの数字が書いてある下の黒色の四角をクリック
クリックするといろんな色のウィンドウが開きます。
⑥開いたウィンドウ内のカラーピッカーと呼ばれる虹色の四角をクリック
カラーピッカーを選択するとこの画面が出てきます。
スクリーンショット10
①大きい枠の右にある縦長の棒で大体の色を決め、大きい枠で明度の調整をします。
もしくは下にあるカラーコードと呼ばれるコードを入力します。
②「OK」ボタンを押すと長方形の色が変わります。
まゆやん
まゆやん

これが長方形や図形の色を変える基本的な手順となります。

カラーピッカーを使った簡単な色の取り方
カラーピッカーを開いた状態で作業スペース内にある取りたい色の上でクリックすると簡単に色が取れます。

写真を埋め込む

スクリーンショット11
①長方形ツールを使い、入れたい写真の幅に合わせて長方形を作成する
今回は60%くらいが写真なので幅540px横500pxです。
まゆやん
まゆやん

土台を作った時と同じ方法で作成してみてくださいね。

作成したら移動ツール(ショートカットキーは「V」)を使い、作成した長方形を土台の黄色にぴったり合わさるように移動させる。ある程度まで移動させると自動で場所を調整してくれる機能があるのでそれに任せれば綺麗に合わせれます。
この時に土台と同じ色だった場合、先ほどの手順で色を変えるか、レイヤータブにある長方形の赤ワクで囲ったところをダブルクリックしても色は変えれます。
②フォルダまたはファインダーを開き、用意した写真をドラッグして作業スペースに入れる
③写真を入れたらサイズ調整をします。
スクリーンショット12
この斜め上にある角をドラッグしてサイズの調整をします。調整後「Enterキー」を押し確定します。
まゆやん
まゆやん

※縦と横の白い点を触ると画像が変な風に引き延ばされる場合があります。(Photoshopの設定やバージョンにもよる)

もしサイズの大きさが気に入らなかった場合は「command(Control)+T」で再度調整ができます。
④入れた画像にマスクをかける
マスクをかけるというのは先ほど作成した長方形の中だけに写真を埋め込むということです。
スクリーンショット13
やり方は「レイヤータブ」にある入れたい画像と長方形の間を「Option(alt)+クリック」をすると埋め込めます。
そうするとマスクがかかり、入れたい長方形の中に写真が入ります!
その後画像の位置や大きさなどを調整し、画像を確定させます。

画像の色を調整する

今回の画像は全体的に赤っぽく、あまり綺麗ではないので参考バナーと同じように「青」と「黄色」が少し強調された色合いに調整をしていきます。

明るさを調整

画像全体の明るさを調整していきます。
スクリーンショット14

画像を選択した状態で赤い枠で囲まれた下の丸部分をクリックします。

その中にある「レベル補正」をクリック。

レイヤー部分に「レベル補正」というものが新しく追加されるので、明るくしたい画像に必ずマスクをつけてください。やり方はレイヤータブ内の画像と「レベル補正」の間を「option+クリック」です。
クリックをすると属性の部分に「レベル補正」が出てきて明るさを調整できるようになります。

スクリーンショット15

①全体の明るさを調整
右に行くほど暗く、左に行くほど明るくなります。

②ハイライト部分を調整
左に行くほど明るくなります。

③暗い部分を調整
右に行くほど暗さが濃くなります。

まゆやん
まゆやん

レベル補正は画像全体の明るさの調整に使います。覚えておくと便利です。

 

色合いを調整する

明るさを調整した時と同じ手順で、レイヤー下にある丸をクリックし、「色相・彩度」を選択します。この時レイヤーからマスクが外れていないかチェックしてくださいね。

スクリーンショット16

色相のところを画像の色合いをみながら調整していきます。今回は黄色っぽくしたいので少し右寄りです。

次にカラーバランスを選択。マスクをかけて、画像をみながら調整していきます。

階調と呼ばれるところを選択し、「中間色」「ハイライト」「シャドウ」の色を調整します。

スクリーンショット17

これで画像の色合い調整は終わりです。

比べてみるとかなり色が変わりましたね。
上が加工前、下が加工した後です。

スクリーンショット18

まゆやん
まゆやん

青と黄色が強調できた色合いになりました!もう少し赤みが抑えれるといいかも。

文字入れ

一番の難関、文字を入れていきます。

まずは文字を入れる前に、真似したいバナーをそのまま真似するのはよくないので文字を変えます。そのためにまずは入れる文字を考えます。

nuiro×ミリンレモン

オリジナルウォータープレゼントキャンペーン

|date|8.27tue-10.31thu

こんな感じで入れていきます。

完全にコピーするという作業も勉強する上で必要ですが、完全にコピー作成したものを第3者に見せたりするとよくないので注意が必要です。

ガイド線を表示させる

ガイド線とはデザインの位置や大きさなどを測るために使われます。画像を書き出してもこのガイド線は一緒に書き出されません。

スクリーンショット19

①Command+Rで定規を出します。

②移動ツールの状態で定規をクリック+ドラッグするとガイド線が出てきます。

③文字を入れる部分の端に合わせてガイド線を配置します。

まゆやん
まゆやん

ガイド線があると便利なのでおすすめです。

もし、ガイド線を消したい場合はガイド線の上を移動ツールでクリック+ドラッグし、定規の方まで持っていくと消すことができます。
この時に細かい作業がしたい場合は「Option(Alt)+マウスのコロコロ」で大きくしたり小さくしたりできます。元の大きさに戻りたい場合は「Command+1」、全体を見たいときは「Command+0」で表示の大きさを変えることができます。

 

上下の線を作る

文字を入れる前に参考にしたバナーには上下に線がありますので「長方形ツール」で線を作っていきます。

スクリーンショット20

高さ2px、幅は適当な線を4本作り、「移動ツール」で移動させます。今回狭い方の線と線の間は2px空いています。この時はまだ適当な配置で大丈夫です。色は変えておきましょう。

同じようなものを作る時はレイヤータブで複製したものを「Option+ドラッグ」すると簡単に複製できます。

 

文字を入れていく

文字を入れるためには左側にある文字のツールを使います。

スクリーンショット21

①左側にある「横書き文字ツール」を選択(ショートカットキーはT)

②文字を入れたいところらへんで1回クリック

③文字が入力できるようになるので文字を入力する

スクリーンショット22

④文字入力が終わったら文字を確定させます
「Command(control)+Enter」で確定

まゆやん
まゆやん

ただEnterを押しただけでは文字は確定されませんので注意してください。

文字の位置は「移動ツール」で移動できます。

 

次に文字のフォントや大きさ、文字の間などを調整するために「文字」のタブを選択

①フォントを変えたいので下向き矢印をクリックし、フォントを選ぶ
今回は「Courier New」だったのでそれを選択

②フォントサイズを調整。適度な大きさになるように、数字が入力されているところのボックスに数字を入力もしくは上下キーで調整する

文字間の調整。オプティカル、メトリクス、数字が選べます。おすすめはオプティカル

④太さが足りなかったので太さを調整。この行は色々触ってみてください。

⑤この時にカラーの調整もできます。今回は線と同じ色に。

文字間の調整とは、普段あまり気にすることはありませんが文字と文字の間は不自然に空いていたり、くっついていたりすることがあります。この文字間の調整をデザイン業界ではカーニングと呼ぶのでぜひ覚えておいてください。
まゆやん
まゆやん

カーニングは調整したい文字間にカーソルを合わせて、「Option+左右キー」で調整できます。

 

文字を入れたら調節をしていく

文字をある程度入れたら調節をしていきます。

スクリーンショット24

①移動ツールの状態で、右側のレイヤータブを開く。
「Shift+クリック」もしくは「Command+クリック」で入れた文字を全て選択します。

「Command+G」で文字のグループ化します。
グループ名を「ダブルクリック」し、わかりやすいものに名前を変更します。

スクリーンショット25

③作成したグループを開き、4つの文字を選択します。

中央上に出ている串のマークを一回クリック。すると文字が中央揃えになります。

⑤「Campaign」以外の3つの文字を選択し直し、サンドイッチされたマークを押す。
これで縦の文字と文字の間が均等に配置されます。

 

まゆやん
まゆやん

この串マークはほとんど何にでも使えるのでかなりおすすめです!

 

上の文字全体の空白を調整する

スクリーンショット26

①上の方で作った線をグループ化「Command+G」します。
グループ名はわかりやすいように「上の線」「下の線」とつけています。

②上の文字グループ、上の線、下の線のグループを全て選択し、さらにグループ化します。

③②で作成したグループを移動ツールで選択した状態で、中央上にある串マークを押し、全体を中央で揃えます。

 

下の文字を入れていく

オリジナルウォータープレゼントキャンペーンを入れていきます。

スクリーンショット27

この時に初めての2行になります。改行は「Enterキー」でできます。文字と文字の間が空いているので調整します。

レイヤータブ内の「オリジナルウォーター…」が選択されている状態で、文字タブを開きます。
Aにアンダーラインのついたマークが2個あるところで数字を入れたり、上下キーで文字の行間を詰めていきます。

スクリーンショット28

行間が詰め終わったら、「ミリンレモン」の文字に合わせて「ガイド線」を設置。
適度な大きさになるように「プレゼントキャンペーン」を「ミリンレモン」の幅に調節します。

②次に文字ツールを使い「オリジナルウォーター」部分だけをドラッグして選択している状態にします。

「Option(Alt)+左右キー」を押し、カーニングします。文字の間を「プレゼントキャンペーン」に合わせていきます。

まゆやん
まゆやん

文字を詰めるのは文字タブのV/Aというところでもできます!

次に足りない文字や日付を入れていきます。

スクリーンショット29

文字間や空白などが空きすぎていたり文字が大きすぎたりするので調整していきます。参考バナーをよく見ると、日付の曜日が小さいので小さくしていきます。

①小さくしたい部分を文字ツールを使い、ドラッグして選択します。

②文字タブ内にある100%とある部分を80%くらいに調整します。この100%というのはそのフォントが100%で表示されているよ。という意味です。

文字の途中で%が変わっているのであとでフォントサイズを変更した時にもその比率が維持されます。とても便利なので覚えておくと◎

画像全体の調整をしていく

スクリーンショット30

①作成した下の文字をグループ化します。

②先ほど作成した上の文字グループと下の文字グループをさらにグループ化して「文字」というグループにします。

③文字が入っている黄色の背景部分にガイド線を設置します。

④左側にある「長方形選択ツール」を使い、④で設置したガイド線通りに長方形選択ツールを使ってドラッグし全体を囲みます。

「移動ツール」を選択した状態で②で作成した文字グループを選択、中央上にある串のマーク、横になった串のマークを押して黄色の枠内で左右中央揃えにします。

まゆやん
まゆやん

これでバナーの作成、全体の調整が終わりました!お疲れ様でした!

 

作成したバナーを保存する

ここまできたらあと一息です!

スクリーンショット31

①左側にある、「スライスツール」を選択します。

②スライスツールを使い、バナー全体をドラッグし囲みます。そうすると黄色い枠みたいなので囲まれます。これをスライスと言います。

③①で選択した「スライスツール」を右クリックで「スライス選択ツール」を選択します。作成したスライスの上でダブルクリックをするとウィンドウが開きます。

この時によくあるのが、スライスとバナーの大きさがあってない!となることです。「スライス選択ツール」を使い、スライスの端にカーソルを合わせるとカーソルが変わるのでクリックし調整します。

④開かれたウィンドウで名前を変え、寸法を確認しバナーと同じサイズであれば「OK」ボタンを押します。

まゆやん
まゆやん

これで保存できる状態になりました!スライスがないと一部だけ保存ができないのです。

 

次に、WEB用にバナーを保存していきます。

スクリーンショット32

「Shift+Option+Command+S」を同時に押し、WEB用に保存画面を開きます。

右上で保存形式が選べます。今回はJPGで保存するのでJPGを選択、やや高画質を選択。

そして保存ボタンを押して、保存するファイル先を選んだら完了!

まゆやん
まゆやん

WEB用に保存画面を開く時にショートカットキーを押すことが大変ですね。慣れたら片手でできるようになります。おすすめの指は「Shift薬指」「Option中指」「Command親指」「S人差し指」です。

最後に

長い時間お疲れ様でした。ここまでくれば一通りバナーが作れたかと思います。最初はわからないことだらけで時間もかかりますが、バナーを作成していくうちに技術力もスピードも上がるので大丈夫ですよ。

最後に参考にしたバナーと作成したバナーの比較です。

unicoキリンレモンバナー
Unico×キリンレモンより引用

バナー練習用

いかがでしょうか。フォントがなかったり、写真の加工が甘かったり、線をよく見ると手書き風だったりと少し違う点はありますがそこそこの出来栄えだと思います。

練習でとことん追求するとどんどん技術力が上がっていくのでバナーの作成はたくさんしましょうね。

 

タイトルとURLをコピーしました