【Photoshop】バナー作成方法
バナー作成時のポイント
- バナーサイズの基準をもとにサイズを決める
例:googleの基準を参考
support.google.com
- バナー領域である事を明示するため枠線は必須
- 枠線の幅はフォントの太さに比例する
- フォントにより印象が大きく変わるため選定が重要
- 配色はコーポレートカラーを考慮する必要がある
レイヤー構造を理解する
- 枠線
- 文字(小)
- 文字(大)
- エリア塗り(小)
- 画像(大)→バナー全体の色の基準となる
- 背景色(全面塗り)
- 背景
バナー作成手順手本をもとに練習
今回は、ローソンフレッシュのバナーを作成してみます。
手順
- バナーサイトより手本となるバナーを選定
参考サイト:レトロバナー
retrobanner.net
- バナーのメイン画像を選定 food.foto.ne.jp
- photoshopで新規作成
- ドキュメントの種類:Web
- 幅:300px
- 高さ:250px
- レイヤーを新規作成し、メイン画像を配置する
- レイヤーを新規作成し、「長方形選択ツール」より範囲選択し、背景色を塗る
- レイヤーを新規作成し、「境界線」より枠線を作成
- レイヤーを全選択し、「編集」より「境界線を描く」を選択
- 「幅」を適宜調整(5px程度)
- 枠線は、フォントサイズに依存する(あまり大きくしない)
- レイヤーを新規作成し、文字ツールより「Eat fresh,Be healthy」を入力
- 「レイヤースタイルを追加」より「境界線」を選択
- 「サイズ」を適宜調整
- レイヤーを新規作成し、文字ツールより「新鮮を毎週お届け」を入力
- 「レイヤースタイルを追加」より「光彩(外側)」を選択
- 「不透明度」を適宜調整
- 効果をかけ過ぎると不自然になるため注意
- ブラシツールを利用し、文字の上下の線を作成
- ブラシツールを選択
- 直径:1px
- 硬さ:100%
- 「ブラシパネルの切り替え」を選択
- 「間隔」を150%にする
- 「上線」レイヤーに線を描く
- 「背景」レイヤーと「上線」レイヤーをを選択し、水平方向中央揃えにする
- 「上線」レイヤーをコピーし、「下線」を作成
- 「上線」「下線」を等間隔に配置
- コピースタンプツールを利用し、元画像からロゴを流用
- コピースタンプツールを選択
- 元画像上で、alt + click
- 作成中ファイルの新規レイヤー上でドラッグ
- 文字毎にレイヤーを作成し、残りの文字を作成
- 完成