Page 1

台北科技大學 互動媒體設計系

許皓淳


CONTENTS 目錄 自傳 學經歷

互動設計

展示設計 - 一粒米的山水旅行 掌潮 - 新一代設計比賽

互動教材

雄獅旅遊數位教材 國中英語數位教材

平面設計

個人形象代表插圖 個人logo 個人logo 海洋科學博物館 躍光 logo 海洋科學博物館 螺居 logo

動畫作品

國科會教材製作 教科創意媒介現比賽 臺北e大創e盃數位內容競賽

I 1 3

6 9

11 15 18 19 20 21 22 24 27 29


Photoshop

x

許皓淳 x 1990 .07 .29 Illustrator x Flash x 3D max

-1-

x

Microsoft


-2-


淡江大學教育科技學系

輔仁大學圖書資訊學系

淡水國中

賣 ” 向國際研討會 台灣文創 ” 參與淡江大學文化創意產業

擔任張瓊穗教授國科會研究助理

徵選進入資訊傳播系媒體讀書會

擔任張瓊穗教授國科會研究助理

參與台北市立圖書館服務

獲淡水信用合作社 成績優異獎

校內美術比賽水墨優等

校慶吉祥物 LOGO 設計比賽第二名 新北市 美術比賽水墨佳作

-3-

3上 2下


台北科技大學互動媒體設計系

4下 3下

新一代設計展 特別獎

一粒米的山水旅行 展場設計 第二名

雄獅旅遊集團產學合作

擔任張瓊穗教授國科會研究助理

個人組 第一名

教科系 多-媒體創意製作宣傳競賽 -

擔任顧大維教授國科會研究助理

擔任張瓊穗教授國科會研究助理

-4-


互 設 動 計


一粒米的山水旅行 - 米食生活 Illustrator、SketchUp 團體製作 : 許皓淳 葉庭瑋 嚴堯瀚 負責項目 : 美術編輯、互動遊戲構想

創作目的 以米食生活意象融入展場場景配置, 營造由戶外三合院走入傳統廚房之氛圍, 並與前展區沖積扇平院相呼應 展場順序為:沖積扇平原->稻埕意象->傳統米食生活

創作理念 經過與山水米展場負責人的溝通與協調, 我們希望在展場設計上有多一點與民眾的互動, 因此我們設計了兩個互動遊戲, 並融合米食生活的主題, 讓民眾在參觀同時能更了解米在生活中扮演的重要性。

得獎紀錄 團體組 第二名 -6-


展場設計示意圖

展區配設

展場設計示意圖 -7-


互動遊戲 - 稻糬計時 遊戲說明 :

利用玉兔搗麻糬的概念與節奏遊戲結合。 隨著音樂的節奏搗麻糬,並將擊中時之反回饋以 projection mapping技術投影至玩家腳邊。

互動遊戲 - 即刻救圓 遊戲說明 : 利用篩湯圓的概念與遊戲結合。 遊戲將從螢幕上方隨機出現多種美味及有毒的湯圓, 玩家要避開有毒元素, 若不慎接到毒物移動篩子的速度會自動變慢, 螢幕同時會出現警訊,並提示篩的方法 並透過三軸加速器偵測傾斜角移動遊戲畫面中之竹篩。 -8-


掌潮 Illustrator、Photoshop、3D max、Unity 團體製作 : 許皓淳 劉官霖 謝雅 負責項目 : 美術編輯、互動設計構想

創作目的 來發揚布袋戲中華傳統文化的文化價值, 並結合3D浮空投影與手部偵測, 讓玩家能在視覺和互動上更深刻體驗虛實結合的布袋戲傳統文化。

創作理念 我們以中華文化儒、釋、道精神為中心思想, 希望能將「掌中舞戲偶,臺上現人生」這精神傳達給玩家, 並藉由滅除形成生老死的苦果-「貪、嗔、癡」三大怪物, 讓玩家藉由打敗心魔不斷修練而從中醒悟, 並在戲中找尋自己的人生樣態。

得獎紀錄 新一代 特別獎 台南文化局新人獎 首獎

-9-


2.

1.

3.

4.

5.

- 10 -

1.腳色介紹示意圖 2.腳色介紹示意圖 3.實體作品 4.架構圖 5.實體互動操作


互教 動材


雄獅旅行集團--遊程產品元件介紹數位教材 Flash、Illustrator 團體製作 : 許皓淳 陳姵穎 王瑋婕. 負責項目 : 美術編輯、介面設計、腳本繪製 目前進度 : 四、五、六,三個單元

創作目的 配合學校畢業專題製作,與外界企業合作, 製作數位教材來協助企業導入數位學習, 而我們選擇與雄獅旅遊集團合作, 提供內容完整且正確的旅遊產品元件介紹之數位教材 供員工使用。

創作理念 根據問卷調查得知, 大部分的學習者較喜愛教材呈現方式具有互動性、 遊戲和圖文搭配等的方式,因此我們教材提供高互動性, 整體教材也以可愛圖文包裝,以提高學習者的參予感及反應能力; 並讓學習者能自行安排課程進度, 針對自我不足加以練習,達精熟效果。 - 11 -


- 13 -


- 14 -


The Easter Egg Hunting

Flash、Illustrator 團體製作 : 許皓淳 陳姵穎 王瑋婕 張菀真 蔡盈宜 負責項目 : 美術編輯、介面設計、腳本繪製

