【有料級】バナートレースってどうやってするの？やり方8000字で詳しく解説！〜１本目Ver.〜

左がネットに落ちていたものです。

右が私がトレースして真似したものです。

制作するにあたって、人物の素材が必要なので、素材探しをします。

素材の探し方

1. 検索する素材サイトを決めます。今回は、フリー素材サイト集のぱくたそに決めました。
2. 左の元画像のように、今回は、運動系の人物画像を探したいので、「運動　女性」などと検索します。
3. 何ページも検索結果が出てきますが、そこからどの画像がしっくりくるか吟味します。

フリー素材集（ぱくたそ）から、運動系人物画像を探した結果、右の画像を見つけました。

右の画像を選んだ理由は、以下の通りです。

• タンクトップが似ているから
• タンクトップの色は黒に変えれば良いから
• 画像を回転させれば、走っているポーズに見えるから
• 背景がシンプルで、切り取りやすいから

画像が用意できたら、編集の準備をしましょう

元となるバナーをPhotoshopで開きます。ファイルを右クリックして「このアプリケーションで開く」で、Photoshopを選択します。

左下のマークで、新しいグループを作ります。

※「ctrl ＋ g」でもグループ作成可

この時、元の画像が新しく作ったグループに入らないようにしましょう。なぜなら、先ほど作ったグループに、元画像をトレースしたものを入れていくからです。

先ほど選んだ画像をPhotoshop上に載せます。画像ファイルをドラッグしてPhotoshopへ動かすだけで載せれます！

※まだ画像の大きさを変えないでください
次の作業に影響が出ますので、注意してください。

画像レイヤーを、右クリックして「スマートオブジェクトに変換」をクリックします。

最終的に、レイヤーが左図のようになって入れば、下準備は完了です。

1. グループの中に画像が入っているかどうか
2. スマートオブジェクトのマークがあるかどうか
3. 元画像がグループ外になっているかどうか

１〜３で、１つでも当てはまっていなかったら、もう一度下準備を確認してください。

画像部分をダブルクリックします。

で、Backspaceキーで、選択範囲内を消しちゃいます。すると、右図のようになります。

たったこれだけで人物を切り抜くことができちゃいます。Photoshopって便利ですよね〜

このままだと、点線が残ったままになるので、「ctrl + d」で、点線をなくします。

まず、左のバーから、ペンツールを選択します。（※「p」でも選択されます。）

その後、左上の部分を「パス」に変更します。

キャミソールをペンツールでなぞります。

画面右の方にある、「パス」から「作業パス」の小さい画面を「ctrl ＋ クリック」します。

すると、なぞったところが選択範囲になっています。

画面右の方にある「色調補正」から、真ん中列の一番左のアイコンをクリック

明度を-100にします。

すると、このように黒くなります。これが確認できたら、「ctrl + s」で保存します。

保存ができたら、右図のタブは閉じてOKです。

「色調補正」から「カラーバランス」をクリック

微調整した結果、上図の数値で調整します。
※お好みで調整OK
数値を調整できたら、上図のマークをクリックします。

すると、人物のレイヤーに向かって矢印ができているのがわかります。これは、カラーバランスが、矢印の向いているレイヤーにしかかかっていないというマークです。

全体の色味を調整できたので、次に、青く光っている部分を再現していきます。

今回は、左図の丸で囲っている部分の青い光を再現していきます。

左のバーの「スポイトツール」をクリック
※ショートカット 「i」でも可

元画像の青い部分をスポイトでクリック

すると、画面右上のカラーが、スポイトした色に変わります。

左のツールバーで、上図のアイコンを右クリック→「クイック選択ツール」をクリック
※ショートカット 「w(shift + w)」でも可

人物のレイヤーをクリックして、選択されている状態にする

肩の部分を「クイック選択ツール」でクリックします。
コツは、小さい範囲から徐々に大きくすることです！

新しいレイヤーを作成して、レイヤーが選択されていることを確認
※新規レイヤーの％を以下に変更

理由は後ほどご説明します。

左のツールバーの上図マークをクリック
※ショートカット「b」でも可

