Photoshop(一部Illustrator)を使って、バナーを作る

今回は、Photoshoを使って、バナーを作ります。
ロゴに関しては、Illustratorを使って作ります。

今回作るのは、以下のようなバナーです。
架空のシャンプーのバナーです。
尚、手順の中にランダム性のある工程が多く、ぴったり参考の物と同じにはなりません。

参考サイト
http://banner.keizine.net/archives/5822/

素材サイト
https://pixabay.com/ja/photos/シャンプー-シャンプー容器-1860642/

完成イメージ

１．まずはロゴを用意する

Illustratorでロゴを作ります。
今回は、テキストだけで構成された、シンプルなものとします。
テキストツールで、以下のテキストを二つ作ります。

文字１－－－－－－－－
文言：LOREAL
フォントファミリー：メイリオ
フォントサイズ：21pt

文字２－－－－－－－－
文言：PORIS
フォントファミリー：メイリオ
フォントサイズ：8pt

以下のように配置しアウトライン化します。

もっと凝ったロゴを作りたい場合は、以下の記事などを参考にしてみてください。

Illustratorで、ロゴを作る

２．Photoshopの新規ファイルを作る

作成するバナーのサイズで、新規ファイルを作ります。

今回は、以下のサイズで作成します。

横：300px

縦：250px

解像度：72 ppi(ピクセル/インチ)

以下のようにファイルが出来上がります。

名前を付けて保存しておきます。

３．背景を作る

3-1.背景のベースを作る

描画色と背景色が初期値（描画色が黒、背景色が白）であることを確認。

もし、違う色を選択していた場合、以下の画像を参考にクリック。

[フィルター]メニュー　－＞　[描画]　－＞　[雲模様１]をクリック

雲模様が描画されます。

雲模様フィルターは、描画色と背景色を使って、ランダムに雲模様を作ってくれます。

雲模様のレイヤーに名前を付けます。

今回は、「背景ベース」とします。

背景ベースレイヤーが選択されている事を確認して、[フィルター]メニュー　－＞　[スマートフィルター用に変換]をクリックします。
※今後の手順で、フィルターを使います。値を変えることで、最終的な結果が変わるので、値を後で変えてみることが出来るように、スマートフィルターに変換しています。

[フィルター]メニュー　－＞　[ぼかし]　－＞　[ぼかし（ガウス）]を選択する。

半径3pxで適用させる。

[色調補正]パネルより、[グラデーションマップ]を選択。

グラデーションの色を、以下のように設定します。

位置：0%
色：#ffd051

位置：100%
色：#ffca14

これで、背景のベースは完成です。

3-2.光を作る

新規レイヤーを作ります。
レイヤー名を、「光-小さめ」とします。

ツールパネルより、ブラシツールを選択し、描画色を白に設定しておきます。（背景色は、何色でも問題ありません）

さらに、ブラシパネルで、ブラシの設定をしていきます。

ブラシ先端のシェイプ
直径：10px
間隔：50%

シェイプ
サイズのジッター：80%
角度のジッター：100%
真円率のジッター：50%
最小の真円率：25%

散布
散布：1000%
数：1
数のジッター：0

「光-小さめ」レイヤーが選択されている事を確認して、
以下の図のように書いていきます。
ランダムな円が書かれます

「光-小さめ」レイヤーを、スマートフィルター用に変換します。
[フィルター]メニュー　－＞　[ぼかし]　－＞　[ぼかし（ガウス）]を選択する。
半径10pxで適用します。

同様の手順を、レイヤー名やブラシの設定、ぼかす量を変えて行います。

レイヤー名：光-中ぐらい

ブラシの設定
ブラシ先端のシェイプ
直径：20px
間隔：80%

シェイプ
サイズのジッター：80%
角度のジッター：100%
真円率のジッター：90%
最小の真円率：50%

散布
散布：700%
数：1
数のジッター：0

スマートフィルタに変換
ぼかし（ガウス）：半径6px

以下のようになります

大きめの光を書いていきます。
今回は、ブラシの設定を切って、一つずつクリックする感じで丸を書いていきます。

