Webデザイナーへの第一歩!Photoshopでバナー作成をしてみよう!手順を解説

ロードマップ

「Photoshop基本機能の練習をしてみたけれど、バナー作成の手順が知りたい…」
「バナーってどうやったら作れるようになるの?」
「Webデザイナーさんは実際どんな感じで作成しているんだろうか…」

Photoshopの機能をある程度使える様になったけれど、実際にバナーを作成してみようと思うと、手順がわからないですよね…

そこで本記事では、以下についてまとめました。

  • バナー作成が出来るようになる方法
  • Webデザイナーが教える、デザインの引き出しの増やし方
  • 実践!案件も取れるようになるバナー作成手順公開

この記事を見て一緒に実践するだけであなたもバナー作成ができるようになり、案件もとれる技術が身につく方法を知れます。

ぜひ、最後まで読んでみて下さい。

Webデザイナーが解説!バナー作成手順

Designed by Creativeart / Freepik

Webデザイナーの勉強を進めてPhotoshopにも慣れたら、バナー作成をしてWebデザイナーへの第一歩をすすんでみましょう!

バナー作成の大事な知識、練習方法を順番に解説していきます!

バナーとは

バナー(banner)とは、直訳すると「旗」になります。

Webページ上で、Webページの紹介をする広告の役割を持つ画像をバナーと呼びます。

Webページを見ていると目を引くカラーやデザインで構成されている画像を見たことがありませんか?

そんな目を引くように作成された画像がバナーです。

バナートレースをしてみよう

バナーデザインが作成できるようになるにはまず練習が必要です!

練習として、バナートレースをするのがおすすめです。

バナートレースとは参考のバナーを下に置き、なぞってバナー作成をしていく事を言います。

バナートレースを重ねると、デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できようになります。

そして、プロのWebデザイナーが作成したバナーの文字の位置や大きさの感覚をつかんでいくことができ、余白やカラーなどのポイントにも気づけるので、デザインを作成しながらデザインを客観的に見れるようになっていきます。

バナートレース前にする必要な事

バナーといっても、文字だけのバナー、写真を使ったバナー、イラストの素材を使ったバナーと色々な種類があります!

バナートレースをする前に、下記のものを探して集めましょう!

  • トレースする参考バナー
  • バナー内に使用している画像
  • バナー内に使用している素材
  • バナー内に使用しているフォント

Webデザイナーが実際にしている写真・イラスト素材の集め方とは

Designed by Creativeart / Freepik

早速、バナートレースするぞ!と、なっても、はじめてだとバナートレースに必要な物をどこから集めれば良いのかわらからないですよね…

バナートレースはもちろん、この先Webデザインを作成していくのにも必要な写真やイラスト素材の集め方、おすすめのサイトをご紹介します。

写真・イラスト素材サイトとは

Webデザインで使用する写真やイラストなどは用意されていない事も多いです。

その際にWeb上にある写真やイラストの素材サイトから、テイストに合ったものを探してきて作成を進めていきます。

Web上には国内外に多くの商用利用可能な写真やイラスト素材のサイトが存在し、ロイヤリティーフリー(使用許諾の範囲内であれば自由に使用できる素材)で提供されています。

Webデザイナーおすすめの写真・イラスト素材サイト

Webデザイナーおすすめの、高解像度・高品質で商用利用できるサイトをご紹介していきます。

無料と有料のものがあるので、案件内容や予算によって使い分けてみてください。

なお無料のものは各サイトでライセンスや使用条件などが異なります、また一日のダウンロード数制限があるサイトもありますので、使用の際は利用規約を確認してからご利用ください。

ぱくたそ


≫「ぱくたそ」はこちらから
≫ 利用規約はこちらから

細かいジャンル分けで検索しやすいサイトです。

  • 商用利用:◯
  • 加工:◯
  • 使用料金:無料
  • クレジット表記:不要
  • ユーザー登録:不要

写真AC

≫「写真AC」はこちらからから
≫利用規約はこちらから

日本人の人物写真や日本の風景写真など探すのに重宝するサイトです。

  • 商用利用:◯
  • 加工:◯
  • 使用料金:無料
  • クレジット表記:不要
  • ユーザー登録:要

イラストAC

≫「イラストAC」はこちらから
≫「利用規約」はこちらから

写真ACの姉妹サイトです。イラスト素材を探す時はほとんどこちらで見つけることができます。

  • 商用利用:◯
  • 加工:◯
  • 使用料金:無料
  • クレジット表記:不要
  • ユーザー登録:要

PIXTA

≫「PIXTA」はこちらから
≫利用規約はこちらから

複数枚利用の定額制とサイズごとに価格が決められている一点から購入できる方法があるのに用途に合わせて使い分けてみてください。

  • 商用利用:◯
  • 加工:◯
  • 使用料金:有料
  • クレジット表記:不要
  • ユーザー登録:要

