2010年10月24日 星期日

Chuk-Portfolio_美術設計過程A

Chuk-Portfolio網站作這麼久
主要製作時間可以分3個部分
1.美術設計
2.作品排版與整理
3.FLASH 互動串連

先來講講1.美術設計部分
由於本身創作的領域在於3D軟體
故網站想做的跟3D軟體有關

其中想到視窗的運作是3D的一項特點
於是鎖定將網頁分為四個部分

USER視窗:首頁與新訊息
X視窗:個資與連絡方式
Y視窗:相關連結
Z視窗:個人創作與專案製作

操作3D時最常使用USER視窗
故以其作為首頁
USER視窗以45度角呈現

下為設計過程

首頁090907-1

開始走中國大紅色調
給他前面掛兩盞燈籠

首頁090908-5

設計期間正值中秋節 所以想說給它個月亮吧

首頁090911-1

大紅色有點悶住 改個綠色看看

首頁090916-1

構想的差不多
進入3D製作元件
再去2D作處理
月亮也給雲紋遮住 讓它有暈光就好

首頁090919-1

排版看起來還是有問題
經過小妞修改後
少了拘限住的感覺
看起來好多了

首頁091004-1

座標箭頭起初是連結按鈕 給它很大讓用者方便使用
但後來演變成畫面上方已經有連結按鈕
座標箭頭的使用性就降低了
故為了畫面美觀
進行精簡修改

首頁100928

換上新的LOGO
最後配合x.y.z 將面板容縮成三選項


以上是首頁的設計過程

2010年10月12日 星期二

黑猴 Black Monkey_2001駭客入侵

完成黑猴作品回頭檢視
才意會到高職的畢業製作
也是以病毒為發想主題 真是鬼擋牆~
藉此回億一下往事



2001駭客入侵是復興時期的團體畢業專題製作
講述千禧年過後的一年 病毒大舉入侵
為了避免世界崩壞
科學家們決定改造最原始最強大的 亞當&夏娃病毒
來對抗千禧病毒 一場新舊病毒的大戰就此展開

這專題本人負責的是故事構想 腳本繪製 角色設定與最後的剪輯配音
動畫部分也有參與2小段
就是一開始大魔王出現(01:40~02:07)與中段博士決定改造亞當&夏娃的部分(03:15~04:40)
那時我的電腦太遜 只能趁同學沒在用電腦的空檔 來借同學的來用

這專題是下半學期改組 花了半年從發想到製作完成(動畫沒完成)
雖然沒有得到好成績
但現在想想以當時的技術與資源 能做到這樣同學們真的蠻屌的
無論如何 這次主要要說的是 我不要再做病毒相關的主題啦!!

2010年10月4日 星期一

黑猴 Black Monkey_製作說明H

黑猴還沒結束,來個總結

(一)黑猴的誕生
故事以瀏覽色情網站導致電腦中毒,為故事引發點(圖1)。滑鼠點擊觸發黑猴於色情圖片中誕生(圖2)。類似《西遊記》中,受天地育養的石猴從石頭蹦中的情節。同時影射電腦病毒如七十二變的孫悟空一樣,化身隱藏於網路、檔案格式之中。

F1
圖1 瀏覽色情網站倒置中毒

F2
圖2 黑猴誕生



(二)遊標犬的逆襲
黑猴登場後,受遊標犬的干擾而開始大肆破壞(圖3)。類似《西遊記》中孫悟空剛誕生時,無故被天庭視為妖物而加以收伏,最後卻反被孫悟空鬧得雞犬不寧。後來黑猴不甚觸碰到(上一頁)按鈕,場景出現早先瀏覽過的網頁,遊標犬趁機偷襲黑猴(圖4),將黑猴丟到回收筒。

F3
圖3 黑猴受遊標犬的干擾

F4
圖4 遊標犬趁機偷襲黑猴



(三)黑猴的進化
  將黑猴送到回收筒的情節(圖5),似《西遊記》中,孫悟空被太上老君收伏於八卦爐中,而孫悟空非但沒被煉化,反而煉成了一對火眼金睛。黑猴亦同如此,沒被刪除反而更升級強化了威力(圖6)。而黑猴被戳傷的左眼,也因此增加了使物體「緩慢」的能力,呼應了「孫悟空」的「火眼金睛」。「緩慢」的能力也呼應當使用者電腦中毒時,會出現LAGER使電腦出現遲鈍的現象。

F5
圖5 黑猴送到回收筒

F6
圖6 黑猴復仇後的勝利姿態



