こんにちは！
火曜日担当のWEB・デザインチームです。
今回はいつもと違った新人Webデザイナーの方々向けたバナーの作り方を教えします。 今年入社した私ですが、バナー作りが苦手なんです。どうすればクリックしてもらえるのか、どうすれば情報に埋もれないようにするのか、作るたびに奮闘しています。 そんな悩みの種を解消するため、今日から使える小技を教えます。
目立たせたい！なら飛び出そう！
よく見るバナーは枠内に情報を収めていますが、今回は枠内から収めない。飛び出したバナーを作りました。下記の写真のバナーを見比べてみましょう。
②の飛び出しているバナーの方が、目立っているように見えませんか？背景透過した素材を使うことで、いつもより目立つバナーが出来上がります。 保存方法はPNGで保存しましょう。
このバナーはPNGで保存されています。そのためデータ量はいつもより重くなるので、画面表示が遅いと感じたら、
画像を圧縮をお勧めします。下記におすすめの画像圧縮サイトを貼っておきます。是非活用してみてください。
おすすめ画像圧縮サイト
素材の注意点
今回のバナーは初めから素材が背景が透過させられていましたが、素材が全て背景が透過されているとは限りません。
使いたい素材が、背景透過されていない場合は自分で背景透過する必要があります。
“Photoshop”を使用している方は“選択とマスク”を使用した背景透過がおすすめです。
スマホの方は”ibisPaint”の“透明塗りつぶしサブツール”でも背景透過が出来ます。”IbsPaint”は”Photoshop”のようにレイヤー操作や細かいパーツ分けも可能なので、是非活用してみてください。
過去にも IbsPaintについての記事もあります。是非ご覧ください。