AdobeStock

≫「AdobeStock」はこちらから

≫利用規約はこちらから

数百万点にもおよぶストックが提示されており、一ヶ月無料体験があるのでおためしで加入することも出来ます。

  • 商用利用:◯
  • 加工:◯
  • 使用料金:有料
  • クレジット表記:不要
  • ユーザー登録:要

iStock

≫「iStock」はこちらから
≫利用規約はこちらから

全サイズ一律の価格表記でわかりやすい価格設定で写真、イラスト、映像素材もあるサイト

  • 商用利用:◯
  • 加工:◯
  • 使用料金:有料
  • クレジット表記:不要
  • ユーザー登録:要

デザインの集め方

バナートレースする参考の画像やサイトを探すのにおすすめなのはPinterestです!

上の画像のようにバナーで検索するとたくさんの参考バナーを一気に見ることができます。

参考のバナーは、普段良く見ているサイトや検索をして気になったサイトのバナーでも良いと思いますが、普段から勉強のために色々なデザインを見て分析するのも大事なのでPinterestのアカウントは作成しておくのをおすすめします。

Pinterest(ピンタレスト)とは

Pinterestとは、WebサイトやPinterest上にある画像を自分のボードに集めることができる画像収集サービスです。

Webサイトの写真や他の人がのせた写真を集める事が出来きるサイトです。

画像をクリックすると、画像元のサイトにリンクするように設計されているので、ブックマークとしての使い方です。

デザインをピン留め

Pinterestではマイページにサイトやバナーをカテゴリに分けてピン留めしておく機能があります。

時間のあるときにPinterestのマイページに自分が良いなと思った参考サイトや、バナーをカテゴリ分けして保存しておくと、Webデザインを作成する際のデザインの引き出しを増やすことができ、スムーズに見ることができるとても便利なのでぜひ活用してみてください。

Photoshopでバナートレースを実際にしてみよう!

Designed by Creativeart / Freepik

Photoshopの使い方が分からない方は先に別記事を参照ください!
Photoshopを起動して作業をはじめるところまでの解説を行いました。
≫Webデザイナーが解説!Photoshopの起動から書き出しまで

バナートレースをする前に必要な準備ができた所で、実際にななねこWebデザインちゃんねるのサムネイルを、画像付きでトレースの手順を解説していきます。

  1. トレース画像の配置
  2. デザインの法則を見つける
  3. 背景の作り方
  4. 図形の置き方
  5. 文字入れをする
  6. バナートレース後に実施する事

一緒に手を動かしながら下のサムネイルを作成してみましょう!

1.トレース画像の配置

では実際に上のバナートレースを一緒にしていきましょう!

バナートレースの参考画像を置いたら(※)、透明度を下げて、上に重ねて作成していっても、参考画像と作成したものの区別がつくようにしていきす。

※画像の挿入方法が分からない方は、こちらの記事をどうぞ。
≫Webデザイナーが現場で使うPhotoshop画像挿入6STEP

  1. トレース画像を配置する
  2. 画像右側の大きな赤い四角内にある、不透明度を30%〜50%にする
  3. 画像右側の左側赤い四角の鍵マークを押してトレース画像をロック

2.デザインの法則を見つける

ガイドを引いていき、文字間やマージン(余白)のデザインの法則を見つけながら確認していきます。

 

  1. 定規を表示させる
  2. 文字の始まり、終わり、写真の端から端まで、ガイドを何本も引きながら大きさを確認していく

3.背景の作り方

Designed by Creativeart / Freepik

土台となる背景を作っていきます。

今回は背景がぼかされているので、どんな元画像かわかりにくいですが、似たような写真を使って作成してみます。

上の画像をぼかしていきます。

  1. 画面上部メニューバーフィルター
  2. ぼかし
  3. ぼかし(ガウス)をクリック
  4. 数値を入力するかバーをスライド(今回は15%にしています)
  5. 画像がぼかされて、背景が完成したら、右の赤枠の目のマークを押して一旦非表示にしておきましょう。※トレースする画像が見えなくなってしまうため

4.人物の置き方

次に人物画像を置いていきます。

トレースするサムネイルの人物画像は背景が切り取られているので背景を切り取ってから配置していきましょう。

今回は簡単に背景が切り取れる【removebg】を使用して進めていきます。

背景削除

下の画像の背景を切り取ります。

【背景削除はこちらを使用しています>>removebg※登録なしで使用可能

  1. removebgを開く
  2. 背景削除したい画像を置く
  3. 自動で背景削除される
  4. ダウンロード

人物画像を置く

先程切り抜いた画像をPhotoshopで開き、トレースする画像の上に重ねてサイズを調整していきます。

  1. 背景を切り抜いた画像を置く
  2. 四隅の赤丸内の箇所をクリックしながら動かし、サイズを調節してトレース画像と合わせていく