創作目的 配合學校互動教材設計與實習課, 製作數位教材來輔助國一學生學習英文, 提供給學生在課後複習時方便取得課程內容資訊, 一改以往紙本學習的乏味方式, 設計出可引發學生學習動機的數位學習教材。

創作理念 我們經過需求分析後發現, 以往的授課方式多為老師單一方面的講述法, 容易使學生感覺乏味。 因此我們透過雙方在課堂上的互動, 和活潑的設計風格來引起學生的學習興趣, 同時也給予鼓勵, 並提供給學生在課後複習時方便取得課程內容訊。 - 15 -


- 16 -


平 設 面 計


2012

驚弓之鳥 . 2012.07

個人形象代表之創作.獨立製作.Illustrator

創作理念 : 我希望我個人形象的圖形可以展現我外在與內在, 我外表的樣子個頭小小的, 卻很熱情喜歡吱吱喳喳講話, 因此鳥很適合作為代表;而這隻鳥是以弓箭組成的, 代表我的內在充滿了力量與奮發向上的心! 在每個階段裡,都希望能射中我心中的 目標! 完成夢想 ! 而這個作品我取為驚弓之鳥, 也代表著我們這一代的心情,以忐忑謹慎的心面對個未來。

- 18 -


恣意。思想

2012.07

個人LOGO設計.獨立製作.Illustrator

創作理念 : 這個logo結合了斑馬與女孩, 女孩代表我自己, 而頭部的斑馬造型代表我天馬行空思想, 像匹馬一樣奔馳, 主要色系也以黑白明確的相反色代表我率性, 而不規則的花紋也代表我浪漫的思想。

- 19 -


Lesley

2012.07

個人LOGO設計.獨立製作.Illustrator

創作理念 : 這個logo是以我的英文名字(Lesley) 結合斑馬為創作主軸, 就像我這一次的主視覺, 我是一隻斑馬, 一隻正在學習的斑馬, 期許有機會經過學習與磨練能變成黑馬, 作品以簡單的筆劃呈現出較為童趣的設計。

- 20 -


躍光.2011.04

海洋科技博物館LOGO徵選.獨立製作.Illustrator

創作理念 我希望 logo 能呈現出海洋為一個孕育生命的地方, 又能結合科技, 因此我設計了燈泡來代表科技, 而裡面有一條跳躍的小魚代表著旺盛的生命, 小魚由海洋科技博物館的簡寫 (NMMST) 所組成, 藉此來結合本博物館的名稱, 此logo的設計呈現出海洋閃爍著生命之光的, 藉此期許人們能共同思索未來人與海洋關係的發展。

- 21 -


C:61 M:53 Y:35 K:9

螺居

2011.04

海洋科技博物館LOGO徵選.獨立製作.Illustrator

創作理念 「螺居」, 象徵著我們渺小又自視聰明的人類, 看似可以掌控一切, 但在浩瀚大自然看來, 依然渺小的如滄海一粟, 依然像隻海螺一樣, 必須依賴著海洋生存,與海洋共生。 我也希望 logo 能將海洋與我們生存環境作連結, 便設計一個輪廓類似台灣的海螺為主題, 透過這個logo設計,希望能詮釋我們與海洋互動關係外, 也希望大家能共同思索未來人與海洋關係的發展, 努力達成與海洋共生,實踐「永續海洋」的願景。

- 22 -


動作 畫品


專案經理初登場.2012.04 張瓊穗老師國科會教材製作.FLASH 團體製作.許皓淳.陳建民 目前進度.尚進行中

創作理念 : 這個作品主要是以動畫故事, 講解專案管理 IPECC 的過程, 我們以數位教材製作公司作為故事背景 因為一般較科系研究所的同學和這領域較相關, 再以故事包裝整個專案管理所會面對的問題, 我們設計故事結果是專案失敗, 因為我們想要學生們看完思索其原因, 最後再以拖曳小測驗讓學生們回顧專案管理的過程, 並給予回饋。

- 24 -


- 25 -


- 26 -


好一個教科鴨.2011.12

教科創意媒介現比賽.獨立製作.FLASH、ILLUSTRATOR

創作理念 這個作品是以雙關法命名, 「好一個教科呀!」與「好一個教科鴨!」, 因為這是一個以鴨子擬人法呈獻的動畫, 鴨子代表我們教科成員, 以童趣的方式呈現教科系的特色, 包括教科系氛圍、 學生特質和介紹教科系主要學習的專業內容是哪些, 讓作品不僅達到宣傳意義,同時也介紹了教科。

得獎紀錄 個人組第一名

- 27 -


- 28 -


“月半”驚魂 .2010.10

第八屆臺北e大創e盃數位內容競賽.FLASH. 團體製作.張郁苹 張菀真 許皓淳

創作理念 : 這個作品名稱的「月半」合起來就是胖, 因為故事就發生在三更半夜, 主角連結我們一些都市人, 運動少、作息不正常又愛亂吃零食, 變成沙發上馬鈴薯而驚嚇不已。 影片也在主角開始慢跑運動時, 背景宣傳台北風光, 最後再健康飲食的部分, 我們以較活潑有趣的復古電動方式呈現, 說明健康食物與壞食物的區別。

- 29 -


- 30 -


許皓淳

HSU HAO CHUN

lesley672@yahoo.com.tw

HAO - CHUN , HSU Portfolio  
HAO - CHUN , HSU Portfolio  
Advertisement