jittodesign blog

デザインやグラフィックソフト、カメラなどに関するブログです。

2017年度 NDG Webデザイン授業

前期授業

デジタルグラフィックデザイン・テキストのダウンロード

1回目オリエンテーション/自己紹介

  • 授業の進め方や全体の学ぶこと、業界や就職に関する話
  • 自己紹介(10分で考えて、2分の自己紹介を行う)

Point自分の事を知らない相手にプレゼンテーションを行うので、相手を想定してどう伝わるのかを考える事。デザインと同じ。

情報発信の習慣を付けるための宿題

2回目プレゼンテーション1

  • 「好きな本やアーティストをプレゼンテーションする」をテーマにプレゼンテーションを考える
  • 紹介する候補を書き出す
  • 紹介するものを決定する
  • 紹介するものに関する情報を集める
  • 情報をまとめる

Point思い付きをすぐに形にするのではなく、情報を整理した上で戦略を練って構成を考える事。

3回目プレゼンテーション2

  • プレゼンテーションのストーリーを考える 制限時間3分
  • ストーリーに則ったデリバリー文を考える
  • プレゼンテーションに必要なスライドのラフスケッチを描く

4回目プレゼンテーション3

  • MacのためのKeynoteスターターガイド https://itunes.apple.com/book/id1210529998
  • Keynoteの使い方 Keynoteヘルプ https://help.apple.com/keynote/mac/7.1/?lang=ja
  • 効果音が無料で作れる Amper Music https://www.ampermusic.com/

5回目プレゼンテーション4

  • スライドに使用する素材の準備(アイコン、画像、図版など)
  • スライドの制作

6回目プレゼンテーション5

  • プレゼンテーション

7回目Web HTML/CSSの基礎知識1
Memo
HTMLとCSSの基礎知識 https://jittodesign.org/library/page-11307/page-11312/

  • Brackets、Chromeのインストール
  • HTMLの基礎知識

Lesson 1 HTMLの基礎 1
Lesson 2 HTMLの基礎 2

8回目Web HTML/CSSの基礎知識2

    • CSSの基礎知識

Lesson 3 HTML/CSSの基礎知識 3

9回目MuseによるWebサイトの制作1

Museのテキストのダウンロード https://www.dropbox.com/s/jjbhb4s8nj2o83a/Muse_CC2017_text.pdf?dl=0

  • Adobe Muse CCの説明
  • Adobe Muse CCで出来ること
  • テーマの説明「自分のルーツ」「プロフィールサイト」「ポートレートサイト
  • 素材の準備
[wpdm_package id=’12162′]

課題 アニメーションGIFの課題

10回目MuseによるWebサイトの制作2

  • MuseによるWebサイトの制作
  • 固定幅のWebサイト
  • サイトマップの作成
  • マスター設定
  • ヘッダーメニューの作成
  • ファビコンの設定
  • 仮サイトへのアップロード

Lesson 4 Museの使い方 基本編 Museの起動
Lesson 5 Museの使い方 基本編 サイトマップの作成
Lesson 6 Muse CC の使い方 基本編 マスターの設定 背景色の設定
Lesson 7 Muse CC の使い方 基本編 マスターの設定 ヘッダーの設定
Lesson 8 Muse CC の使い方 基本編 マスターの設定 メニューの作成
Lesson 9 Muse CC の使い方 基本編 マスターの設定 ファビコンの作成
Lesson 10 Muse CC の使い方 基本編 マスターの設定 仮サイトへのアップロード
Lesson 11 Muse CC の使い方 他のページへのハイパーリンクの設定
Lesson 12 Muse CC の使い方 リンクアンカーの挿入
Lesson 13 Muse CC の使い方 外部サイトへのハイパーリンクの設定
Lesson 14 Muse CC の使い方 ソーシャルウィジェットの利用

11回目MuseによるWebサイトの制作3

  • MuseによるWebサイトの制作

Lesson 15 Muse CC の使い方 サイズ調整の設定
Lesson 16 Muse CC の使い方 基本編 フッターメニューの設定

12回目MuseによるWebサイトの制作4

  • MuseによるWebサイトの制作

Lesson 17 Muse CC の使い方 ブレークポイントを追加してレシポンシブにする