(四)紅佛降臨
紅佛的出現代表電腦掃毒系統偵測到電腦病毒—黑猴(圖7)。隱喻《西遊記》中孫悟空大鬧天宮的橋段,故事最後由「如來佛祖」出面制止的情節:「孫悟空拔一撮毛用力一吹,幻化出成千上萬的猴子猴孫(圖8)。」在此創作中,以挖鼻屎來詮釋原本的拔毛動作,而幻化出的小猴則隱喻電腦病毒,具有「複製」、「擴散」的特性。黑猴敵不過紅佛,經由瀏覽器的「首頁」作為逃串出口(圖9)。而一般使用瀏覽器時按下首頁,頁面會跳回初開啟瀏覽器的網頁,以此功能作為場景切換的安排。同時與《西遊記》的情節相同:「孫悟空與如來佛祖打賭,一躍十萬八千里就能脫離如來佛祖手掌心。」

F7
圖7 紅佛偵測到黑猴的存在

F8
圖8「孫悟空」拔一撮毛用力一吹,幻化出成千上萬的猴子猴孫

F9
圖9 黑猴被小傘追殺


(五)黑猴降服
  黑猴逃到新的網頁,以為逃離了紅佛的掌控範圍,將如意棒變為巨大印章於石柱上蓋下「到此一遊」的模式(圖10) ,卻是紅佛的勢力範圍。與《西遊記》裡孫悟空在如來佛祖的手指上灑拋尿,寫下「到此一遊」的情節一樣,無法逃出如來佛祖的手掌心。最後黑猴被紅佛收伏於晶格中,放入「WINDOWS XP」的系統關機欄中的「關機」鈕。

代表著孫悟空被如來佛祖壓制於五指山下。而系統關機欄中除了「關機」鈕外,左右兩邊的「登出」與「重新開機」鈕,分別是「豬八戒」與「沙悟淨」(圖11),表示這兩隻小妖之前也肆虐過,同樣被收拾於系統關機欄中。最終由游標犬壓扁變為晶格的黑猴,呼應動畫開始時由游標犬作開端。同時也代表著滑鼠按下電腦關機的動作,為動畫的結尾。

F10
圖10 黑猴於石柱上蓋下「到此一遊」

F11
圖11 黑猴被紅佛收伏於晶格中,放入「WINDOWS XP」的系統關機欄中的「關機」鈕


最後在貼上動畫連結參考一下

Black Monkey from jomanwing on Vimeo.

2010年9月28日 星期二

Chuk-Portfolio 全面公測!!

Chuk-Portfolio

本人的作品網站終於做好了
從去年斷斷續續做到現在
趁年齡還是2開頭的時候
趕緊上市紀念一下

Chuk-Portfolio

有甚麼問題與建議麻煩留言跟我說一下

2010年9月26日 星期日

黑猴 Black Monkey_製作說明G

故事確定後 進行腳本繪製

cut001

cut002

cut003

cut004

cut005

cut006

cut007

cut008

cut009

cut010

cut011

cut012

cut013

cut014

cut015

cut016

cut017

再來就是依照腳本來進行鏡頭測試



將各個鏡頭串起來後
頓時覺得這次創作失敗了
自己都看得不耐煩
於是請教他人意見後
大體歸納出以下幾點問題

A.鏡頭的風格平順了點
不活潑 不動感 跟人物風格不是很搭
鏡頭太順太平 會覺得長很悶

B.鏡頭也少了點透視
例如那個很多雨傘的鏡頭
可以更有透視一點
讓他更狀觀點(小雨傘出現的時候)

C.可以多用些不同的角度
來說故事 不一定一定都照到人來交代

D.鏡頭剪碎一點
很短CUT跳來跳去
節奏看起來會比較快

接著就是針對以上建議做的修改



是比之前好多了 不過進步空間還很大 下次再接再厲~

2010年9月23日 星期四

黑猴 Black Monkey_製作說明F

場景設定


這是故事的最後場景
設定為掃毒程式紅佛的官方網站
以中央的擎天柱為主 象徵「如來佛祖」的手指
場景以紅佛的紅色與綠色為主
再搭配中國紋路做裝飾

聖地完稿

故事中黑猴敵不過紅佛
經由瀏覽器的「首頁」作為逃串出口
在此隱喻《西遊記》中「孫悟空」與「如來佛祖」打賭
一躍十萬八千里就能脫離如來佛祖手掌心的情節
一般使用瀏覽器時按下首頁
頁面會跳回初開啟瀏覽器的網頁
以此功能作為場景切換的安排

