Photoshop

【Photoshop初心者向け】最も効率のいいバナー模写(トレース)のやり方

「基礎学習は終わったけど実務で活かせる気がしない…」

このような悩みをもつ初心者向けに、Photoshopの実践練習について紹介していきます。

1番おすすめなのがバナー模写(トレース)
プロが作ったバナーをそっくりそのまま再現することで、技術力とデザイン力を同時に高めることができます。

今回はアートボードを2つ並べる方法を見本に、バナー模写のやり方と効率のいい学習方法を解説!

Photoshopの技術力上げたい人、デザイン力を磨きたい人どちらにも有益な記事となっていますので、ぜひ最後までご覧ください。

①見本のバナーをみつける

まずは見本となるバナーを探していきましょう。

初めは模写が比較的かんたんな文字だけのバナーを探すとGood。

バナーまとめサイト

バナーを探すときにおすすめなのが、まとめサイト。
ネット上のあらゆるバナーをサイズ・色・キーワード別に検索することができます。

有名どころは以下の3つ。

Pinterest(ピンタレスト)

ピンタレストは気に入った画像をピン(お気に入り)できるSNS。

『バナー』や『Banner』で検索すると、世界中のバナーデザインをみることができます。

\Pinterestにバナーを集めたボードを作成しています/

こちらのボードに国内外のおしゃれなバナーを随時追加しています。

気になる人はフォローしてね!

②模写するためにPhotoshopを準備

見本となるバナーを決めたらPhotoshopに取り込み、模写を開始します。

今回はアートボードを2つ並べる方法を紹介していきます。

アートボードとはカンバスのようなもので作業していくスペースのこと

バナーのサイズを指定

Photoshopバナー模写やり方

Photoshopを開いたら、模写するバナーの幅と高さを入力し単位はピクセルを選んでください。

アートボードにチェックを入れ、右下の作成をクリック。

バナーサイズの調べ方は、保存した画像を右クリック→情報を見る→大きさに『幅×高さ』が書いています

アートボードを2つ並べる

Photoshopでアートボードを2つ並べる方法

アートボードを選択した状態で移動ツールを右クリック→アートボードツールをクリック。

Photoshopでアートボードを2つ並べる方法

右のプラスマークをクリックすると隣にアートボードを追加することができます。

③Photoshopでバナー模写

準備が整ったらいよいよ模写を開始!

初めはやり方がわからない箇所が多々でてきますが、その都度調べながら作成していきましょう。

見本のバナーを取り込む

Photoshopでアートボードを2つ並べる方法

まずは見本のバナーをPhotoshopに取り込みます。

アートボード1を選択した状態で、メニューバーのファイル→埋め込みを配置をクリック→見本のバナーを選択。

Photoshopでアートボードを2つ並べる方法

これで見本をみながら模写できる環境が整いました!

saya

あとは地道に練習あるのみ!

バナー模写で意識すること

  • できるだけそっくりに模写をする
  • デザインを意識して作成する
  • 様々なサイズやデザインを作成する

これら3つを意識するだけで1回の模写で得られる情報量が格段に上がります。
一石二鳥どころか一石三鳥に!

できるだけそっくりに模写をする

バナー模写のやり方

できるだけそっくりに模写をすることでPhotoshopの技術力が向上します。

初心者は文字だけのバナーから練習してみましょう。
その際フォントは全く同じでなくてもOK。できるだけ近いものを選んでください。

また写真やアイコンなど模写するのが難しいものはフリー素材で代用するか空けておいてかまいません。

デザインを意識して作成する

バナー模写のやり方

バナー模写をただボーッと行うのは非常にもったいない!
なぜならあなたが参考にしているバナーはプロのデザイナーが作ったものだから。

注意深く観察することで、微妙な文字の大きさの違い・余白の幅・色使いなど様々な工夫がみえてくるはずです。

saya

デザインを基礎から勉強するならなるほどデザインという書籍がおすすめ

様々なサイズやデザインを作成する

バナー模写のやり方

Webのバナーは縦長・横長・正方形など様々なサイズがあります。
たくさんのサイズを練習して自分の引き出しを増やそう!

そして作成したバナーは必ず保存しておきましょう。
なぜなら似たようなバナーを作成するときにコピペできるから!

もちろん丸パクリはご法度です。

模写したバナーを丸々使うのではなく、デザインの一部のみを新しいバナーに使用したり上手に作業効率化をはかりましょう。

Webデザイナーとして活躍されている方のブログを参考にさせていただきました(参考記事:Webデザイナーが教えるおすすめバナー模写のやり方)

バナー模写で技術力とデザイン力が向上

このようにバナー模写を効率的に行うことで、技術力とデザイン力の両方を向上させることができます。
その際、意識することはこちらの3つ。

  • できるだけそっくりに模写をする
  • デザインを意識して作成する
  • 様々なサイズやデザインを作成する

ぜひこの方法でPhotoshopの実践練習に励んでみてください!

▼デザインについて学習するならこちらの書籍がおすすめ