下手でも下絵（ラフ）を描こう

絵が苦手でも必ず下絵を描く様にしましょう。この作業は「絵を描く」のでは無く、頭の中を整理する意味合いの方が強いです。漠然とした頭の中のイメージを、手を動かして実際に形にする事で、整理する事が出来ます。

後で修正はいくらでも出来ます。深く考えずにガンガン描いてみましょう。

この時、伝えたい情報（商品の強み）を取捨選択して、入れる文章や文字なども決めておきましょう。情報が足りないのは勿体無いですが、多すぎるのも逆効果になります。

2　材料を集める。

デザインが決まったら、必要な写真・イラスト・パーツ、文章などを揃えておきましょう。行き当たりばったりで作業するより、しっかり準備して作業した方が効率が断然良くなります。また、別のバナーを作ったり、作ったバナーの修正をする場合にもこのあたりの準備が効いて来るはずです。

集めた材料は、同じフォルダに分かりやすい名前で保存しておきましょう。

用意した素材




ここではイラストで進めていますが、実際には写真で作業する事が多いと思います。必要に応じて撮影したり、素材集などから集めましょう。

3　Photoshopで新規書類を作成する

いよいよPhotoshopでの作業です。

ファイル（F）→新規（N）
または「Ctrl+N」※Macの場合は「Command+N」

で新規書類を作ります。

幅（W）と高さ（H）に必要なサイズのピクセル数を入れ、 解像度（R）は「72」「pixel/inch」、カラーモードは「RGBカラー」「8bit」を選んでおきます。

「OK」を押して新規書類が出来ました。

分かりやすい名前を付けて、材料と同じフォルダにPhotoshop（*.PSD;*.PDD）形式で保存しておきます。

4　集めた材料を集約する

2番で集めた材料もPhotoshopで開きます。

ファイル（F）→開く（O）で材料を選んで開く。
または、Photoshopの画面に直接ドラッグ。

または、右クリック（Macだとcontorol+クリックでもOK）で「プログラムから開く」を選択し、Photoshopを選ぶ。

開いたら、3番で作った書類に全部集めます。 ドラッグしてコピーするか、レイヤーウィンドウの右上のメニューから、「レイヤーを複製（D）」を選んで、保存先のドキュメントを「3番で作った書類の名前」にして「OK」を押す。

レイヤーが複数出来て、材料が集約されました。この時レイヤーの名前を分かりやすいものにしておくと便利です。

追加で必要なテキストを打ち込みます。
文字ツールを選んで、バナー上の任意の場所をクリックし、文字を入力します。

さらに今回は丸い図形が必要なので、楕円形ツールで適当に図を書きます。出来たレイヤーのアイコン部分をダブルクリックすると塗りの色が変更できます。

5　配置の調整をする

1番で決めたデザインになる様に大きさや、配置を調整します。 この時注意する点は、
「拡大する事は出来無い」（出来るけど汚くなる）
と言うことです。

一旦縮小したものを元に戻すのもダメです。説明は割愛しますが、基本的には出来ないと思っていて下さい。

これを無視するとワードやエクセルで作ったような、素敵な（笑）バナーが出来上がります。

（ベクトルのデータをラスタライズせずに扱う場合は、拡大縮小が自由に出来ますが、ここでは全てビットマップのデータを使用している前提でお話しています。）

調整したものがこんな感じ。

6　色・影・質感などの装飾をする

必要に応じて、文字の色、罫線の色、影、質感などを調整します。センスよく仕上げるのは結構難しいので、色んな他社のバナー等を見て、参考にしましょう。

素人は大抵の場合やり過ぎます。そして「地方自治体の書類」の様な素敵な仕上がりになりますので、充分な注意が必要です。

見本ではバナー全体に2ピクセルの罫線を付けて、ハカセのイラストとフキダシの図形に影をほんのりつけています。

7　必要な形式で書き出す

とりあえずバナーが完成しました。（保存するのをお忘れなく）

Photoshopデータ（.PSD）のままではWEBでは使えませんので、WEB用の画像を書き出します。

ファイル（F）→Web用に保存…

書き出す画像のファイル形式とクオリティ等を設定して、ファイル名を付けて保存します。WEB用ですのでファイル名には日本語や機種依存文字・記号などは使えません。半角英数字とハイフン“-”やアンダーバー“_”のみでファイル名を付けましょう。

8　HTMLでリンク先などの設定をする

良し！バナーは出来た、後はHTMLでリンクの設定だ！

 <a href="リンク先URL" target="_self"> <img src="バナー画像のURL"> </a> 

基本的には上記のタグでOKです。 一個注意点が！

リンクタグ「aタグ」にはtargetと言う属性があります。これは「リンク先のURLをどうやって開くか」を指定しています。

リンクタグのターゲット属性の種類は

target=”_parent”
iframeなどで親のHTMLがリンク先に移動する

target=”_blank”
別のページでリンク先を開く

target=”_self”
今のページがリンク先のURLに移動する

target=”_top”
一番上の階層のHTMLがリンク先に移動する

通常の商品ページやカテゴリページにリンクを設定する場合は「target=”_self」または指定なしで良いのですが、iframeを使用した時などには「target=”_blank”」や「target=”_parent”」を設定し忘れない様に注意しましょう。

まとめ的な何か

いかがでしょうか？Photoshopに慣れ親しんだ人なら「そんな事知ってるよ」「もっといい方法があるYO」「毎回ハカセのイラスト使いまわすんじゃねーよ」と、不満が続出しそうな内容かも知れませんが、初心者の方向けの記事って事で何卒ご容赦下さい。

この記事は技術的な内容ではありますが、「バナー」の本来の目的は「こんな商品があるんですよ」とか「このバナーをクリックした先には面白いページがあるよ」って事をお客様（ページに来てくれた人）に伝える事にあると思っています。