バナーのリサイズで上司からOKが貰えない。
バナーのリサイズが上手くできない。
バナーのリサイズで気をつけるべきことがあれば知りたいです。
こういった疑問に答えます。
デザイナーの@Naoyaです。
目次
- バナーリサイズ対応の極意
バナーのリサイズって分からないことだらけだよね。
え？これ文字入らなくない？てか、なんかレイヤースタイルバグってる!
ぎゃ～助けて！！！リサイズのバカ！バカ！
バナーリサイズ対応の極意
- レイヤースタイルの調整を行なったか？
- サイズに合った文字組み、レイアウトになっているか？
- 背景画像やエフェクト等、リサイズを考慮しているか？
- 情報を全て入れようとしていないか？
レイヤースタイルの調整を行なったか？
一つ目！
レイヤースタイルの調整を行ったかの確認です。
レイヤースタイルは使用しているものと一緒に比率を保って縮小してくれる訳ではないからです。
リサイズ時にレイヤースタイルの調整したものと調整していないものを比べてみる
こちらがリサイズ前の画像とします。
リサイズ時にレイヤースタイルを調整していないもの
リサイズ時にレイヤースタイルを調整したもの
一枚目はレイヤースタイルの調整をしていないので文字周りがおかしいですが、二枚目はレイヤースタイルの調整をしているので違和感がない。
なので、レイヤースタイルを使用しているレイヤーの調整を行ったら、同時にレイヤースタイルの調整も行う必要があります。
特にゲーム系のデザインだと必須です。
縮小をする前にスマートオブジェクトを適用して調整するのも、ありです。
https://nexout.blog/photoshop-smart-object
サイズに合った文字組み、レイアウトになっているか？
二つ目！
サイズに合った文字組み、レイアウトになっているかの確認です。
リサイズとはベースのものをそのまま小さくする対応ではなく、それぞれのサイズに最適化したデザインを制作することです。
リサイズ前とリサイズ後の画像を比べてみる
リサイズ前
リサイズ後
リサイズ後のものはリサイズ前のものに比べ、レイアウトや文字組みが異なります。
なので繰り返しになりますが、リサイズ前の文字組み、レイアウトに引っ張られていないかの確認をします。
———————————————
チュートリアル準備中
———————————————
背景画像やエフェクト等、リサイズを考慮しているか？
三つ目！
背景画像やエフェクト等がリサイズを考慮しているか確認です。
文字組みもそうですが、背景画像やエフェクト等の微調整は忘れがちだからです。
体験談：リサイズ時に文字の調整しかしていなくて先輩に指摘を受けた。
実際にNaoyaも新人の頃に実務でリサイズをしている時に、文字のリサイズ調整しかしていなくて先輩に背景画像とエフェクトの指摘を受けました、これほんと忘れがち。
なので、背景画像やエフェクト等がリサイズを考慮しているか確認をします。
情報を全て入れようとしていないか？
四つ目！
情報を全て入れようとしていないかの確認です。
リサイズ対応はあくまでも指定のサイズに最適化する対応です。
なので無理にコピーを全て入れる必要はありません。
リサイズ前とリサイズ後の画像を比べてみる
リサイズ前
リサイズ後
リサイズ後の画像はリサイズ前の画像に比べ情報を減らしている。
因みにサイズの割りに情報が多いデザインは説明くさくなりダサく見えがちです。
———————————————
チュートリアル準備中
———————————————
この項目はクライアントの意図により解釈が異なる場合があるので、コピーを除いたものと、全て含めたものどちらも提案するのが無難です。