製作過程:Anna Sui Wallet


Icon Design:My Wallet 真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet

從上圖可以看到右邊的圖層,主要分成:

  1. base:基本形狀。
  2. bg:皮革底。
  3. lace:半圓形的花邊。
  4. b:中間的葫蘆型底。
  5. a:最上層像 落腮鬍 邊框的底。
  6. highlight:整體的高光。
  7. hole:所有金色打洞。
  8. rose:中間的蝴蝶和玫瑰花。
  9. 相片濾鏡:讓icon的色彩更有一致性。


這款 Anna Sui 短夾有個很漂亮的曲線,實體是長方型的,icon 卻是正方型,所以需要重新排。這 3 個圓決定弧線位置。


雖然形狀各異,但 a、b、lace 這三層其實是同樣的皮革,作法差不多,微調高光、陰影變化和圖層樣式而已。


高光層比較麻煩一點,我參考很多教學,psd+ 非常棒,可以找到很多方式達到想要的效果。為了讓高光有漂亮的漸層,同個位置我會疊 2 層不同尺寸和透明度的淺色漸層來表現光照。


蝴蝶和玫瑰根本是Anna Sui 的招牌,一定要好好的刻劃。因為圖層數太多,我又很討厭圖層雜成一團亂七八糟(處女座的潔癖),乾脆壓成智慧型物件,要修改的話再開個視窗處理,這裡只處理整體的光影變化。


偷吃步!說穿了就是拍一張實物、然後照描…(遮臉)


而且我還嫌用PS畫向量很麻煩,直接開AI處理。很偷吃步的用AI筆刷描邊、塗滿、轉外框、合併物件、貼到PS轉為形狀圖層…一塊塊重復這個步驟就好了,連拉錨點都省略,反正蝴蝶和玫瑰花的輪廓線不是非常工整的那種。(圖中看得出來蝴蝶還是線條沒有轉外框。)


反正就是在AI畫好一片、貼到PS裡轉為一層形狀圖層。我想針對每一片花或葉做不同的漸層和光影變化,只能這樣慢慢刻了。


這步驟其實我很掙扎,因為高光和陰影沒辦法用向量處理(喂)。後來開竅了、幹嘛死抓著莫名其妙的堅持不放。可以看到每一層花瓣葉子都有筆刷製作的陰影。


最重要的就是點高光啊!畫龍點睛就靠這一步了。有 Ctrl + Z 多幸福啊各位、想當年念工設做模型、一個手滑就是整個重來沒得復原的啊!反正就是用小小的筆刷尺寸、20% 透明度 慢慢一層層疊加上去,不喜歡就 Ctrl + Z 。

最後請再讓我炫耀一下這顆 icon,拿到邀請碼的時候都快哭了,這對我而言是種肯定,總算可以有客觀的證明告訴自己其實沒有想像中的差勁。相信自此之後不會有人跟我說「妳又不會做設計只有那張嘴厲害,幹嘛不轉業務或企劃」,能光明正大的自豪自己是位設計師了!(Anna Sui 的包包很讚,找個時間再去敗一咖犒賞自己、嘿嘿~)

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close