2014-10-04

2014-10-04

高品質なバナー広告を作るAdd Star

 

 

参考ギャラリー


コツ&レイアウト集


バナー制作フロー
  1. 要素のバランスを見て適切なレイアウトを選ぶ
  2. 手描きのラフでレイアウトを決定
  3. PC上で組むレイアウトはまずモノクロで
  4. 要素が多い場合は3~4カ所にグルーピング
  5. 文字組みも忘れずに
  6. 飛び先や商品イメージの色を抽出して使う
  7. 最後にもう一度モノクロにして視認性チェック


  • バナー広告は潜在層向けのものであり、その人達に当事者意識を持たせて注意喚起をすべき。
  • 詳しい話はランディングページに任せて、バナーではそのサービスから得られる最も解りやすいメリットについて訴求することにフォーカスする。

レイアウトパターン例
  1. 分割してレイアウト
  2. イメージを全面で使う
  3. イメージを並べて使うレイアウト
  4. イメージを敷き詰めたレイアウト

新米のwebデザイナーが作るバナー制作時のあれ、これ





演習-画像の一部を背景に馴染ませたい

  • レイヤーマスク

 

f:id:design_works:20130718235139j:image

 


  • 背景レイヤーの上に画像を配置します

 

f:id:design_works:20130718234838j:image

 


 

f:id:design_works:20130718234517j:image

 


レイヤーマスクを追加

 

f:id:design_works:20130718235406j:image

 


 

f:id:design_works:20130718235933j:image

 


マスク内にグラデーション
  • 描画色と背景色は「デフォルト」に設定する(小さいアイコンをクリックする)

 

f:id:design_works:20130719000223j:image

 


  • 「白」から「黒」の方向にドラッグする

 

f:id:design_works:20130719000730j:image

 


 

f:id:design_works:20130719000951j:image

 


 

f:id:design_works:20130719001125j:image