目次
2.5 ボタンの作り方
全5回にわたって、バナー広告画像の作り方を解説しております。
今回は、最後の5回目になります。
最後は、バナーの最も重要な箇所、ボタンづくりについて作り方を説明していきます。
ボタンはバナー広告にとって最後の砦。押してもらわないことには成果に繋がりません。
このボタンが小さくてわかりにくかったり、探せなかったりしては、広告を出している意味もなくなってしまいます。
興味を持った方やこの商品を詳しく知りたいと思った方が、すぐにボタンを押せるよう促すのもバナー広告の役割になります。
画像内にしっかりと組み入れていきましょう。
ボタンをデザインする
図形ツールを使って、ボタンを作成していきます。
ツールバーから図形ツール→長方形ツールを選びます。
ツールタイプはシェイプ機能にしましょう。
長方形の角に丸みを持たせるために、上段にあるメニューバーからエッジ数値を変えましょう。
今回は、50pxに変更しております。
変更した後、画像にボタンを作っていきます。
画像の右下に図形を作成したのがわかるでしょうか。
設置した後に、エッジを変更することもできます。
◎部分に矢印を合わせてドラッグをすることで、エッジ部分が変更できます。
シェイプ機能にしていないとこの操作はできないので注意してください。
ボタン上に文字を入れる
次にボタンをクリックしてもらうために、図形上に文字を入れていきましょう。
今回は、「詳しくはこちらから」を入力していきます。
文字を入れてみましたが、ボタンと文字がアンバランスになっています。
次はこのバランスを整えていきましょう。
ボタンと文字のバランスを整えていく
「詳しくはこちらから」の文字レイヤーを指定し、移動しながらボタンとの調整をしていきます。
大きさやバランスを整えて、完成したものがこちらです。
画像全体を統合する
バナーが完成しましたが、このままでは画像として使用できません。
それは、レイヤーが重なっている状態だからです。
レイヤーの重なりを一つの画像に重ねていく作業をしていきましょう。
レイヤーパネルをご覧ください。
沢山のレイヤーが重なっている状態です。
このレイヤーを一つの画像にまとめていきます。
メニュー画面からレイヤーを選び、「画像を統合」を選びます。
画像が統合されました。これで、バナー画像のできあがりです。
画像を保存する
出来上がった画像は、Web用の画像に変更することが必要です。
最後に、画像を保存する方法をご紹介します。
AC写真よりダウンロード
Web上で掲載できる画像はJPNG・PNG・GIF拡張子の3種類です。
画像のファイル名の後ろの「．（ドット）」以降につく拡張子のことを意味します。
このファイルを選ぶことで、WEB上に画像表示させることができるのです。
最後の作業として、Photoshop上でWeb用の画像保存をしていきましょう。
これからその保存方法をご紹介します。
ファイルメニューから書き出しを選択します。
「PNGとしてクイック書き出し」を選ぶとPNG画像保存ができます。
画像ファイルを確かめたい時は、画像ファイルのプロパティで確認できます。
まとめ
いかがでしたでしょうか？
バナー広告画像は、初心者でも簡単に作ることができます。
Photoshopの基本操作を抑えるだけで、これだけ立派な画像が作れるようになります。
最初は慣れない操作に戸惑うこともあるかもしれませんが、是非、使い続けて慣れていきましょう。
