User Interface: 華梵大學電腦繪圖(1) User Interface Design 早上9:00~12:00

課程目標:

了解CIS和使用者介面對企業的重要性，
了解游戲的開發流程和App的製作，

實際以Slot Machine(吃角子老虎機)為例，讓同學親自參與開發製作

Pre-production

production process.
課程目標:

了解CIS和使用者介面對企業的重要性，
了解游戲的開發流程和App的製作，

實際以Slot Machine(吃角子老虎機)為例，讓同學親自參與開發製作

Pre-production

production process.
課程目標:

了解CIS和使用者介面對企業的重要性，
了解游戲的開發流程和App的製作，

實際以Slot Machine(吃角子老虎機)為例，讓同學親自參與開發製作

Pre-production

production process.

課程目標:

了解CIS和使用者介面對企業的重要性，
了解游戲的開發流程和App的製作，

實際以Slot Machine(吃角子老虎機)為例，讓同學親自參與開發製作

Pre-production

production process.

期中過後，任選一項，為期 6到 8周做完一個主題

1.每位同學需要想出一套App的 Prototype 並開始繪製草圖，公司的幸運動物，完成一套App的提案雛形。

2.畫出全身新的設計的 Iron Man

桌布的設定:

解析度: 72 dpi
長寬的設定:

電腦桌面(desktop): 2560x1440
平板(tablet): 2524x2524
手機 (phone):1242x2208

21"screenshot 1920x1080
印刷用為200 或300dpi

每堂的作業存成PNG檔，然後要列出這三項:

Blog 設定:

每個學生上課要做筆記，但不是寫在本子，是用 Google帳號，在你的 email裡面，
你自己的 profile Icon旁邊，有個 9個小方塊的 Icon，點選這個 Icon>Blog>

設立自己的部落格

命名方式:

課名縮寫+你的生日名字. blogspot.tw

DiHuafan=Digital Huafan=數位華梵

0313CLC= 生日+中文翻成英文名字的第一個字母= 0313ChiangChiungLung

                 例如: 王曉明生日五月6日=0506wsm

                    課名+你的生日名字. blogspot.tw

                    DiHuafan0313clc.blogspot.tw

每堂課利用下課時間和空閒時間，

把你上課學到的重點，思考後，整理後，用最短的句子寫下來。
記錄過程
畫好的草圖
收集的重要資料，自己拍的照片
完成的作品放入你的部落格。
有用網站的連結 :例如 ui3d.blogspot.nl digiullustration.blogspot.nl

注意事項:

用你自己了解的方式去寫，因為是給你自己看的。

寫下自己會的，還不會部分不要寫。

自己研究，會的可以寫，不會的部分，不要寫

不是收集一堆別人會的東西，你自己卻不會

可以到網站到處學，到處看，但是你自己的網站，是寫下這門課你學到甚麼，
你自己的心得。有關Photoshop，UI(使用者介面)都可以寫，不要寫不相關的主題。

目的:

記錄過程，忘了步驟，不知道如何下筆畫可以到你自己的網站去找回過去的記憶。

學期成績計算方式: 1 2 3 4=10%+20%+30%+40%

10%=出席率10%=一學期點名3次少一次扣3分(病假不算)
20%=期中考20%
30%=Blog這個分數佔30%
40%=期末作業:

week1: 底圖的制作:/介面設計: 線的畫法1
week2: 介面設計: 線的畫法2

重要名詞: 請翻成中文，並查出意思

Warmups

quick thumbnailing

line drawing

rendering

Light

Form

Colors

Shadow

4steps of painting your artwork:

1.Line, boxes, dash lines

A. How to draw lines?

B. How to draw boxes?

C. How to draw dash lines?

D. How to draw background, render color?

www.cgtextures.com

找出金屬板的材質片，用材質片做成版型

20mins painting lines

20mins painting

20mins painting

https://free.com.tw/freebbble/

https://free.com.tw/100-days-ui/

http://min.us

http://ge.tt/

http://facebook.github.io/origami/tutorials/

https://idmsa.apple.com/IDMSWebAuth/login.html?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=//register/agree/&language=US-EN&baseURL=https://developer.apple.com/&rv=1

Shading= Blending=Rendering

(調和，混色)