新規レイヤーを作ります。
レイヤー名「光-大きめ」

ブラシの設定を以下に直します。

ブラシ先端のシェイプ
直径：50px
間隔：1%（この設定は、今回の作業においてはさほど意味はありません。どちらかというと、設定を元に戻しておくという意味で1%としました）

シェイプ
選択をはずす

散布
選択をはずす

画面上を、数か所クリックします。
以下のようになればOKです。

スマートフィルタに変換
ぼかし（ガウス）：半径5px

以下のようになればOKです。

最後に、「光-小さめ」、「光-中ぐらい」、「光-大きめ」の三つのレイヤーの描画モードを、「オーバーレイ」に変えます。

3-3.逆光を作る

新規レイヤーを一番上に作ります。
レイヤー名を「逆光」とします。

逆光レイヤーが選択されている事を確認して、
[編集]メニュー　－＞　「塗りつぶし」をクリック

以下のように、画面が黒く塗りつぶされます。

[フィルター]メニュー　－＞　[逆光]を選択

以下のように設定

位置：画像を参照
明るさ：100%
レンズの種類：50-300mmズーム

以下のようになります。

描画モードをスクリーンに変更します。

これで、背景は完成です。
スマートフィルターに変更したレイヤーは、後でぼかしの量を変えることが可能です。
何度か設定しなおしてみて、よりイメージに近い値に近づける事が可能です。

背景用に作ったレイヤーをすべて選択して、グループ化します。
グループ名は、「背景」とします。

4.ボトルを準備する

4-1.ボトルの背景を切り抜く

シャンプーの画像を開きます。

ツールパネルから、クイック選択ツールを選択します。

ボトルを選択します。
直径などの設定は、適宜直します。

オプションバーの「選択とマスク...」をクリックします。

以下の設定でOKボタンをクリック

グローバル調整より
ぼかし：2px

出力設定より
出力先：レイヤーマスク

背景を切り抜くときに、少しエッジをぼかすと背景となじみやすくなります。
psdファイルとして、保存しておきます。

4-2.ボトルを配置する

元々編集していた、バナーのファイルから、先ほど背景をくり抜いてpsdファイルとして保存したボトルを配置します。

「背景」グループの上のレイヤーに配置したいので、「背景」グループを選択しておきます。
次の工程で、psdファイルを配置したときに、選択しているレイヤー、もしくはグループの一つ上のレイヤーに配置される為です。

[ファイル]メニュー　－＞　[埋め込みを配置]をクリック

先ほど作成した、背景がくり抜かれたボトルのデータ（.psdファイル）を選択します。

ファイルが配置されます。
ファイルが配置された直後は、そのファイル（今の場合はボトル）の大きさや位置を編集できるモードになっています。
上部のオプションバーで、サイズと位置を、以下のように調整します。

X:235px
Y:126px
W:15%
h:15%

「〇」ボタンを押すか、もしくは「ENTER」キーを押して、変形を確定させます。

尚、再度編集できるモードに入りなおしたいときは、ボトルのレイヤーを選択して、
[編集]メニュー　－＞　[自由変形]をクリックすると、いつでも編集モードに入れます。

5.ロゴを配置する

ボトルと同様に、ロゴも配置していきます。
[ファイル]メニュー　－＞　[埋め込みを配置]をクリック
ロゴのデータを選択します。

以下の位置に配置します。

X:56px
Y:30px
W:100%
H:100%

6.テキストを配置する

テキストを配置します。
横書き文字ツールを選択します。

画面上をクリックして、以下の文字を書いていきます。

「ロレアルポリ史上最高の
オイルトリートメント誕生！」

書き終わったら、レイヤーパネルで、テキストレイヤーをクリックするなどして、テキストの編集を確定させます。

以下のフォントファミリー等をを文字パネルで設定します。
※該当の文字のレイヤーが選択されている事を確認してください。

フォントファミリー：游明朝
フォントの太さ：Demibold
フォントサイズ：16px
行送り：24px
カラー：#340f00

配置位置は以下の画像を参照