2010年12月12日 星期日

Chuk-Portfolio_作品編排過程A

現在來說說 佔據製作時間3分之一的作品部分
除了整理作品外
編排也花了不少時間

作品_101212A

首先依照一般的編排法
總覺得背景空空的不是很舒服
所以在背景加點東西

作品_101212B

背景加入角色的背面作搭配
還是覺得不是很完整
於是開始找有關構圖的資料
其中用了三分構圖法與拜占庭構圖法試試

作品_101212D
三分法

作品_101212C
拜占庭構圖法

利用角色的姿勢來配合構圖法
覺得比較喜歡拜占庭的
於是將所有腳色都依此構圖法為原則
進行擺姿勢與輸出

等角色輸出都用得差不多了
才覺得這樣作品會太多了
點一次才看的到一件作品
連自己都懶得看完
更何況別人
於是想說一次能看到一系列的話會省事不少

作品_101212E

將一系列擺在一起似乎還蠻有氣勢的
但由於作品依彈跳視窗的方式呈現的話
無法擺脫會有個邊框的問題 所以不予採用

最後改用在網頁面板上直接呈現不跳出視窗
最大畫面只能以1024 X 580
跟網頁面板一樣大而已
所以要進行刪減
要選擇刪除對象 又是另一件心理上的挑戰

作品_101212F

這是最後依1024 X 580 來編排的
腳色排排站的看起來是還OK
但是有些作品是以直立的方式呈現的
如 毛冉的示意圖 就只能硬塞了

2010年12月5日 星期日

獵命師-毛冉 製作過程010_ 拓撲topology

接下來是進行拓撲(topology)
這裡選擇用max2010內建功能來使用
拓撲用到的功能大概就幾項
這裡簡單筆記一下相關的功能

101205A

起初也有想過為何不用一開始進去zbrush細雕的初模
但想說教學都是這樣教 應該不會沒有它的道理
況且自己也沒作過 第一支試試無妨

101205B

左邊是進去zbrush細雕的初模
右邊是重新拓撲的模型 自己作沒有面數限制 大約用了1萬面
心得為還是拓撲一次的好
因為一開始的初模已經跟zbrush細雕後的高模
有頗大的出入 比如肌肉的隆起或圓弧大的不足
且重新拓撲一隻也沒多久 紀錄是16個小時(好像也不少時間)

反正就是這樣

2010年11月27日 星期六

Chuk-Portfolio_美術設計過程E

美術設計過程最後講到動態LOGO



網站大概有個雛形後 就預想了一段
以點.線.面 為出發點來生成LOGO
但後來發現點.線.面的構成似乎不少人用
所以網站做得差不多後 決定再想新的動態LOGO



這次以三條線段交錯
形成logo中心的三角形播放鍵
再進而延伸出整個logo
但完成後總覺得有種拖拖拉拉的感覺

Chuk-logo from jomanwing on Vimeo.



於是再去觀察廣告中的logo
發現像汽車廣告 最後的logo
幾乎都是一道光閃一下
簡簡單單的帶過又不失質感
最後我也決定簡單的交代就好

就是這樣

2010年11月19日 星期五

獵命師-毛冉 製作過程009_ZBRUSH 減面

網站的文章還沒寫完 只是穿插點別的文章比較不會無聊
之前說過網站做好後 來繼續進行毛冉的製作
不過先不從士兵的高模進行(見前文)
而是進行毛冉的拓撲

據阿男說zbrush的拓撲不好用
故打算到max去進行拓撲
所以第一步 就是將zbrush製作的模型輸出到max去
但直接輸出的面數會太大 依我目前的電腦情形
可能還沒製作完 電腦就跟地板親熱去了吧

所以使用加欣推薦的zbrush plusin--Decimation Master 來進行減面
這plusin可以直接到zbrush官網去下載

101120A

裝好Decimation Master後
到zbrush來進行減面的動作
目前的面數是350多萬面

101120B

我們到Zpluins\Decimation Master欄
先按 2-Pre-process Current 作計算(這步驟我的電腦就跑不動了 只好換台電腦跑)
再來到 3-Decimate 將預設的20% 往下調 調到10%左右(可以自己測試看看)
最後就按下 Decimate Current

101120C

最後面數減到了70幾萬

101120D

接著就可以輸出到max去進行拓撲了

以上是zbrush減面功能

2010年11月13日 星期六

