本課程為 YOTTA 學習金挑戰賽,百堂精選課程之一!

快來接受挑戰,拉近你與夢想的距離!到活動頁了解詳情:https://ps.yottau.net/MDEAB 

遊戲產業一直是產值相當高的產業類別,不過載具從以前的大型機台、到家用電視遊樂器、到現在已有 75.5% 的遊戲玩家以「手機/平板遊戲」為主。(資策會 2018 年發佈之調查)

在聲勢與產值都能和傳統 Online Game  比肩的手機遊戲裡,如何創造因應快速遊玩、直覺操作、可中斷等 Mobile 特徵的介面設計已成為好遊戲的標準。

且由於手機遊戲規模不大,有時候甚至一個介面美術就可以扛下整個遊戲的美術製作!


在知名遊戲如『Candy Crush』、『Tsum Tsum』、以及各大博弈類遊戲中,我們也能察覺優秀的遊戲介面所帶來的效果:

易學:好的介面讓玩家不看說明也能直覺操作。

易記:有邏輯的介面讓玩家輕鬆記住所有功能。

有效:優秀的介面甚至能用來調控遊戲難度。


但要知道,想做『遊戲介面設計師』,並不是會畫畫就好!

遊戲介面設計是一個必須兼具繪畫技能及平面設計能力的工作,因此只是會畫圖的人不見得能勝任。且若要真正進入遊戲產業,你還需要具備業界繪圖製作的思維、學習如何讓作品完成度更高、細節處理上更細膩,讓作品從『學生感』升級成『商業版』。


老師整理了以下4大常見問題,看看你遇到了幾個?

無多老師擔任多年遊戲美術指導、具有豐富的 CG 插畫創作、SOHO接案以及電繪教學經驗,也在多間學校、企業單位擔任講師,教學資歷可說是相當豐富!

看更多作品:Wuduo ArtStationFacebook粉絲團


教你成為遊戲介面設計師—談談這堂課的設計初衷

無多老師本身擁有豐富的遊戲美術設計經驗,也具備多種類型、載具與主題的遊戲介面作品,更曾教導多位學生藉由介面設計專業進入遊戲公司任職。

在歸納出一套遊戲介面的設計心法之餘,老師也發現優秀的「介面設計師」在遊戲市場上的稀缺與進修困境,因此才有了線上課程的構想與規劃、希望能幫助更多學生圓夢進入遊戲產業、或幫助欲轉職者順利就職!

學習成果|上完這堂課,你將可以...

❶ 能夠獨力製作遊戲介面並分析市面上遊戲介面的優劣

❷ 理解遊戲業界所需的技能與學習方向,進而準備合格的作品集

❸ 學習到繪圖結合編排技巧以應付各種工作需求

❹ 將學習到的的美術知識真正應用到作品中、全面提升作品質感

購課達 200 人|Unity內建介面工具 UGUI 講解

購課達 300 人|如何利用 Spine 2D 動畫製作動圖

購課達 400 人|Slot Game 老虎機遊戲介面設計 (博弈遊戲產業 know-how)

需準備的工具:

■ 先備知識:使用過 Photoshop 軟體者

■ 軟體設備:需擁有Photoshop CC(2015以上版本為佳)之電腦或筆電。

■ 硬體設備:數位繪圖板

如果我不會繪圖,我可以來上課嗎?

這堂課程第二部分的圖層樣式編排,就是讓完全沒有繪圖技能的同學可以透過圖層安排製作出一定品質的物件作品。從第三部分開始,會進入需要一些繪圖技能的章節。如果你完全沒有電繪技能,會建議在課前稍微自我練習、再跟著課程學習會比較好喔!

如果我不熟悉 Photoshop的功能操作,我可以來上課嗎?

可以,這堂課程的設計,目的即是帶你熟悉使用 PS 的功能,並結合電繪技巧製作出符合業界需求水準的遊戲介面!

為什麼選用 Photoshop 進行教學呢?

遊戲業普遍是使用PS軟體進行畫面繪製,公司大多不願意配合個人採購新的軟體。

遊戲畫面中2D電繪、3D繪製物件多。而遊戲介面設計需要配合遊戲的風格進行設計與製作,協作上,PS是比具有效率的選擇。PS 在製作動態效果或是比較複雜細緻的物件時,還是比較能夠應付整個製作需求的。

早鳥折價活動|折價券先搶、先用、先贏 (活動已結束)

〔1〕參加貼文活動到這裡► http://bit.ly/2U5Wogj

〔2〕回應貼文後小編會私訊您折價券

