ForYourImages MAGAZINE

ひとつの画像素材を使って複数サイズのバナーをデザインするコツ【Photoshop】

2018/10/29
2018/10/29

ひとつの画像素材を使って複数サイズのバナーをデザインするコツ【Photoshop】

Photoshopで背景を伸ばしてバナーをデザインする

広告バナーにはいくつかのサイズがあり、一つのストックフォトですべてのサイズを作る事に苦労してる方も多いのではないでしょうか?

また、人物にかぶらないようにテキストを配置したときに窮屈に感じる場合も多いと思います。背景を伸ばす方法はいくつかありますが、今回は新人デザイナーやWEBデザイン初心者の方に向けてPhotoshopの「コンテンツに応じて拡大・縮小」を使ったバナーの制作方法をご紹介します。

今回使用した素材はこちら

購入した素材のカンバスサイズを広げる

画像をPhotoshopで開いたら背景レイヤーの鍵アイコンをクリックしてレイヤーの部分ロックを解除します。レイヤー名が「背景」から「レイヤー0」に変わります。

メニューの「イメージ」「カンバスサイズ」でカンバスサイズを広くします。使用する画像にもよりますが、横幅1.5倍くらいを上限の目安にしてください。


左右に透明背景が足された画像ができあがりました。

画像の背景を伸ばす

メニューの「編集」「コンテンツに応じて拡大・縮小」を選択すると画像にバウンディングボックスが表示されるので右端と左橋をそれぞれドラッグしてのばしてください。

注意点

  • 人物が中央にいる画像でしか使えません。端にいる人物は変形してしまうので注意。
  • 背景に動物や人物、車などがあると変形されて違和感が出てしまいます。背景が建物や自然風景などの画像で試してみてください。
  • この方法では縦方向の背景を伸ばすと人物の上下が変形してしまいます。

背景を伸ばしていないと画像が足りない場合には画面を区切りがち。テキストは読みやすいけれど全体的に窮屈で退屈な印象になってしまいます。
背景を伸ばすと画面いっぱいに画像を使うことでのびのびとした印象に。人物とテキストの関係性も近くなり、よりメッセージ性が強いバナーになります。

広告バナーだけでなく、このメールのトップバナーも背景を伸ばすことで見る人の目を引く広がりのある画像になります。「背景が少したりないな」と思ったらぜひお試しください!

ForYourImagesで画像素材を見つける

高品質で気軽に使える写真素材のForYourImages