Chuk-Portfolio_美術設計過程E

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



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



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

Chuk-logo from jomanwing on Vimeo.

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

就是這樣

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

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

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

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



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



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



最後面數減到了70幾萬



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

以上是zbrush減面功能

Chuk-Portfolio_美術設計過程D

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



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



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

就這樣

Chuk-Portfolio_美術設計過程C

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



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

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



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


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

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


就這樣


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

Chuk-Portfolio_美術設計過程B

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



z:



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



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



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



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



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



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



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



z的進場動畫



y:



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



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



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



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



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



x:



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



恩



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



z的完成圖



Z的進場動畫


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