Photoshopで作成したバナートレース集
各バナートレースのリンク先を貼ってありますので、気になる方は是非チェックしてみてください。
Photoshopでバナートレースをする流れ
STEP1 見本バナーの選定
まず初めに、バナートレースを行うための見本バナーの選定を行います。
今回30本のバナートレースを行った際に使用した、バナー画像を集めたサイトがあるのでリンクを貼っておきます！
STEP2 Photoshopを開き、トレース準備をする
- 見本バナーのサイズを確認
見本バナーの縦横幅を確認します！ - Photoshopで見本バナーサイズの新規ファイルを作成
見本と、トレース作業をするファイルを見比べたいため、アートボードをチェックしてキャンバスを作成しています！
アートボードとは…
1つのファイルで画像作成をするためのキャンバスを二枚以上配置できる機能
STEP3 トレースキャンバスの見本バナーの不透明度を調整
STEP4 トレース作業開始
見本バナーのデザインを再現させるため、文字ツールや図形ツールなど、Photoshopの機能を使って作業をしました！
再現がうまくいかない、再現方法がわからないときは、ネットや動画で調べてコツコツ作業を進めていきます( ..)φメモメモ
STEP5 完成したら画像でダウンロード
作業が完了したら、下記手順で画像書き出しをしました！
ファイル＞書き出し＞JPGとしてクイック書き出し
【バナー画像】使用したおすすめバナー画像サイト集
バナー広場
（参照：バナー広場）
バナー広場は、バナーデザインを集めたサイトです！
サイズ・カラー・業種・デザイン・バナータイプ・デザイン要素で検索をして探すことができます。
キーワードを入力して探すこともできるので、探しているイメージのバナーがとても探しやすいです！
BANNER LIBRARY
（参照：BANNER LIBRARY）
BANNER LIBRARYはバナーデザインをまとめたギャラリーサイトです！
カテゴリー・デザインテイスト・季節やイベント・形（横長、縦長、正方形）・カラー・SNSの種類で検索をしてバナーデザインを探すことができます。
キーワードを入力しても探せますので、参考にしたいイメージのデザインを見つけやすいです。
バナートレースはもちろん、バナー作成のアイディアの参考になるのでおすすめです！
バナーデザインアーカイブ
（参照：バナーデザインアーカイブ）
Banner Design Archive（バナーデザインアーカイブ）は、さまざまなデザインのバナー一覧がまとめられているサイトです！
サイズ・カラー・業種から絞り込んでバナーデザインを探すことができます。
バナートレース、バナー作成の参考にぜひ活用してみてください。
【素材】使用したおすすめ素材サイト集
Adobe Stock
（参照：Adobe Stock）
Adobe Stockは、数億点の画像素材を持つ素材サイトです！
素材はロイヤリティフリーで商用利用でき、素材のクレジット表記も不要です！
無料ダウンロードができる素材と、有料素材があります。
無料でダウンロードをしたい場合は、「無料素材」を選択してから、検索窓でキーワード入力をして探しましょう。
写真AC
（参照：写真AC）
写真AC（フォトAC）は、無料で画像のダウンロードをすることができます。
人物写真、風景、食べ物など様々な写真があります！
会員登録は簡単にできますので、素材をダウンロードしたい方は登録しておくことをおすすめします。
クレジット表記やリンクは一切不要ですが、1日のダウンロード回数に制限がありますので注意しましょう！
ぱくたそ
（参照：ぱくたそ）
ぱくたそは、写真素材を無料で提供しているサイトです。
会員登録不要で、無料で誰でも簡単に写真素材をダウンロードすることができます。
個人的には、風景や物などの写真と比べ、人物による画像素材がAdobe Stockと写真ACと比べ使用したいものが見つからない印象があります。
使用したい素材を探す際には、とても便利なサイトになるので、是非チェックしてみてください！
イラストAC
（参照：イラストAC）
イラストACは、無料で様々な種類のイラストがダウンロードできるサイトです。
人物・動物・フレームなど様々な種類のイラストが登録されており、AI・JPEG・PNGでダウンロードをすることができます。
たくさんのクリエイターが作成したデザインが集まっているため、さまざまなトーンのイラストデザインを探すことができます。
イラストACも写真AC同様、1日のダウンロード制限はありますが会員登録を行うことで、無料で好きな素材をダウンロードすることができます。
クレジット表記やリンクは一切不要ですので安心です。
ICOOON MONO
（参照：ICOOON MONO）
ICOOON MONOは、モノトーンのアイコン素材を無料でダウンロードすることができるサイトです。
デザインがとてもシンプルなアイコン素材なので、WEBデザインはもちろん、ビジネスシーンなどさまざまなシーンで活用することができます。
icon-pit
（参照：icon-pit）
icon-pitは、無料のフリーアイコン素材サイトです。
イラストレーターのAIと透過PNGデータが会員登録不要でダウンロードをすることができます。
ピクトグラムをベースにしたシンプルなデザインのアイコンが特徴です。
学んだPhotoshopの機能
それぞれの機能と、その機能を使用したバナートレースのページをご紹介(^^♪
多角図形ツール
シェイプツールを使うと、三角形や四角形、星形など、さまざまな多角形を簡単に描くことができます！
図形の頂点を調整することで、形状を自由に変更できます。
photoshop バナートレース ＃3
ゴールド
ゴールド調に加工をするためには、レイヤースタイルの設定やグラデーションの設定をすることで再現ができます。
photoshop バナートレース ＃4
ドロップシャドウの描画モード
ドロップシャドウを使うことで、対象レイヤーに影をつけて立体感を出すことができます！
photoshop バナートレース ＃5
消しゴムツール
消しゴムのサイズや硬さを調整することで、細かい部分の修正も可能です。
photoshop バナートレース ＃12
ネオン
レイヤースタイルの境界線、光彩（内側）、光彩（外側）、カラーオーバーレイなどを調整するとネオンのようなデザインを再現することができます。
photoshop バナートレース ＃13
photoshop バナートレース ＃18
画像の一部の色を変える
「オブジェクト選択ツール」を使って、被写体の選択をして、「塗りつぶし調整レイヤー」の「色彩・彩度…」で色相・彩度・明度を調整することで、色の変更をすることができます。
photoshop バナートレース ＃15
垂直方向に反転
画像レイヤーを選択し、「編集」メニューから「変形」-「垂直方向に反転」を選択すると、画像を上下反転できます。
画像レイヤーを選択して、右クリックでも表示されます。
デザイン上の必要性に応じて、垂直方向の反転が活用できます！
photoshop バナートレース ＃15
クリッピングマスク
レイヤーにクリッピングマスクを適用すると、下のレイヤーの形状に合わせて上のレイヤーが表示されるようになります。
photoshop バナートレース ＃20
文字を曲げる
テキストレイヤーを選択し、「編集」メニューから「変形」-「ワープ」を選択すると、文字を自由に曲げることができます。
円形や渦巻き、波状など、さまざまなワープ効果を適用できます。
photoshop バナートレース ＃20
AIを使用した生成塗りつぶし
Photoshopの「生成」機能を使うと、AIが画像の一部に加えたい要素を加えてくれます。
photoshop バナートレース ＃20
パターンオーバーレイ
背景やテクスチャ、装飾パーツなどに活用できる便利な機能です。
様々な用途で使用ができるので、使い方をマスターするのがおすすめです(●´ω｀●)
photoshop バナートレース ＃21
photoshop バナートレース ＃14
移動ツールで図形を整列
移動ツールを使って、図形やオブジェクトを選択し、整列ツールバーの機能を活用すると、簡単に整列できます。
左寄せ、中央寄せ、右寄せ、上寄せ、下寄せなど、さまざまな整列オプションが用意されています。
photoshop バナートレース ＃23
水彩ブラシ
photoshop バナートレース ＃25
シェイプに沿って文字を書く
図形ツール作成をした形状のパスに沿って文字を入力できます。
文字ツールを選択し、図形のパス上にカーソルを合わせると、文字が自動的にパスに沿って配置されます！
photoshop バナートレース ＃29
コピースタンプツール
Alt/Optionキーを押しながらクリックすると、コピーの開始点を設定できます。
コピーした部分をブラシのように塗りつぶすことで、傷跡や汚れなどを修正できます。
photoshop バナートレース ＃28
カラーオーバーレイ
レイヤースタイルの「カラーオーバーレイ」を使うと、オブジェクトの色を簡単に変更できます。
色を変更するだけでなく、「乗算」や「スクリーン」などの描画モードを組み合わせることで、様々な色調効果を得ることができます！
photoshop バナートレース ＃26
バナートレース30本作成をした感想
Photoshopでバナートレースをしてみて、とても多くの機能やデザインポイントなど学ぶことができました。
始めは、見本デザインと同じように再現したいけれど、Photoshopの機能が分からず調べて試してみるのにとても時間がかかりました…(>_<)
何回かやっていくうちに、基本的な操作やPhotoshopの機能を理解することができるようになりとても嬉しかったです(*^^*)
どの見本バナーも、ユーザー目線でのデザインの工夫がされていて、どの回も学びが深まりやってみて良かったと思っています。
基本的なPhotoshopの機能を理解することはできましたが、細かな調整や難しいデザインはまだまだできないので、これからはPhotoshopの機能について学習できるように、機能の勉強を含めた記事をアップしていこうと思います！
いままで。バナートレース記事をご覧いただいたみなさまありがとうございました(●´ω｀●)
HerTech
