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.

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跳來跳去
節奏看起來會比較快

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



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