ブラシツールで、点線内を塗っていきます。
※点線からはみ出しても画面上に反映されないので、ご安心ください。

先ほど不透明度、塗りを変更したのは、このためです。おかげさまで、薄い膜のような青になりました！

「ctrl + d」で点線を消すことができます。

頭の方も同じように青くしたいので、左のツールバーで、上図のアイコンを右クリック→「クイック選択ツール」をクリック
※ショートカット 「w(shift + w)」でも可

人物のレイヤーをクリックして、選択されている状態にする

後頭部を「クイック選択ツール」でクリックします。
コツは、小さい範囲から徐々に大きくすることです！

肩の部分で作ったレイヤーと同じレイヤーをクリック

左のツールバーの上図マークをクリック
※ショートカット「b」でも可

肩の時と同様にブラシツールで、点線内を塗っていきます。
※点線からはみ出しても画面上に反映されないので、ご安心ください。

「ctrl + d」で点線を消すことができます。

結果、左図のように、後頭部と肩の部分に青い光をつけることができました。

左のツールバーから、四角のアイコン（長方形ツール）を選びます

対角線にドラッグして長方形を作成します

人物画像レイヤーの下に、長方形レイヤーが来るようにします。

色はなんでもいいので、とりあえずこんな感じになります。

長方形レイヤーをダブルクリックします。

「レイヤースタイル」を開いたら、「グラデーションオーバーレイ」をクリックします。

こんな感じの設定にします。
グラデーションをクリックします。

色を決めるために、左をダブルクリックします。

「cfcfd4」の色を指定して「OK」クリックします。
※元画像の下の方の色を取ってきてもOK

右の色をダブルクリックします。

「fcf8ea」の色を指定して「OK」クリックします。
※元画像の上の方の色を取ってきてもOK

レイヤースタイルを閉じると、こんな感じになります。

今、制作中のグループを非表示にします。

ツールバーからスポイトツールを選択します
※ショートカット 「i」でも可

赤丸内あたりをスポイトツールでクリックします。

すると、画面右上のカラーが、スポイトした色に変わります。

制作していたグループレイヤーを表示にします。

グループレイヤーの中を開いて、「人物のレイヤー」と「長方形のレイヤー」の間に新しいレイヤーを作ります。
※ショートカット 「ctrl + shift + n」で作成可（Mac「ctrl + shift + n」）

新規レイヤーのまま、ブラシツールを選択します。
※ショートカット 「b」で可

なんとなく水色が乗っている部分にブラシで色を乗せていきます。

他も同じような作業を繰り返して、色を乗せていきます。これで背景は、完成です！

人物のレイヤーを複製したいので、「alt + ドラッグ」(Mac「option + ドラッグ」)で複製する

複製した画像を選んだまま、「↓キー」を押して、複製画像をずらします。目安は、人物画像の右腕が全て見えるくらいです。「←キー」を押して、髪が見えなくなるくらいずらします。

影になるレイヤーをクリックして、数値を以下にします

その後、影レイヤーをダブルクリックして、「レイヤースタイル」を開きます。

グラデーションオーバーレイで、画像通りの設定にします。

左の色をダブルクリックします。

色を「6173d4」にしてOKをクリックします。

右の色をダブルクリックします。

色を「fcd95a」にしてOKをクリックします。

位置を「90%」にして、OKをクリック

レイヤースタイルを閉じた結果、影ができることがわかります。ここから、影に色をつける作業に入ります。

制作のグループレイヤーを非表示にします。

左のツールバーから、スポイトのアイコンを選択します。
※ショートカット 「i」でも可

スポイトツールで色をクリックします。今回は、画像のような場所をクリックします。

すると、画面右上の色が、クリックした色に変化します。

制作のグループレイヤーを表示👁にします。

影のレイヤーをctrl+クリックして、レイヤーが選択範囲になるようにします。すると、影に点線ができます。

色をつける前に、「人物レイヤー」と「影レイヤー」の間に、新規レイヤーを作ります。
※ショートカット 「ctrl + shift + n」で可

左のツールバーの、ブラシのアイコンを選択します。