13回目MuseによるWebサイトの制作5

  • Webサイトの発表

14回目MuseによるWebサイトの制作6

  • Webサイトのデザイン研究

Memo
Animate CCの使い方解説動画 https://jittodesign.org/library/page-11307/page-12250/

Lesson 18 Muse CC の使い方 スクロール効果を利用したサイト

 

後期授業

  1. Premiere Pro ムービー編集
  2. AfterEffects ムービー編集
  3. Character Animator キャラクター制作
  4. Muse ブランドのWebサイト制作

 

ブランドサイトに関して
  • 自分で所有している商品などのブランドのWebサイト
  • 写真やムービーの制作ができる商品

1回目ムービー編集(1)

  • ムービー撮影の基礎知識
  • Premiere Proの基本操作(1)

2回目ムービー編集(2)

  • Premiere Proの基本操作(2)

3回目ムービー編集(3)

  • 課題製作 デザイナーとしてのPV製作

4回目AfterEffects(1)

参考サイト

 

  • AfterEffectsのインタフェース
  • 新規コンポジション
  • ファイルの読み込み
  • レイヤーの作成
  • 簡単なモーションの制作

5回目AfterEffects(2)

  • 複数のモーション
  • グラフエディタ
  • モーションブラー
  • ウィグラー
  • モーションスケッチ

6回目AfterEffects(3)

  • ヌルオブジェクト
  • マスク
  • エフェクト
  • テキストアニメーション
  • プラグイン(Animation Composer 2)

課題の手引き https://www.dropbox.com/s/yuztc3gjmqp2b97/2017%E8%AA%B2%E9%A1%8C%E5%88%B6%E4%BD%9C%E3%81%AE%E6%89%8B%E9%A0%86.pdf?dl=0

7回目AfterEffects(4)

  • 3Dレイヤー
  • カメラレイヤー
  • ライトレイヤー

8回目商品・ブランドのWebサイト制作1

商品またはブランドのWebサイト課題

[条件]
  • ベースはMuse CCで制作すること。
  • Animate CC、Premiere、AfterEffectsも利用する。
  • PC用/スマホ用にレシポンシブにすること。ブレークポントを幾つ作るか、何pxにするかも自分なりに検証して決めること。
  • 基本的に授業の時間内で進め、授業時間の最後にその日にやったことを提出すること。ノートは写真を撮り、Mac上の作業はキャプチャーと撮って送ること。
  • すぐに制作に掛からずに、コンセプトの決定、サムネイル(ワイヤーフレーム)、ラフスケッチ(モックアップ)を描いてから始めること。

9回目商品・ブランドのWebサイト制作2
Lesson 19 PC用/スマホ用のWebサイトの作成

10回目商品・ブランドのWebサイト制作3
11回目商品・ブランドのWebサイト制作4

提出期限:2018年1月5日

Business Catalystにアップロードし、URLをFacebookのメッセージで提出すること

12回目レーザーカッター制作

レーザーカッター Podeaで加工できる材料

【木材】低密度木材(ヒノキ、杉、シナベニヤ、バルサ、MDFなど) 彫刻/切断
切断は厚み2mmまで、設置可能な厚さ35mmまで

【木材】高密度木材(黒檀、リグナムバイタ、銘木など) 彫刻のみ

【用紙】(コピー用紙、厚紙、ボール紙、段ボールなど) 彫刻/切断
ダンボールは厚み4mm以下

【革】天然革、合皮革 彫刻/切断
切断は2mm以下

【樹脂】アクリルなど 不可

【布】綿、化繊、デニムなど 彫刻/切断
白・青色は不可

【金属】鉄、アルミなど 不可

【アルミアルマイト剥離】 彫刻のみ
白、青色は不可

【食品】クッキー、どら焼き、海苔など 彫刻/切断
水分が多く含まれるものは不可

加工用データの要件

【Illustrator】

ドキュメント:RGBモード
アートボード:素材サイズ
切断:0.3pt(約0.1mm)、線カラーRed、パスを連結しクローズドパス、グループ化しない

彫刻:塗りカラー:Black

13回目レーザーカッター制作

  • 制作

14回目レーザーカッター制作

  • 制作

15回目作品の撮影

  • 撮影
Pocket
LINEで送る