バナートレースとは
デザインスキル向上を目的としてバナーをトレース(模写)することです。
実際に手を動かすことで、デザインソフトの操作スキル、バナーに込められた意図を汲み取る力、構図・あしらいなどのテクニックを学ぶことができます。
Photoshopを用いたバナートレースのやり方
1. トレースするバナーを探す
まずはお手本にするバナーを探します。自分が気に入ったバナーから始めてもよいですが、初心者の方はテキストだけのバナーからはじめることをお勧めします。
テキストだけのバナー ⇨ テキスト+画像のバナー ⇨ テキスト+画像+あしらいが豊富なバナー と、シンプルなバナーからはじめて徐々に複雑なバナーに挑戦していくとやりやすいでしょう。
参考サイト
- BANNER LIBRARY https://design-library.jp/
- レトロバナー https://retrobanner.net/
- Banner Matome http://bannermatome.com/
- Pintarest https://www.pinterest.jp/
シンプルなバナーはカーニンング(文字詰め)の練習になるのでお勧めです。カーニングはKERN TYPEで練習するのも楽しいですよ!
👇 参考:KERN TYPEのやり方
https://osakanav.com/must-see-for-designers-kern-type-design
Photoshopで制作
今回はこちらのバナーを使って解説します。
下準備:バナーの情報を確認
![](https://lifeneko.com/wp-content/uploads/2022/06/822b74d07a216361e999a15bd3908928.png)
画像を右クリック > [情報を見る] を選択します。
![](https://lifeneko.com/wp-content/uploads/2022/06/ef9ca7bb01547ad80854da61cd50f432.png)
[詳細情報]を確認すると、この画像は大きさ564×564のRGBファイルであることが分かりました。
1. Photoshopで新規ファイルを作成
![](https://lifeneko.com/wp-content/uploads/2022/06/39c9ece4a5a0d3e10f239fe74ad6ac41-1024x397.png)
Photoshopを開いて[新規ファイル]をクリックします。
![](https://lifeneko.com/wp-content/uploads/2022/06/8b647adf68088348cdcc671fa7552d0d-1024x667.png)
トレースする画像は大きさ564×564のRGBファイルなので、幅・高さ⇨564px、カラーモード⇨RGBにして[作成]をクリックします。
![](https://lifeneko.com/wp-content/uploads/2022/06/28697e3bfed27952347a05671229b398.png)
このような画面が表示されます。
トレースの準備
![](https://lifeneko.com/wp-content/uploads/2022/06/2343e118c8e164f265c49b18eeae26ec-1-1024x493.gif)
アートボードの横に見本を置きます。
![](https://lifeneko.com/wp-content/uploads/2022/06/cd661d6b1a68a5c344c8087bfc307dcc-1024x560.gif)
[ Option ]+[ Shift ](↑)を押しながらアートボードにドラッグします。
- [ Option ] …コピー
- [ Shift ](↑)…座標を固定したまま移動
![](https://lifeneko.com/wp-content/uploads/2022/06/80341cb11755d59a93b8446c42a7a70b.png)
レイヤーパネルを見るとこのような状況です。
![](https://lifeneko.com/wp-content/uploads/2022/06/2b70fec587caefe5414cf7081b6b1b53-1024x576.png)
お手本の不透明度を下げます。ここでは30%にしました。
不透明度は[不透明度]から%を選択するか、レイヤーを選択しながら数字をクリックすると変更できます。(3と打つと30%になる)
![](https://lifeneko.com/wp-content/uploads/2022/06/4d4ef744fa07dbfffd4a086b32de8eee.png)
お手本レイヤーが動かないように[鍵]アイコンをクリックしてロックします。
トレース
お手本レイヤーになぞってトレースします。まずは長方形ツールで背景となる四角形を作ります。
お手本レイヤーの上で作業するとお手本が見えなくなるので、必ずお手本レイヤーの下にレイヤーを作ってください。
![](https://lifeneko.com/wp-content/uploads/2022/06/fb5f9bfaae45356ec919a96e92a158f2-1024x485.png)
- 塗り:お手本の背景色
- 線:なし
大きさはアートボードより大きければ適当でOKです。また、この時不要なレイヤーがあれば削除します。
![](https://lifeneko.com/wp-content/uploads/2022/06/7ae2f1ca30aec29f96aa4563d8429693-1024x835.png)
文字ツールを選択してお手本内のテキストを書き出していきます。
この時フォントはなんでも構いません。数字と改行ではレイヤーを分けるようにしてください。
👇レイヤー的にはこのようになります
![](https://lifeneko.com/wp-content/uploads/2022/06/44bbffb480f5172d668ac4f9a635e212-441x1024.png)
お手本に似たフォントに変更します。
フォントをPhotoshopで調べる方法
書式 > マッチフォント でテキストを囲うと候補のAdobeフォントが表示されます。
フォント選びの参考にしてください。
![](https://lifeneko.com/wp-content/uploads/2022/06/7143f878b19bbfa174c19146a9b5acff.png)
![](https://lifeneko.com/wp-content/uploads/2022/06/c214b66c7d79355b18f15a32751ceca1-1-1024x640.png)
いくつか候補が出てきました。
![](https://lifeneko.com/wp-content/uploads/2022/06/047cc3496e828b5e41faa8c20fbe508b-1024x413.png)
英字部分はRalewayが近そうなのでRalewayに変更しました。バナートレースはあくまで練習なので、厳密に同じフォントでなくてもOKです。
![](https://lifeneko.com/wp-content/uploads/2022/06/11336b04f2933cc4973c4e1e91b09525-1024x257.gif)
お手本に重ねるとテキスト間の間隔がずれているので調整します。[ option ]キーを押しながら◀︎▶︎キーを押すとテキスト間の調整ができます(この作業をカーニングと言います)
![](https://lifeneko.com/wp-content/uploads/2022/06/5569e5f1c551243e7892ff779ec53c98-1024x343.png)
カーニングが完了しました。大体合っていますね。この作業を他のテキストでも行っていきます。
候補の中に合うフォントがない場合はAdobeフォントで検索します。
![](https://lifeneko.com/wp-content/uploads/2022/06/d8070c338d0d1ac6e74b4f9528a62efd-1024x659.png)
[ サンプルテキスト ]にテキストを入力すると、プレビューが確認できて便利です。
丸は楕円形ツール、線はペンツールなどを用いて装飾すればトレース完了です。
写真を利用するとき
お手本に写真が入っている場合は似たフリー素材を探します。
オリジナル制作を行う際にも自分のイメージに合った素材を探せるスキルは重要です。トレースで素材探しも練習していきましょう。
ポイント
- 最初はシンプルなものから始めるとやりやすい
- マッチフォント機能を利用すると類似フォントを探しやすい
- トレースは練習なので完璧に同じにしなくてもOK!
以上、初心者向けバナートレースのやり方解説でした。