黑猴逃到新的網頁以為逃離了紅佛的掌控範圍
將如意棒變為巨大印章於擎天柱上蓋下「到此一遊」
隱喻《西遊記》裡「孫悟空」在「如來佛祖」的手指上灑拋尿
寫下「到此一遊」的情節一樣
最終無法逃出如來佛祖的手掌心
而黑猴最終被紅佛收伏


其他未用到的設定

未用圖示A

原本故事沒局限在網頁上
而是在整個電腦桌面中進行
所以最初有設計一些常用的電腦圖示
再以中國風格作裝飾
但最終精簡之下
只有資源回收筒有派上用場

未用圖示B

我的電腦 裡面是自己的東西
所以連想到的是銅鏡和盒子 像自己的化妝台一樣

網路上的芳鄰 是連結到其他電腦
所以連想到太極圖 有陰陽連結的意味

回收桶自然以古代筒子代替

網路瀏覽器 網路對我來說 就是找尋資料的地方
所以連想到的是羅盤 有指引的功能

電子信箱是當初設計比較滿意的
信件就會想到飛鴿傳書
但這裡不是用具象的鳥 而是用文字下方抓著信件代替

msn想說直接給他上國劇臉譜就好
而常用的max圖示本來就是兩條蛇
本來想說直接讓巨大的蛇在畫面上遊走
但好像太具象了點~


以上就是所有設定 報告完畢

2010年9月20日 星期一

黑猴 Black Monkey_製作說明E

場景設定

參考資料:

天宮資料

由於故事發生在網路事件上
本來想直接拿GOOGLE瀏覽器作為場景
如此就不用另外花時間去想場景設計與花時間製作(一開始一切的出發點都只想交差了事)
但後來想想這樣就太沒意思了
都要花時間作 還是花點心思吧(部分是為了增加論文字數)

以「GOOGLE」瀏覽器立體化作為發想點
另外故事軸向取至《西遊記-大鬧天宮》
故將中國建築元素融入其中
另外增添中國傳統仙宮的意境
達到古代融合現代
現實融合虛擬的風格
呈現出嶄新的「天宮」

天宮初稿:

天宮初稿

大體保留GOOGLE原有編排架構
試圖先立體化 再沿用中國元素進行佈置

保留頁面白頁作為活動範圍
框架底端以城樓形式呈現

將網頁搜索欄與瀏覽器功能欄
除立體化外 更脫離原有架構 以懸空的方式呈現

「首頁」按鈕在瀏覽器上是最顯而易見同時最具象的物件
故保留其原有[房屋]的樣貌
加入中國式建築元素加以重新詮釋
另外為了方便辨識 擔心無法與「首頁」進行聯想
故在大門上寫有「首頁」二字
同時沿用中國文字的視覺概念

另外[上一頁][下一頁]也是上網時經常使用到的按鈕
在故事中 黑猴不甚觸碰到「上一頁」按鈕 而使感染病毒前所搜索到的圖片一一現形
故為了方便「上一頁」按鈕與黑猴作互動
「上一頁」「下一頁」以玻璃球型 懸浮方式呈現
另外瀏覽器中關閉、放大、縮小鍵也以懸空方式呈現
加上頁框外的雲朵均增加仙宮意境的感覺

天宮定稿:

天宮完稿
將「GOOGLE」的mark與超連結立體化後以懸空方式配置
豐富場景空間感
懸空配置避免阻礙故事中 黑猴與紅佛在地面上的互動
同時當黑猴逃串時 可以運用懸空的物件 作更精彩的表演

另外將「重新整理」與「搜索」按鈕加入動態
使整個場景更有生命力

將「GOOGLE」改為「Gooddog」
除了諧音上有所類似外
目前全球有多數使用者 是透過「GOOGLE」來找尋所需的資訊
故gooddog也有好幫手的意味 不是貶低的意思

色彩以白色佔大區域 使空間放大 同時保有仙宮的意境
以中國式建築常用的色彩、黑色與紅色為建築主色
金黃色的中國金飾與紋路 使整體視覺更為精緻

3D天宮:

天宮3D

大致上跟設定沒有太大出入

在兩旁加入樹木 增添仙宮意境與重量感
另外葉片部分以方塊代替增添數位感

設定上的雲朵 考量算圖時間
故加以排除

天宮3D-雲朵測試

以上就是天宮的來由

2010年9月13日 星期一

黑猴 Black Monkey_製作說明D

角色設定-游標犬

初稿:

游標犬草圖

游標犬以《西遊記》的「嘯天犬」為依據
《西遊記》故事中「嘯天犬」與「孫悟空」曾對戰過
而在動畫中游標犬擔任黑猴初登場時
電腦系統世界的看門狗(在動畫中有叫兩聲相信很多人沒發現~)