Stage1: 到pinterest /其他的網站去收集你認為不錯的底圖背景圖

   在 Pinterest裡面打 eddy3d@gmail.com 或是 eddychiang@gmail.com

   加入老師的 Pinterest. 找出老師收集的 UI 版與 Paper 版，多參考和收集好的作品。

Stage2: 畫出自己的底圖背景(越多越好，最好也有不同材質的)

   畫好的就直接load 到你自己的 Pinterest.(一人做好10張)

Stage3: 設立一個 Board 命名字為 User Interface Class
              把練習好的 Lines , Board, boxes，也放入自己的
             以後每個人自己的作業

練習1:這裡左上角和右下角，有兩個顏色，請畫出中間漸層的色調
   ( Blending practice )

ColorA

ColorB

用paint Brush把 ColorA 和 Color B 中間的色調畫出來

畫完之後再到 Photoshop>濾鏡>模糊>高斯模糊

練習2
這張是我去坐飛機時，在窗戶靠窗時用手機拍的

在Photoshop裡用

> Contrl   +C

>   Contrl   +V

> 複製到解析度72dpi ，長x寬是 2560 x 1440

> 左邊的工具欄，用Stamp，按   Alt   點選你要複製的區域

> 向右蓋章

> 接缝的部分由 Paint brush 吸取旁邊附近的顏色來塗勻

像這樣的漸層當底圖，比較不會有因為放大縮小導致品質下降的情況發生。

混色練習

步驟1: Reference images (參考圖片)
Outline (畫線條外框)

步驟2 Base Colors(上基本底色)

步驟3 Shading，Blending, Ambient Occlusionr簡稱 AO (上層次陰影)
Textures, Pattern

步驟4 Highlight, Reflection，Details( 上高光，反光點，細節紋路)

https://free.com.tw/13-stock-photos-free-for-commercial-use/

https://dribbble.com/

https://niice.co/

http://facebook.github.io/design/

Symbol Design: 像胸章一樣的圖案就是symbols

有等級上的差異，強弱的差異，貴與不貴，普通等級，觀察這些一整套的 symbols,差別在哪?顏色的差異性要一眼就能辦視。不能有所模糊。或是不清楚。

每一個單一個別圖案在設計上的完整度要夠，構圖也要完整，顏色要區隔開來。
簡潔，要清楚明瞭，太多顏色會導致失去焦點。
如果畫面有動作，要考慮前後的動作是否可以銜接一致。不會套tone。

參考下列的symbols, 根據你自己定的題目，重新設計你自己的symbols

High pay 2個
Low pay 2個
Wild 1個
Scatter 1個
AKQJ10 字體設計 (與主題一致)

這些是我在 EA，作 SPORE5這款遊戲，用Maya建出來的symbols

------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------

請排列以下的圖案，請解釋是依據甚麼來分別出來他們的差異?

題目如果是下列幾項:

請用文字寫下第一個直覺會是甚麼?，有可能是動物，植物，也可能是，食物，也有可是一個大家都知道的手勢，知名人物，或是一首歌，請分組討論後，

如何區分其中的不同?

如何排列，如何組合?

，分別上台報告，盡量用Ice world鐘表列圖樣的方式來說明。

~steam Punk

~馬戲團

~ 蔡依林演唱會

~甜點

超大獎:

大獎

中等獎

小獎

week5: 介面設計: 版型設計1

week6: 介面設計: 版型設計2

symbol Design:

week7. 吃角子老虎遊戲機的游戲製作流程與介面設計1

week8 吃角子老虎遊戲機的游戲製作流程與介面設計2

week9 期中考

考題:

OS系統

Window系統:
請參考
華梵大學電腦繪圖(1) 期中考的部分

Google 一下Steam Punk的時代背景，特色，風格，找出有名的例子

week10 APP設計流程

week12 分組找出主提設計App的主題
和找出主題相關的APP，比較其優缺點

week13 APP Prototype制作
Step1: concept按鈕面版草圖(Thumnails)

week14 APP Prototype制作
Step2: concept按鈕面板修改(Thumnails)

week15 APP Prototype制作
Step3: 幸運動物草圖(Thumnails)

week16 APP Prototype制作
Step4:幸運動物精製稿

week17 APP Prototype制作
精製稿

week18 Presentation-APP Prototype制作(Final Exam)