〔3〕於以下折價活動時間內,使用折價券完成購買即可享折扣價格

前 70 名購課 | 折300元(已兌換完畢)

71-200名購課|折200元(只到02/05)   

註:進入結帳頁面➜輸入序號➜按下「使用」,才是真正使用到折價券喔!

你還可以在無多老師的粉絲團參加貼文活動
領取多份 Photoshop圖層樣式 素材

Week 1:如果想踏入遊戲設計領域我可能會遇到什麼問題呢?▶︎ 貼文連結

Week 2:不會畫圖?你也能用Photoshop做出精緻相機 icon!▶︎ 貼文連結

Week 3:要應徵做遊戲美術設計,要準備什麼樣的作品集?▶︎ 貼文連結

Week 4:繪圖+圖層樣式,用 Photoshop 做出精緻遊戲物件▶︎ 貼文連結

Q1.上課前,需要準備什麼工具與先備知識呢?

1.Photoshop CS6 以上版本 ( CC2015以上為佳)

2.繪圖版

3.最好能有基礎的繪圖技能

Q2.募資預購時間到什麼時候? 

此課程預購期已結束,課程已經上線囉!
Q3.這門課什麼時候開始上課?
若募資成功後,我們預計將分兩階段上架課程! 

第一批上架:2019/04/18(四)

第二批上架:2019/06/03(一)

實際開課日若有調整,將會在「課程公告區」提醒大家!

Q4.這門課可以看多久? 

開課後,即可使用電腦、手機及平板登入上線上課,不用受到上課時間及地點的限制,皆可無限次數重複觀看課程內容。

Q5.可以問老師問題嗎?

當然!歡迎到「購課問答」詢問 ; 當學習遇到問題時,也歡迎到「課程討論區」與老師同學一同互動。

Q6.我要如何購買課程呢?

非常的簡單!點擊「立即購買」的字樣,就可以成為本堂線上課程的其中一位學員!

Q7.目前有哪些付款方式呢?

YOTTA 目前提供線上刷卡、ATM 轉帳及超商付款三種付款方式。

Q8.為什麼我已經付款了,訂單狀態仍顯示未付款?

金流處理時間需等候5-15分鐘,待金流完成入帳後,系統中訂單狀態將會從「未付款」轉變顯示為「已付款」。

Q9.請問什麼時候會收到發票?

購買課程完成繳費後,電子發票會在收到銀行端入帳通知後三天內開立,並透過您註冊的 E-mail 寄送給您。

Q10.我還有其他問題!

歡迎至 常見問題 FAQ 頁面看看,或是透過 聯絡我們 與我們聯繫!

單元

48

課程總長

728分鐘

課堂測驗