游標犬定稿:

游標犬定稿

游標犬外型保有滑鼠游標外觀
「嘯天犬」的個性以表演傳達
嘗試加入少許中國元素
讓游標呈現不同以往的風格

最初以弓箭的箭頭代替原有的滑鼠指標造型
再加入犬類尾巴象徵「嘯天犬」
但太過突兀與直接
改而在箭頭邊角處
加入中國常見的紋路來裝飾
將尾巴改以段落式的形式象徵尾巴
同時也增加了現代與流線感

色彩保有滑鼠游標原有色-白色
白色也代表著無垢、寧靜與忠誠
犬類一向都有忠誠的習性
故白色沿用於游標犬上十分吻合

3D游標犬:

游標犬3D

故事中游標犬不是重要角色
主要是為了讓電腦系統世界不會太冷清
另一個主要功能是
故事開頭由黑猴攻擊游標犬做開場
最終也以游標犬給黑猴補上最後一腳結束
作為故事的前後呼應

以上就是游標犬這角色的來由


角色設定-小傘

小傘定稿:

小傘完稿

小傘是紅佛為了對抗眾多小猴
update病毒碼而衍生的...角色吧
(其實最初小傘對抗小猴是為了拉長動畫時間而延伸出來的
因為規定要做超過三分鐘 )

為了豐富小傘的攻擊模式
將小傘以各種武器形式出現
有參考許多武器資料
但可惜無法跳脫刀、劍、槍等既定的形式
降低了可看性與想像力
現在回頭想做個九節鞭之類的好像會豐富點~

3D小傘:

小傘3D

武器種類實在太少了~

以上就是小傘這角色的來由



隱藏角色-重新整理魚

由於最初的故事不是描述電腦中毒
而是由於上網找圖片資料
常有圖片下載不完全而只顯示一半
這時會按[重新整理]以圖圖片的完整
而不耐煩的人會一直按一直按
圖片中的黑猴就是因為這動作被惹惱而現身
所以動畫中黑猴現身時 才會攻擊它
但後來故事改為電腦中毒 就刪除了這一部分
而還保留這角色也是為了讓電腦系統世界不會太冷清

重新整理魚

為什麼[重新整理]是魚
因為當初想要如何辨認它是[重新整理]這按鈕
單靠原來圖示辨識度似乎不足也沒有特色
所以將[重新整理]設定成魚
它在跳水時會濺起[重新整理]字樣的漣漪來做辨識
不過在動畫中沒說看不出來吧~


以上就是動畫中的所有角色~

2010年9月9日 星期四

黑猴 Black Monkey_製作說明C

角色設定-小猴

參考資料:

小猴資料

小猴參照《西遊記》中「孫悟空」分身為依據
《西遊記》故事中「孫悟空」拔下身上一束毛髮
一吹使的毛髮幻化為成千上萬的小猴子
此[複製]的能力與病毒特性相吻合

小猴於動畫中屬於串場使動畫增添趣味的角色
故除同樣具有黑猴的破壞性外
更需要帶有可愛的元素
體型以可愛頑皮為基調的「豆腐人」造型
以方塊為整個頭部
符合港式公仔風格
頭大身小的可愛比例均合乎小猴的調性
適度的加上邪惡元素
使小猴達到可愛頑皮的造型感

初稿:

小猴初稿

大體依據「豆腐人」的體型作發想
方塊的頭型與身體一體成型
加入猴子的大耳朵特徵
與捲曲的短尾巴增添小猴討喜程度
不一昧的以圓弧曲線來詮釋可愛造型
以方塊簡潔線條同樣可以達到可愛效果。

小猴定稿:

小猴完稿

以怒眉與鋸齒狀的嘴巴
傳達小猴身為病毒的侵略與破壞性
臉上與黑猴相同的圖紋做為共同特徵
使其與黑猴的相關性明顯

由於動畫中有眾多小猴出現
身上加上數字以作為區隔
小猴背面與運動員服飾一般
正面與背面的文字會有所不同
正面為一般中文數字
背面則為大寫的中文數字
達到中國風格的視覺要素

色彩保有黑猴原有色性
以黑色為主體色
同樣象徵侵略與破壞的化身。


3D小猴:

小猴3D

與設定沒有太大的出路
把正面改為大寫中文數字
背面則改為一般的中文數字
原因是正面有五官會搶掉一般的中文數字
改用大寫的中文數字會達到平衡效果~


以上就是小猴這角色的來由