字體設計相關書籍
三采文化寄了「我們都被字型洗腦了:看字型如何影響食衣住行,創造看不見的價值」這本書給我,請我試閱寫心得。字體字型相關書籍我買了不少本,當做課外讀物瞧瞧而已並沒有很認真地研究。為了寫這篇我把所有字體書又都翻了一次,並花時間把我們都被字型洗腦了看完。
2015年2月,推薦書單(上)
書越來越多了,懶的買書櫃,去樓下 7-11 拎了 2 個黑貓紙箱橫疊著裝書,沒想到過沒幾個月又快滿了…推薦書單這系列應該半年左右就會出現一次吧。不一定是新書,就是這半年入手看完、覺得可以推薦給大家參考用的部分。這篇就先談上列三本,從左邊開始。
工作清單:Mockup
以我自己的工作流程,會是:Functional Map > UI Flow > Wireframe > Mockup > 切圖 > 標示文件。當然在更前期會有 UX 研究、最後會接 HTML 等等,但就一位 UI Designer 來說應該是這些。
對 Mockup 而言…Wireframe 有什麼就畫什麼,不要亂改亂腦補!而且遵守 PSD 製作禮儀 。
Nest Pastiche 製作過程
這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。
快速製作圓形漸層icon
看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。
自製簡易 icon 教學
雖然網路上有很多多多免費的 icon 讓人使用,但大半都禁止「商業用途」,要馬就掏錢買一套、要馬就自己畫。介紹一下我愛用的自動筆和筆記本,以及最基本的 icon 從鉛筆草圖一直到電腦完稿的流程。(相信念廣告設計的學生對這過程非常熟悉。
高級美工
這兩篇文非常一針見血,捅下去都不覺得別人痛的。
英文原文:Faking the Shot : How Dribbble is hurting designers.
中文譯文+譯者心得:吐槽向 - 關於Dribbble、設計社區、圈子、互捧夠友…
製作過程:Anna Sui Wallet
Icon Design:My Wallet
真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet
Icon Design:My Wallet
總時數超過 30 小時,超過 100 個圖層。逼我換 MACBOOK PRO,還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon,分我個 Dribbble 的邀請碼。(真的拿到了!感謝 Mike Bronk
)
扁平化設計:厚度
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔,可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要,細細一條就能帶給人「厚度」和「轉折」的視覺效果。
扁平化設計:折頁
翻頁效果也是很常見的扁平化小技巧,簡單幾個步驟就能完成了。請接著扁平化設計:高光、陰影
繼續做喔!
扁平化設計:高光、陰影
有了基本雛型後可以開始添加細節,從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性,扁平化設計將視覺元素抽掉很多,高光、漸層、陰影等基本組成因此變得更重要,更需要注意每 1px 的細部處理。