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

ロードマップ

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

Illustratorの基本機能を理解したけれど、実際にバナーを作成してみようと思うと、手順がわからないですよね…

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

  • バナー作成が出来るようになる方法
  • 実践!案件も取れるようになるバナー作成手順公開

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

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

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

Designed by Creativeart / Freepik

Webデザイナーの勉強を進めてIllustratorにも慣れたら、バナー作成をして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デザインを作成する際のデザインの引き出しを増やすことができ、スムーズに見ることができるとても便利なのでぜひ活用してみてください。

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

Designed by Creativeart / Freepik

Illustratorの基礎知識がない方は先に別記事を参照ください!
Webデザイナーが知っておくべきIllustratorの基礎知識から導入方法!

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

  1. トレース画像の配置
  2. デザインの法則を見つける
  3. 背景のつくりかた
  4. イラスト素材を配置
  5. 人物の置き方
  6. 図形の置き方
  7. 文字入れをする
  8. 文字にグラデーションをかける
  9. 最終調節

トレースは全く同じ素材がみつからない事がほとんどなので、似たような素材で対応しましょう!

文字の置き方素材の置き方、大きさを意識して把握することが大事なので、一緒に手を動かしながら下のサムネイルを作成してみましょう!

1.トレース画像の配置

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

まずは新規ファイルを作成してください。

※新規ファイルの作成方法がわからない方はこちらの記事をどうぞ。

Webデザイナーに最低限必要なIllustratorの使用方法を解説!

画像挿入

  1. 画面上部ワークスペースのファイル
  2. 開く
  3. 画像を選択したら挿入できます。

透明度を下げる

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

  1. 画面右プロパティを選択
  2. 不透明度を30〜50%にする

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

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

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

3.背景の作り方

上の画像をぼかして、土台となる背景を作っていきます。

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

  1. 画面上部メニューバー効果
  2. ぼかし
  3. ぼかし(ガウス)をクリック
  4. 数値を入力するか、バーをスライド(今回は15%にしています)

画像がぼかされて、背景が完成したら、右の赤枠の目のマークを押して一旦非表示にしておきましょう。※トレースする画像が見えなくなってしまうため

4.イラスト素材を配置

ギザギザの吹き出しとパソコンイラスト素材を配置していきます。

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

「イラストAC」から似たような素材をどちらもai形式でダウンロードしてきました。

    1. Illustratorで素材を開く
    2. 貼りたい素材を選択して、コピー【Mac:command+C】【Windows:Ctrl+C】
    3. 置きたい場所を選択した状態で貼り付け【Mac:command+V】【Windows:Ctrl+V】
    4. カラーを変える
    5. イラスト素材の上に同じように文字を置く
    6. パソコイラスト素材も同じように配置
    7. 非表示にしていた、ぼかした背景画像を目のマークを押して表示にする
    8. 完成

5.人物の置き方

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

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

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

背景削除

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

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

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

人物画像を置く

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

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

6.図形の置き方

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

 

  1. ①画面左赤枠のツールバーから長方形ツール選択
  2. ②左クリック押しながらサイズをあわせ長方形を作成
  3. ③長方形に色を付けるので、上部バー(左赤枠内)の塗りを選択
  4. ④黄色の長方形なので黄色を選択

7.文字入れをする

透過度を下げた見本のバナーの上に文字を置いて作成していきます。

  1. 左ツールバーより横書き文字ツール選択
  2. 「Webデザイナーが」とトレース画像の上に入力
  3. 文字サイズを調節
  4. 画面上部メニューバーのウィンドウ
  5. アピアランスを押すとアピアランスパネルがでてくる
  6. 出てきたアピアランスパネルの新規作成をクリック
  7. 塗りを黄色に設定
  8. 線を赤に設定
  9. 線をクリック
  10. 線幅を20pxにする
  11. 角の形状を真ん中にする

8.文字にグラデーションを掛ける

  1. 【7.の文字入れをする】と同じように文字を入れ、線をつける
  2. 上部メニューバーのウィンドウ
  3. スウォッチを選択、③スウォッチバネルが開かれる
  4. スウォッチパネルの④メニューを開く
  5. スウォッチライブラリを開く
  6. グラデーションを開く
  7. メタルをクリック
  8. ⑧メタルパネルが開かれるのでゴールドのグラデーションを選択するとグラデーションがかかります。

9.最終調節

  1. プロが教えますの文字を【7.の文字入れをする】と同じように作成配置
  2. キラキラの素材を【4.イラスト素材を配置】と同じように配置
  3. 非表示にしていた、ぼかした背景画像を目のマークを押して表示にする
  4. 完成

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

Designed by Creativeart / Freepik

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

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

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

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

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

コメント

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