5.図形の置き方

トレース画像の上部文字の下にある図形を置いていきます!

この図形は色がついているので、トレース画像から色を取れるように、1.トレース画像の配置で透明度を30%にしたものを一度解除して100%に戻して下さい。戻してから作成していきます。

  1. 画面左赤枠のツールバーから長方形ツール選択
  2. 左クリック押しながらサイズをあわせ長方形を作成
  3. 長方形に色を付けるので、上部バー(左赤枠内)の塗りを選択
  4. トレース画像より色を選択するため(右赤枠内)のレインボーの箇所をクリック
  5. カーソルの矢印がカラーピッカーになっているのでトレース画像の色を取りたい所をクリック
  6. 右側にカラーピッカーがでてきて今とった色を選んでくれているのでOKを押す

図形の色がトレース画像とおなじ色になりました。

  1. 人物画像の後ろに図形を置きたいので、右の四角い赤枠内のアートボードの長方形を選択
  2. 人物画像のレイヤー4の下に長方形レイヤーを移動させる
  3. 文字入れのときに見えなくなるのでこの図形も目のマークお押して非表示にしておく

6.文字入れをする

文字入れをしていきましょう!

文字入れをする前にトレース画像のフォントを探します。

フォント探しから、順番に解説していきます。

フォントを探す

トレース画像に使用しているフォントを探していきます!

下の画像で紹介している方法ですとすぐ同じフォントや似ているフォントを探すことができるので、ぜひ活用してみて下さい。

もし、同じものがない場合は似ているフォントで代用しましょう!全く同じでなくてもいいです。

フォントの大きさ、文字間を意識して見ることが大事です。

  1. 画面上部メニューバーの書式を押す
  2. マッチフォント
  3. 見本のフォントをでてきた四角で囲む(左の赤い四角内の箇所)
  4. 右側にマッチフォントがでてくるので該当するフォントを選択
  5. OK

文字入れ

フォントがわかったら実際に文字を置いていきます。

透過度を下げた見本のバナーの上に文字を置いて、サイズや文字間などをあわせていきましょう。

  1. 左ツールバーより横書き文字ツール選択
  2. 「Webデザイナーについて」とトレース画像の上に入力
  3. トレース画像に合わせて右の赤枠内で文字サイズ、文字間、文字の上下間を調節(文字が二段以上の場)
一文字ずつ文字間を調節したい場合は、文字と文字の間にカーソルを置き【Mac:option】【Windows:alt】を押しながら矢印キー左右を押すと調節できます。

このように、上に重ねることでどこが違うのかすぐに見つけることができます!

ひとつひとつ同じ文字や素材を配置し全て、サイズをあわせてバナートレースを完成させましょう!

この作業を繰り返ししていくことで、サイズ感や余白がわかるようになっていきます。

文字枠の付けかた

初心者が知るべき3つのことも入力していきましょう!

この文字には枠がついているので付け方を解説していきます。

  1. 左ツールバーより横書き文字ツール選択
  2. 「初心者が知るべきこと3つ」とトレース画像の上に入力
  3. 「初心者が知るべきこと3つ」のレイヤーを選択した状態でアートボード内の右赤枠、のなにもない位置をクリック
  4. レイヤースタイルがでてくる
  5. 境界線を選択
  6. サイズ:15、位置:外側、カラーを先程作成した長方形と同じ色にする。

これで文字に外枠を付けることができます!

他の文字も作成してみましょう!

全ての文字が作成できたら、背景と長方形の目のマークを表示にしたら完成です!

6.バナートレース後に実施する事

全ての文字や素材を参考バナーの上に重ね終わり、バナートレースが終了したら、必ず気づいた事をまとめてみることが成長に繋がります!

  • カラーは何を使用しているのか
  • フォントはなにを使用しているのか
  • 気づいた点

上記の内容などを、簡単にGoogleドキュメントなどに文字にしてまとめる事で理解がさらに深まります。

まとめ|Webデザイナーへの第一歩!Photoshopでバナー作成をしてみよう!手順を解説

Designed by Creativeart / Freepik

この記事ではWebデザイナーへの一歩として以下の内容をご紹介しました。

  • Webデザイナーが解説!バナー作成手順
  • Webデザイナーが実際にしている写真・イラスト素材の集め方とは
  • Photoshopでバナートレースを実際にしてみよう!

バナー作成ができるようになるまでの、大事なことを知り、一緒にバナートレースをしてみていかがでしたでしょうか?

バナートレースを何回か繰り返すと、理解が深まり必ず成長できます!

Webデザイナーへの第一歩をぜひ、ふみだしてみましょう!

コメント

タイトルとURLをコピーしました