Chuk-Portfolio_美術設計過程D

其他子頁沒有太大不同
只有作品欄更動較大



原本是以跑馬燈的方式 偵側滑鼠的位置作移動
但當我lpading外部連結時 作品雖然蓋過了作品欄
而且我自己要找特定作品 還得移動滑鼠慢慢的等它出現
基於以上幾點而更改了方式



後來改為比較傳統的排排站方式 比較沒有操作上的問題
但不是很喜歡 之後有機會會給他再修改~

就這樣

2010年11月6日 星期六

Chuk-Portfolio_美術設計過程C

各主要頁面都設計好後
接著是設計頁面與頁面間的過場動畫連結
原本是想像3d操作視窗那樣 各視窗與視窗的轉動過程 就拿來當過場動畫
這樣四個主視窗 USER-FRONT
USER-TOP
USER-LEFT
FRONT-TOP
FRONT-LEFT
TOP-LEFT
要做六段不同的動畫 由於擔心網站太大會跑不動而作罷



為了要節省容量 改用六張不同角度的視窗圖片
將圖片水平.垂直鏡射與互相交疊讓他看來不只有六張重複循環 來作為過場動畫

至於為何沒用 我記得是考量到面板擺設問題
比如個頁面的雲紋位置不同 FORNT-過場動畫-TOP 雲紋會有突然出現的問題
但現在看來好像也還好~~



最後是改用光與光之間來做過場動畫 將座標箭頭作為頁面的開關 光進入座標箭頭
會開啟頁面的運作 讓座標箭頭多點戲份 也讓整個連結有點始末
但是到頭來 我還是用了六段不同的動畫 甚麼也沒省到~


其實沒有很滿意用光的流動作過場 只對於座標箭頭作為開關比較喜歡
之後資料片改版 會考慮改用視窗交疊加上座標箭頭作為開關來設計

順帶一提 上次忘了說明 x.y.z頁面剛進入時 光的顏色
分別是 紅.綠.藍 這是呼應 座標箭頭上的顏色作為發想


就這樣


以上是過場動畫的設計過程

2010年11月1日 星期一

Chuk-Portfolio_美術設計過程B

內頁的設計概念
原本只是模擬3D的Front.left.Top 三個視窗
再搭配網格作不同的變化來設計動畫
後來想到3D是以點.線.面作組成
所以演變成內頁進場動畫以這三項來設計



z:

Z090908-2

作品網站作品是重點 而3D的特性是多了個Z軸 於是將以3D類為主的作品配置於Z-Top視角
考慮美觀 視角不是完全正的Top視角 而是以Top視角為主並帶有角度來詮釋

Z090911-4

將大紅色改成綠色 按下作品按鈕選項後會出現作品性質的細項按鈕

Z090919-2

視角不是很憂 換個角度再進行正式繪製

Z090919-3

按下作品按鈕 彈出細項按鈕的效果

Z090927-3

進場動畫設記得重新分配 將最基本個資放在象徵x的[點] 以連結象徵y的[線] z自然就是放的頁[面]
所以作品頁 改以面的方式呈現

Z090927-4

按下作品按鈕後細項按鈕出現的畫面

Z_101031

z的完成圖 最後覺得分創作作品與專案的作品分開 會有太多步驟 所以合併了起來 在作品內註明就好
另外按下大項在出現細項 才能點到要看的 也是步驟太多 所以改成一起出現



z的進場動畫



y:

Y_090908-8

y的視角是以Left視角為主來詮釋
一開始的z由網格擠壓出柱體 y則是由網格複製出面出來

Y_090911-7

換上綠色調 將link與細項間加上線段 才不會看起來沒有關連

Y_090926-1

決定改以[線]來詮釋y軸的進場動畫

Y_101031

y的完成圖 細項線的粗細與LINK一樣 會分不出主從 畫面也太擠 所以將細項的線改細



y的進場動畫 其實相較之下 y的進場動畫最普通 但我最滿意link線段的閃光效果



x:

X090910-7

x的視角是以Front視角為主來詮釋
由網格翻轉出立方體來作為選項按鈕

X090911-9

恩

X090928-1

由於本來的網格翻轉出立方體不是很滿意
又Z改以[面]進行
[點]擠出的柱體效果不錯 自然就取代了原來的設計

X_101031

z的完成圖



Z的進場動畫


以上是主要內頁的設計過程(覺得好難寫喔~)

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.