尚無測驗

  • 一、介面設計流程解析
  • 1 1-1 一般介面設計流程與遊戲業差異 試看 10:37
  • 2 1-2 遊戲介面需要的能力 試看 06:47
  • 3 1-3 平面設計基礎:完形心理學 試看 09:03
  • 4 1-4 光影基礎觀念 試看 07:00
  • 5 1-5 顏色基礎觀念 試看 12:12
  • 二、學用 Photoshop 圖層樣式製作 icon 與物件
  • 6 2-1 Photoshop 設置與管理 試看 22:24
  • 7 2-2 圖層參數解析與操作 試看 18:28
  • 8 2-3 圖層參數解析1:斜角與浮雕 試看 21:12
  • 9 2-4 圖層參數解析2:筆畫 試看 14:04
  • 10 2-5 圖層參數解析3:內陰影與陰影 試看 08:30
  • 11 2-6 圖層參數解析4:內光暈與外光暈 試看 06:28
  • 12 2-7 圖層參數解析5:緞面 試看 05:51
  • 13 2-8 圖層參數解析6:顏色覆蓋與漸層覆蓋 試看 16:10
  • 14 2-9 圖層參數解析7:圖樣覆蓋 試看 04:43
  • 15 2-10 擬真Icon實作 試看 75:04
  • 三、遊戲介面設計實作示範—安排佈局與輸出
  • 16 3-1介面設計前置作業 試看 07:00
  • 17 3-2配色要訣 試看 15:56
  • 18 3-3 整體氣氛打光 試看 10:55
  • 19 3-4 切割空間與造型 試看 13:04
  • 20 3-5 按鈕製作 試看 16:36
  • 21 3-6 反光細節與造型點綴 試看 17:43
  • 22 3-7 最後潤飾提升完稿度 試看 21:47
  • 四、icon&物件設計與繪製
  • 23 4-1 Icon繪製基本觀念與輔助功能 試看 13:52
  • 24 4-2 草圖設計繪製 試看 09:41
  • 25 4-3 基礎色彩填色 試看 08:08
  • 26 4-4 光影與立體感 試看 11:52
  • 27 4-5 材質表現 試看 10:58
  • 28 4-6 寶石與特效繪製技巧 試看 19:37
  • 29 4-7 點圖技巧 試看 16:14
  • 30 4-8 圖層樣式與繪圖綜合應用 試看 68:55
  • 五、中英文標題字設計
  • 31 5-1 LOGO設計要點 試看 07:22
  • 32 5-2 英文LOGO字型設計 試看 11:13
  • 33 5-3 常用文字效果 試看 11:05
  • 34 5-4 中文書法字應用 試看 10:13
  • 35 5-5 點綴與裝飾 試看 09:12
  • 六、製作動態效果
  • 36 6-1 Key Frame動畫簡介 試看 11:08
  • 37 6-2 常用動畫特效 試看 12:25
  • 38 6-3 最終檔案輸出 試看 16:07
  • 200 人|Unity內建介面工具UGUI講解
  • 39 解鎖1-1 Unity UGUI簡介 試看 06:53
  • 40 解鎖1-2 9-Slicing九宮格視窗 試看 10:00
  • 41 解鎖1-3 按鈕狀態效果製作 試看 11:05
  • 42 解鎖1-4 勾選方塊與計量條 試看 10:10
  • 300 人|如何利用 Spine 2D 動畫製作動圖
  • 43 解鎖2-1 Spine 2D動畫簡介與前置作業 試看 05:46
  • 44 解鎖2-2 基本動畫骨架綁定 試看 35:11
  • 45 解鎖2-3 利用MESH製作假3D效果與控制 試看 23:55
  • 400 人|Slot Game 老虎機遊戲介面設計 (博弈遊戲產業 know-how)
  • 46 解鎖3-1 博奕遊戲產業簡介 試看 06:45
  • 47 解鎖3-2 Slot Game老虎機簡介 試看 15:27
  • 48 解鎖3-3 Slot Game老虎機設計要點 試看 12:56

開始分享你的學習成果吧!

這裡是專屬於課堂學員及老師可以互動的作業區,學員們可以透過實際操作來複習課程中所學習到的內容,作業完成後只要簡單上傳到平台裡,就能得到更多老師的指點唷!同時,在這裡也可以觀摩其他學員的成果,一起來互相切磋吧!

<%if list.length == 0 %>

尚無作業

老師還沒有出作業唷!

<%else%> <%props list%>

作業<%>~numToZH(~toInt(key) + 1)%>

<%if prop.type == 'image' %> 圖片檔 <%else prop.type == 'pdf' %> PDF <%else prop.type == 'youtube' %> Youtube 影片連結 <%else prop.type == 'ppt' %> PowerPoint <%else prop.type == 'sound' %> 錄音檔 <%/if %>

<%:prop.title%>

<%/props%> <%/if%>

作業觀摩

目前還沒有任何學員上傳作業喔!來當第一個吧~

<%props data%>

<%if prop.type == 'image' %> <%else prop.type == 'pdf' %> <%else prop.type == 'youtube' %> <%else prop.type == 'ppt' %> <%else prop.type == 'sound' %> <%/if %> 作業<%>~numToZH(~toInt(key) + 1)%> <%:prop.title%>

<%:~loadTmpl('homework-card', prop.rows)%>
<%/props%>
<%props data%>
<%if prop.type == 'image'%> <%if prop.cover %>
<%:~isGif(prop.cover)%>
<%else%>
<%/if%> <%else prop.type == 'pdf' %>
<%else prop.type == 'youtube' %>
<%else prop.type == 'ppt' %>
<%else prop.type == 'sound' %>
<%/if%>
<%if prop.visible == 1 %> <%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor == true %> 刪除 編輯 <%/if %>

<%:prop.comment_count%>

<%/props%>

錄音 <%:~numToZH(sort + 1)%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧!

這裡是專屬課程的公告區,老師將在此發佈與課程相關的重要資訊,您可以在此看到所有與課程有關的最新公告。

尚無公告

老師還沒有發佈公告唷!

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%if ~root.isStudent === false && ~root.isTeacher === false && prop.permission === 'private' %>

本篇公告僅限購課學員閱讀,若您已購買本堂課程,請先以購課帳號登入!

<%else%> <%:prop.content%> <%/if%>
<%/props%>

回頂端