★ January 19th, 2009 Bankroid Icon 出貨了
1/5 接受了 上官.app 的委託，製作了一個 Android 記帳軟體的 icon，今天終於完工了，順便把這個 icon 的製作過程記錄下來。
因為收了消費卷的關係，還附贈了桌布和官方網站，大家拼經濟～。
Android 是什麼？可以沾烤肉醬嗎？
Android 是 Google 推出的智慧型手機作業系統，我身旁剛好有一支可以玩，玩了以後嘛，嗯哼…，使用感想跟本篇無關，就跳過吧。
重點是，當我接到委託的時候，手邊還沒有 Android 手機，只有下面這張螢幕截圖。
在網路上也找不到任何關於設計規範的文件，Market place 裡面也看不到其他人設計的 icon，所以一切只能靠自己摸索。
後來我在文件裡的示範程式裡找到兩個 icon，算是聊勝於無。
第二個 icon 很重要，他傳達了兩個訊息：
- Icon 背後是有陰影的！
- 長方形的 icon 明白表示出透視角度。
至於第一個 icon 為什麼沒有陰影，我就不知道了。
筆記本草稿
發想的步驟是在無印良品筆記本上發生，這個 icon 的發想階段可以算是輕鬆，因為上官只說「幫我做個 icon 吧！」剩下的都交給我，所以沒什麼壓力。
一開始練習一下 Android icon 的形態，後來自然而然的想把它畫成「零錢包」的樣子，而且還是古早味、阿嬤用的零錢包。
不知不覺零錢包變成豬頭的形狀。
順道一提，他的名字是「不理不理左右門」。
Illustrator 畫輪廓
我一向是 Fireworks 的愛用者，但這次練習用 Illustrator 來畫，以前雖沒在用 Illustrator，好在繪圖軟體操作方式與工具都很類似，要畫的東西又很簡單，所以一下子就畫好初稿了。
就是這個古早味的零錢包。
後來決定把它改成拉鍊式的，單純因為覺得拉鍊比較好畫。另一個理由是並非每個人（尤其是外國人）都知道什麼叫「古早味零錢包」，怕大家看不懂，所以乾脆改成拉鍊式
後來順道加上了手工縫線。
由平面轉換為立體的 Android 樣式
這個步驟是最傷腦筋的地方。Android 的 icon 不僅是立體的，而且還有點圓滑，有繪畫基礎的人大概可以輕易在紙上完成這種效果再掃描到電腦裡重繪，但我不會這招，必須要另外找辦法。
最直接的辦法是利用 Illustrator 內建的 3D 凸起功能，把 icon 變立體但是…
3D 化的不理不理左右門變得很痴呆！
我試了很多角度總是無法達到理想的效果，經朋友指點，才知道要畫出透視線，再以透視線為依據對準角度。
但即使角度正確，Illustrator 還是會把我的圖當成扁平的物體來 3D 化，沒有圓滑的感覺。
怎麼辦呢？要怎麼做才可以對準角度，又表現出圓滑形狀？
解答就在 Photoshop 裡。
Photoshop 變形工具
首先用手工繪出透視的角度和彎曲的弧面，然後使用 Photoshop 裡的變形工具「Warp」功能來把平面的圖「黏」到弧面上，這樣就可以達到預期的效果。
也許有更好的方式，但我不知道，歡迎指教。
這裡有個小技巧，在 Illustrator 複製物件，貼到 Photoshop 時要選擇將物件當成「路徑」，變形完畢後才可以貼回去 Illustrator 編輯，這也是上圖的豬頭沒有色彩的原因 — 它全由都路徑構成。
回到 Illustrator 完工
接著就是快樂的完工階段了，路徑都已經固定下來，可以悠閒的調顏色、加陰影，嘗試不同的效果。
最後另加了一個 Easter Egg，有下載桌布的應該很容易發現。