こんにちは、かがみ（@cony_tas）です！
戦国系ソーシャルゲームでよくある和風なデザインのバナーって、素敵ですよね。
僕も本業でバナー広告はよく作るのですが、最近はファンタジー系ばかりなので和風デザインを作りたくなってきました。笑
そこで今回の記事は、下のような和風バナーの制作手順をざっくりご紹介しようと思います！
記事の信頼性
筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
CONTENTS［ hide ］
Photoshopで和風バナーを制作する手順を紹介
まずはバナーを制作する上で欠かせない背景素材を準備していきましょう。
ゲーム制作現場だと、実際のゲーム背景を使うことが多いんですが、勝手に使うわけにはいかないので。笑
ここは無料写真を加工して背景を作ってみます。
無料写真素材サイトで背景画像を用意する
僕がよく利用している無料写真素材サイトは以下になります。
- O-DAN：https://o-dan.net/ja/
今回は上記サイトから、下のような背景素材をお借りしてきました。
この写真を元にして背景を作ります。
背景画像を加工する
写真をPhotoshopで読み込み、レイヤーを複製したら写真を加工していきます。
色相・彩度、カーブで写真を明るくして、コントラストを高めに調整します。
写真を調整したら、空の部分の選択範囲をとり、その選択範囲に青のグラデーションを流し入れて空の色を鮮やかにします。
次に、調整したレイヤーと青のグラデーションレイヤーを統合した上でそのレイヤーを二つ複製し、それぞれにフィルターギャラリーを適用してイラスト風にしましょう。
複製した一つ目のレイヤーに、フィルターギャラリーの「塗料」を適用してオーバーレイで重ねます。
複製した二つ目のレイヤーは、フィルターギャラリーの「墨絵」を適用して透明度45%に。
これで下のような状態になります。
続いては背景全体の色味をピンク系にしたり桜の雰囲気を出すため、下記の無料素材サイトで桜の写真をお借りしてきました。
- GIRLY DROP：https://girlydrop.com/
この桜の写真をレイヤー全体の一番上に読み込んで、色相・彩度で色味を調整し、フィルターギャラリーの「はね」を適用したらハードライトで重ねると下のようになります。
良い感じにピンク系のふんわりした背景になってきました。笑
最後に和風っぽくなるように、市松模様を作成して上から重ねてみましょう。
下のように市松模様の元になる画像を作成し、パターン登録をします。こうすることでパターンとして写真全体に市松模様を流し込むことができます。
市松模様を流し入れ、レイヤースタイルの「カラーオーバーレイ」で良い感じに重ねてみました！
これで一旦背景の調整は終了です。
加工しすぎて写真の原型をとどめていないですが、こういうのはなんとなく背景にお寺があって和風な雰囲気がでているのが大事なんです。笑
画像の上下に金色のラインを入れる
続いては背景の上下に金色のラインを入れていきます。
こういうあしらいって和風なバナーにけっこう多くて、ラインを入れることで画像も引き締まるのでおすすめですよ。
詳細な作り方は割愛しますが、金色のグラデーションでラインを入れて、上からテクスチャを重ねれば雰囲気は出ると思います。
キャラクターを配置する
背景も整ったので、ここでキャラクターを配置しましょう！
本記事のために「さくらもちちゃん」に和服を着させてみたんですが、和装って良いですよね、うん。
そうですね！ 背景を合わせた時にキャラが浮いてしまう場合は、いろいろエフェクトを追加して馴染ませましょう。
ついでに一応バナーなので何か文字を入れよう……と思ったんですがなかなか思いつかなかったので、単純にキャラ名を明朝体で入れてみました。
仕上げにエフェクトを追加して完成
さて、仕上げに画像全体に桜のエフェクトやキラキラエフェクトを入れていきます。
ここはひとつひとつ慎重に入れても時間がかかるだけなので、ざっくり入れて雰囲気がアップすればOKとします！
完成しましたー！！
久しぶりに和風バナーデザインを制作して楽しかったです。笑
本業でもまた作る機会あればいいなぁ。
最後に：Photoshopで和風バナーを制作する手順を紹介
今回はPhotoshopで和風バナーを制作する手順をご紹介しました。
各手順の中で、背景に関しては無料写真素材さえあればさまざまな加工方法で変化させることができるので、この辺のやり方はまた別の記事で紹介する機会があればいいなと思っています。
それでは、今回はこの辺で！
