ECサイトデザイン基礎②

Photoshop

4月29日

バナー作成の基礎:Photoshopを用いた模写による学習

Photoshopを用いたバナー作成の第一歩として、既存のデザインの模写を通じてレイアウト、文字、配色の分析と理解を深めることが重要です。制限時間1時間を目安に、以下のポイントを意識して取り組みましょう

制作の基本姿勢

  • 手間、無駄、無理をしない: 効率的な作業を心がけ、技術的な実現可能性を考慮しましょう
  • ソフトの理解: Photoshopの機能を理解し、効果的に活用しましょう
  • 反復練習: 多くのバナーを制作し、操作技術とデザイン感覚を磨きましょう

模写のポイント

徹底的に真似る: プロの意図(技術・技能・表現)を考えながら、Photoshopで再現する方法を探りましょう
基本要素の意識: 文字の見やすさ、レイアウト、文字、配色を常に意識しましょう

デザインの3要素

レイアウト:

  • 余白: ホワイトスペースを意識し、文字や要素間に適切なスペースを設け、美しさと見やすさを両立させましょう
  • 作品の周り、各項目の周り、枠の中にゆとりを持たせることが重要です
  • グループ化: 関連性の高い要素を近づけ、低い要素は離して配置することで、情報の構成を直感的に理解できるようにしましょう(近接)

整列: デザイン要素の特定の特徴を繰り返し使用し、一貫性と統一感を出し、情報取得を迅速化しましょう(反復)

アクセント: 強調したい部分に意図的に変化を加え、注目を集めましょう。


コントラスト、ジャンプ率の変化、効果的なアイキャッチの活用がポイントです。

文字:

  • 読みやすさの徹底: 可読性(文章の読みやすさ)、視認性(瞬時の認識しやすさ)、判読性(誤読のなさ)を意識しましょう
  • ゴシック体と明朝体の特性を理解し、使用する媒体に合わせて適切なフォントを選びましょう

配色:

  • 色の数値管理: Photoshopなどのソフトでは、わずかな数値の違いが別の色であることを理解しましょう
  • 陰影と柄の区別: 色の違いが陰影によるものか、柄によるものかを正確に判断し、表現に活かしましょう
  • グラデーションの注意: 安易な使用は避け、効果的な場合にのみ用いましょう
  • 色の意味: 配色が与える印象を意識しましょう
  • CMYKとRGB: 印刷物とWebで色数が異なることを理解しておきましょう。

今後:手間、無駄、無理をしないPhotoshopの機能を理解し、反復練習し出来の良い物を作っていく

コメント