More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。
Similar to Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。 (14)
More from 九州大学物理研究部2015
Recently uploaded
Recently uploaded (15)
Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。
- 2. はじめに
- 3. はじめに ①: About me 名前: タクシー 学部: 経済学部 経済経営学科 サークル: Qpic,九大祭,ANIMA 興味: 映像,ロゴ,イラスト
- 4. グラフィック講座 補助Webページ powered by strikingly はじめに ②: Webページ 第1∼5回の講座資料 上回生によるドット絵・一枚絵メイキング とかいろいろあるよ
- 5. グラフィック講座 補助Webページ powered by strikingly はじめに ②: Webページ
- 6. 1. レイアウトの話 2. 色遣いの話 3. フォントの話 4. タイトルロゴの話 5. 素材づくりの話
- 8. レイアウトの話 ❶
- 10. ❶ レイアウトの話
- 13. ❶ レイアウトの話 レイアウトとは 情報の整理整頓 授業ノートや学校のプリントの整理を想像してみよう。 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目
- 14. 英語 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
- 15. 国語 英語 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 1. グループ化 「国語」「算数」「英語」のグループ さらにその下の階層に「第一章」「第ニ章」 同じグループの情報を近接させ、別のグループ は距離を置く レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
- 16. 国語 英語 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 2. 整列 情報に視覚的なつながりを持たせる 縦横を えるorずらすことで、情報の並列を 感覚的に理解できる 右 え、左 え レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
- 17. 国語 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 3. 繰り返し デザイン的な特徴（形、色、フォントなど） をつくり、それを繰り返し使用することで 統一感UP&グループ化を分かりやすくできる 「色のついた四角い枠」 レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
- 18. 国語 英語 国語 算数 英語 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 第一章……1枚目 2枚目 3枚目 第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調 4.強調 情報の重要度を考え強弱をつける ・大きくする ・色を変える ・他と違うデザイン要素を入れる
- 19. ❶ レイアウトの話 タクシー Lv54 職業 魔法使い HP100 MP68 能力値 攻撃23 防御10 魔攻45 魔防38 速度32 スキル ファイア ブリザド タクシー 職業 魔法使い Lv 54 攻撃 防御 魔攻 魔防 速度 23 10 45 38 32 スキル ファイア ブリザド 能力値 HP 100/100 MP 68/68
- 24. 色づかいの話 ❷
- 32. ❷ 色づかいの話 RGB HSB
- 39. ベースカラー メインカラー アクセント メインより薄い色 =メインと色相は同じで 彩度を下げた色 最初に決める テーマカラー 鮮やかなのがいい ❷ 色づかいの話 差し色 メインカラーと彩度と明度は 変えず色相をいじるとか
- 41. ❷ 色づかいの話 もう何が何だかわからないという人へ Adobe Color CC 今説明した全てを全部自動でやってくれます。
- 45. ❷ 色づかいの話 いいえ いいえ 通常時 選択時/マウスオーバー時 色を明るくしたり暗くしたりした差分をつくり プレイヤーの操作に合わせて変化させることで、 プレイヤーは「自分の操作がPCに受け付けられた」という フィードバックを得ることができる 色に役割をもたせる(2)
- 47. フォントの話 ❸
- 49. ❸ フォントの話
- 57. Windowsプリイン書体を使ってはいけない（） フリーフォントとか色々ダウンロードしてみましょう ❸ フォントの話 コツ 「ガウプラ」 http://www.graphicartsunit.com/ 「フロップデザイン」 http://www.flopdesign.com/index.php
- 58. ロゴの話 ❹
- 59. ❹ ロゴの話 ゲームの世界観の顔
- 60. ❹ ロゴの話 レイアウトとか配色は理論で結構なんとかなるが… こればかりはセンスがいる ↓ とりあえず、事例をたくさん見るしかない MdN EXTRA Vol.1 マンガ&アニメのグラフィックデザイン MdN EXTRA Vol.2 マンガ&アニメのグラフィックデザイン タイポグラフィ編
- 64. 素材作りの話 ❺
- 67. まとめ！
- 73. おわり！