広告バナーの作り方 画像編
8月は何をやっていたかと言うと
「ゆきみ愛オンデマンド」と言う動画配信サイトを作っていた。
ゆきみ企画的には今、動画配信サイトと言うのがマイブームだったりする。
でだ、一通りサイトの方は出来上がったので次に作っておくものは、
やはりサイトを作ったら「告知」をしてサイトの存在を世に知らせる必要がある。
そこで「広告バナー」と言うものが必要になるわけですよ。
なので今回は「広告バナーの作り方」についてザックリと解説する。
【事前に準備して置く物】
1.画像処理ソフト（無料ソフトのPhoto Scape と有料ソフトのPhotoShop Erements ）
2.画像素材（今回は無料素材ぱくたそさんから）
3.アイディア（笑）（これが無いと何事も始まらない）
.
準備が整ったら製作開始！
.
まず最初にバナーのサイズはどれくらいの大きさにするかを考える。
経験上、これくらいのサイズが良いと思われるのは、横630 X 縦420ピクセル。
理由は、ブログのアイキャッチや、記事投稿スペースにフィットしやすい。
また、ツイッターの投稿の際は自動的に横600ピクセルに縮小されても、
タイムラインで目立ちやすい大きさだからである。
で、バナーで伝えたい事のコンセプトと言うのが、今回は「動画配信サイト」
ゆえに、スマホやタブレットなどのモバイル機器からでも24時間いつでも、
どこでもパーソナルに楽しめるって事だから、そこをアピールする。
さて、早速バナーのベース画像になる素材を無料素材ぱくたそさんで探す。
今回はこれにした。
モバイルなイメージにピッタリだね。
で、この画像をどうするかって言うと、必要な部分を無料ソフトのPhoto Scape を使って切り抜き、次に切り抜いた画像を完成予定のバナーサイズにサイズ変換しておく。
下準備ができたら、取りあえずこの画像をJPGで保存。
そしてここからがバナー製作の作業に入る。
先ほどの画像にあるスマホ部分のディスプレイに表示されているのは、
「ぱくたそ」さんの原画なので、このスマホのディスプレイ画面の所へ、
私が作ったサイト「ゆきみ愛オンデマンド」のトップページを重ねて貼り付ける。
そのやり方は簡単で、自分のスマホで「ゆきみ愛オンデマンド」のサイトを
表示させて、画面キャプチャーして保存、PCへそれを転送して置く。
そこまで出来たら、無料ソフトのPhoto Scape を立ち上げ・・・
いちいち面倒なので、以降「フォトスケープ」と簡単に書くぞ！ いいな！
フォトスケープを立ち上げたら、ベース画像を読み込み、フォトの追加メニューから、
スマホのキャプチャー画像をベース画像の上に乗っけて、大きさや角度を調節し、
原画のスマホディスプレイにうまく合わせる。
ここで一旦この画像を保存しておく。
フォトスケープでは、レイヤー（作業途中のファイル）画像の保存ができないので、
一つ一つの作業が終了した時点で保存しておかないと、後で困る事になるから。
そしてその次、サイトが「ゆきみ愛」をフューチャーしてるので、
ゆきみ愛の顔写真が無い事には何も始まらない。
それとサイト名を目立たせたいので、
サイト名の文字を載せる所に背景も付けておこうと思う。
まずは「ゆきみ愛」の写真の処理から始める。素材となる元画像はこれ。
今度は上の元素材の画像の赤い背景を抜くので、有料ソフトのPhotoShop Erementsを立ち上げ、元素材画像を開く。
したら、自動選択ツールとか、消しゴムツールとかを使って、上手く背景を消す。
背景が消えたらば、この画像を png 形式で保存する。
jpg で保存してしまうと、せっかく背景を抜いたのに白い背景が付いてしまう。
なので、下記の状態になるように png で保存する。
うむ、多少背景の消し残り見たいなのがあるが、小さく縮小して使うので大丈夫！
で、またフォトスケープを立ち上げて、保存して置いたバナーのベース画像を開く。
そしてフォトの追加メニューから、背景抜きしたゆきみ愛.png をベース画像の上に乗っけて、配置と大きさを決める。
さらに、宣伝サイトのタイトル名を書く所に背景を付ける。今回は黒帯（笑）
なぜ黒帯なのかと言うと、戦う踊り子ゆきみ愛なので黒帯がふさわしいと・・・
黒帯は透明度を調整して、適当に背景が透けるようにするといい感じになる。
こんな感じ。
さて、ここまでできたらば、今度はそのままフォトスケープのオブジェクトタブから
テキストボタンをクリックして、この黒帯の上にサイトタイトル名を乗せます。
こんな感じ２。
さらに最後の仕上げとして、キャチフレーズも書いて置く。
スマホやタブレットでも見られる動画配信サイトですよ～！
やっぱキャッチフレーズは入れといた方がいい。
サイトの売りは何なのかと、ここを伝えないとね。
はい、これで広告バナーは出来上がりでございます。
あとは告知する場所？ スペースによってはこの大きさのバナーでは、
しっくりハマらない事もあるので、ここで作ったバナーを基に、
横300 X 縦250ピクセルのバナーも作っておけば、ほぼ対応出来ます。
ブログのサイドバーとかにバナーを貼り付ける場合や、ブログの記事下に
バナーを貼りたいと言う場合にも使えます。
まぁ、ヒマな人は色々やってみると良いです。
本日はこれまでです。
