大学生にバナー制作を教えてみた #4処方箋

大学生にバナー制作を教えてみた #4処方箋

今回は、これから行う授業の全体像をお伝えします。これでも減らした方なのですが、ボリュームが多くなりました(汗

カトウヒカルの顔写真

1.フォントについて

まず初めにフォントについて教えます。

フォントの基礎

  • 明朝体とゴシック体
  • プロが使う和文フォント
  • プロが使う欧文フォント

フォントの応用

  • 文字の調整
    ・文字詰め
    ・英数字と記号
    ・長音符の水平比率

2.配色について

次は配色について、基礎から応用まで教えます。

配色の基礎

  • RGBとCMYK
  • 明度と彩度と色相
  • 有彩色/無彩色/暖色/寒色/中性色
  • 補色/反対色

配色の応用

  • ベース/メイン/アクセント/白抜き
  • ハレーション/セパレーション

3.デザインの基礎

次はデザインの基礎的な知識や技術について教えます。

デザインの基礎

  • デザインの4大原則
    ・近接
    ・整列
    ・強弱
    ・反復

デザインの技術

  • 黄金比と白銀比
  • 三分割法
  • 文字組みとジャンプ率

4.バナー制作の実践

ここからは、バナー制作の実践的な内容を教えます。

Photoshopの基礎

  • ワークスペースとツールの初期化
  • 基本操作/ツール/ショートカットキー
  • テキスト
  • シェイプ
  • パス
  • 選択範囲
  • マスク
  • ブラシ
  • FX

Photoshopの応用

  • 写真の補正
  • 切り抜き
  • テキストの加工
    ・斜体
    ・袋文字
    ・ドロップシャドウと光彩
    ・パスに流し込む

Illustratorの基礎

  • Photoshopとの違い

便利なサイト

  • フリー素材サイト
    ・無料のフリー素材サイト
    ・有料のフリー素材サイト
  • デザインの参考サイト

バナー制作の流れ

  • ヒアリング
  • 優先順位付け
  • レイアウト
  • 配色
  • ブラッシュアップ
  • 複数案提出

トレーニング方法

  • 模写
  • ランサーズ

5.まとめ

かなり内容が多くなってしまって、自分でも最後までやりきれるか不安です(汗)

バナー制作の処方箋

  • フォントの基礎と応用
  • 配色の基礎と応用
  • デザインの原則と技術
  • バナー制作の実践

「#4処方箋」を撮影していますので、是非ご覧ください。

6.動画を見る

この記事をシェアする

ライター紹介

カトウヒカルの顔写真

カトウヒカル

福岡で活動するフリーランスWEBデザイナー。「ひとつひとつを丁寧に」をコンセプトに、WEBデザイナーの役に立つコンテンツを発信しています。

SNSでフォローする