2.4 画像に文章をつける

2.4 画像に文章をつける

画像編集ソフトPhotoshopを使ってバナー広告画像を作る４回目です。

前回は、全体の画像を仕上げるところまで説明してきましたが、画像だけでは何を伝えたいのかが分かりにくくなってしまいます。

今回は、バナー上に文字を入れて、よりバナーらしい画像に仕上げていくところまでをご紹介していきます。

文字の大きさや色、背景画像とのバランスなども考慮して、文字を入れていきます。

文字を入れる

こちらの画像を使って、文字を入れていきましょう。

この画像は、新商品のコーヒーを紹介するためのバナー広告になります。

新しいことを強調するために「NEW」の文字を入れていきましょう。

文字ツールを選択して入力していきましょう。

画像の上に「NEW」の文字を入れたところです。

設定が赤色になっていたため、赤文字になってしまってます。

色のバランスとしては、あまりよくないので、色を変更していきましょう。

全体画像とのバランスを考え、明るめの水色の文字に変更したため、全体的なバランスが良くなっています。

次に、同じように追加の文字を入力していきます。

コーヒーの文字を入力したのが表示されているでしょう。

バランスを考え、文字サイズを変えて調整する作業が必要です。

文字間を整える

続いて、金額を入れていきます。

画面の左下部分に「￥100」の文字を入れてます。

全体とのバランスを考えると、数字を目立たせたいので、数字のバランスが悪い部分を修正していきましょう。

￥マークの縮小・および数字とのバランスを整える

値段を目立たせたいので、「￥」マークを小さくしていきましょう。

「￥」マークだけを範囲指定し、サイズを「33pt」にして表示してます。

サイズは、ある一定のフォントサイズを選ぶことができますが、直接入力しても変更可能です。

今回は、「33pt」と直接入力してサイズを変えてます。

次に、100の数字のバランスが良くないので、整えていきます。

「￥100」のレイヤーを指定し、フォントパネルを表示させます。

100だけを範囲指定し、数字間の幅を変更しましょう。

今回は「-50」を指定しました。

わかりにくいかもしれませんが、「100」の数字と数字の間が少しだけ狭くなり、バランスが整ってます。

数字間の変更も直接入力することは可能ですので、ご自分で試してみても良いでしょう。

￥と値段の間のバランスを整える

このバナー画像は、新しい商品を紹介するためのバナーです。

お客様に一目見ただけで、値段や新しい商品が出たという思いが伝わるように編集しなければなりません。

そのため、値段表示は一番こだわりたいところです。

今表示されている画像ですと、￥と数字との間が空いてしまっていて、間延びしている感じがします。

￥と数字の間にカーソルを表示させます。

「-75」と入力しました。

上記の画像は、変更前と変更後の画像です。

文字と数字との間が少し狭くなったのがおわかりいただけましたでしょうか？

縦文字を使って文字を入れる

最後に「税込」表示をしたいので、縦文字で入力していきます。

￥100の横に縦書きで「税込」と入力しましょう。

まとめ

ここまでの工程を完了すれば、基本的な文字入力作業は完了です。

今回の文字の入力から、バランスを整えることや縦文字の入力方法を交えて画像全体に、文字を入れる作業の説明は以上です。

文字を入れるだけで情報量がグッと上がりますし、バナーっぽくなります。

次回は、いよいよ最後の作業になります。

完成を目指して、あと少し頑張っていきましょう。