WEBデザイン 陽炎稲妻水の月

初心者がwebデザインについて勉強しています。

【Photoshop】バナー作成方法

バナー作成時のポイント

  • バナーサイズの基準をもとにサイズを決める

    例:googleの基準を参考

    support.google.com
  • バナー領域である事を明示するため枠線は必須
  • 枠線の幅はフォントの太さに比例する
  • フォントにより印象が大きく変わるため選定が重要
  • 配色はコーポレートカラーを考慮する必要がある

レイヤー構造を理解する

  • 枠線
  • 文字(小)
  • 文字(大)
  • エリア塗り(小)
  • 画像(大)→バナー全体の色の基準となる
  • 背景色(全面塗り)
  • 背景

バナー作成手順手本をもとに練習

今回は、ローソンフレッシュのバナーを作成してみます。

f:id:sandw:20160621054943g:plain

手順

  1. バナーサイトより手本となるバナーを選定

    参考サイト:レトロバナー

    retrobanner.net
  2. バナーのメイン画像を選定
  3. food.foto.ne.jp
  4. photoshopで新規作成
    • ドキュメントの種類:Web
    • 幅:300px
    • 高さ:250px
    f:id:sandw:20160621053300p:plain

  5. レイヤーを新規作成し、メイン画像を配置する

    f:id:sandw:20160621065237p:plain

  6. レイヤーを新規作成し、「長方形選択ツール」より範囲選択し、背景色を塗る

    f:id:sandw:20160621064901p:plain

  7. レイヤーを新規作成し、「境界線」より枠線を作成
    • レイヤーを全選択し、「編集」より「境界線を描く」を選択
    • 「幅」を適宜調整(5px程度)
    • 枠線は、フォントサイズに依存する(あまり大きくしない)
    f:id:sandw:20160621064123p:plain
  8. レイヤーを新規作成し、文字ツールより「Eat fresh,Be healthy」を入力
    • 「レイヤースタイルを追加」より「境界線」を選択
    • 「サイズ」を適宜調整
    f:id:sandw:20160621063639p:plain

  9. レイヤーを新規作成し、文字ツールより「新鮮を毎週お届け」を入力
    • 「レイヤースタイルを追加」より「光彩(外側)」を選択
    • 「不透明度」を適宜調整
    • 効果をかけ過ぎると不自然になるため注意
    f:id:sandw:20160621063001p:plain

  10. ブラシツールを利用し、文字の上下の線を作成
    • ブラシツールを選択
    • 直径:1px
    • 硬さ:100%
    • 「ブラシパネルの切り替え」を選択
    • 「間隔」を150%にする
    • 「上線」レイヤーに線を描く
    • 「背景」レイヤーと「上線」レイヤーをを選択し、水平方向中央揃えにする
    • 「上線」レイヤーをコピーし、「下線」を作成
    • 「上線」「下線」を等間隔に配置
    f:id:sandw:20160621061244p:plain

  11. コピースタンプツールを利用し、元画像からロゴを流用
    • コピースタンプツールを選択
    • 元画像上で、alt + click
    • 作成中ファイルの新規レイヤー上でドラッグ
    f:id:sandw:20160621060558p:plain

  12. 文字毎にレイヤーを作成し、残りの文字を作成

    f:id:sandw:20160621060253p:plain

  13. 完成

    f:id:sandw:20160621054807p:plain