先ほど作ったレイヤーが選択されていることを確認して、ブラシで、塗っていきます。
※はみ出しても、反映されないので、ご安心ください

他の箇所も同様に、スポイトでここらへんの色をとって、ブラシで塗っていきます。

すると、こんな感じになります。これで影は一旦完成です。
後は、文字や図形を足していくのみです。

制作していたグループを非表示にします。

画面左のツールバーから、スポイトのアイコンをクリックします。※ショートカット 「i」可

スポイトツール選んだ状態で、スポイトしたい色をクリックします。（丸で囲んだあたりの位置をクリック）

すると、画面右上の色が変わっていることがわかります。

画面左のツールバーから、図形のアイコンを右クリックして、「三角形ツール」を選択します。
※ショートカット 「shift + u」を何回か押すと、選択可

ドラッグして三角形を作ります。

画面左ツールバーから、矢印のアイコンを右クリックして、「パス選択ツール」を選択します。

クリックして、元画像のピンクの三角をなぞるように、頂点をドラッグします。

ドラッグ後、このように表示されますが、OKをクリックしましょう。

「shift + クリック」で２つの頂点を選択できます。ドラッグして２つ同時に移動させます。

後は微調整をして、三角を作ります。

後は、スポイトした色を三角形に当てはめます。

を、繰り返して、図形を完成させます。

図形のレイヤーを全て「shift + クリック(ctrl + クリックでも可)」して、全て選択した状態で、「ctrl + g」でグループ化させます。

先ほど作ったグループをドラッグして、制作グループに入れます。

制作グループを表示👁させます。

結果、こんな感じで、図形が完成します。

制作グループレイヤーを非表示にします。

画面左のツールバーから、「T」のアイコンを選択します。※ショートカット 「t」でも可

画面右の
プロパティ＞文字
「Arial Black」を選択します。フォントがなければ、英字が太めのフォントで、似たものを探しましょう。

「GIRLS」「NIGHT」「OUT」と、３つのレイヤーに分けて入力します。

下記の表のフォントを参考にして、文言ごとにレイヤー分けて入力します。

文言が記入できたら、それぞれの位置に配置します。

「QUSET HALL HARAJUKU」のレイヤーを選択し、ショートカット 「ctrl + t」で大きさを変えたい方向に、ドラッグします。

大きさを変えれたら、「Enterキー」を押します。さらに微調整がしたければ、画面右のプロパティから大きさを調整することも可能です。

「HALL」と「HARAJUKU」の間の空白を調整するために、空白と「H」の間にカーソルを持っていきます。ショートカット 「alt+←キー」で、余白を縮めていきます。

こんな感じで、他の文字も調整していきます。

袋文字にしたいレイヤーをダブルクリックします。

レイヤースタイル＞境界線を、図のように設定します。

レイヤーの塗りを０％にして、袋文字は完成です。

斜体にしたい文言のレイヤーを選択して、「ctrl + t」を押します。

画面左上のメニューバーから、編集＞変形＞ゆがみ
を選択します。

カーソルが「△←→」のようなアイコンに変わる瞬間があるので、その時に、右にドラッグします。

結果、左図のように仕上がります。

「A（3つ）」と「W」をレイヤー分けて、「ALWAYS INBETA」と入力します。

※フォントは「Arial Black」を選択します。フォントがなければ、英字が太めのフォントで、似たものを探しましょう。

「A」を選択し、レイヤーを右クリックします。
すると、「作業用パスに変換」と出てくるので、それをクリックします。

画面左のツールバーから、矢印アイコンを右クリックして、「パス選択ツール」を選びます。

三点を「shift + クリック」して、「←キー」で調整します。

他もずれるようでしたら、他の点もクリックして「矢印キー」で調整していきます。これができたら、複製したり、反転させたりして、他の「A」にも活用していきましょう。

「W」も同様に調整していき、四角形の枠も作れたら、完成です。

長い道のりでしたが、お疲れ様でした。作っていく過程で、いろんな技が身につきましたね。
この調子で、他のバナートレースも頑張りましょう！