快速製作圓形漸層icon
快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

彩色圓環試作
彩色圓環試作


我在 QQ 優設 12 群掛著,有時候會看到他們 PO 一些問題求救,很有意思,會試著想要怎麼做得更漂亮,從中學到很多。這個圓環需要用到 AI 和 PS,看起來滿適合運用在技能值或數據視覺化。

愛用的 Photoshop Plugins

12 Premium Photoshop Plugins for Designers 這篇文章提到 12 個好用的 Photoshop Plugins,有幾款功能重復,有些非買不可。來介紹一下我已經買了且覺得超好用的 PS 外掛…台灣買 Plugins 的風氣不太盛行,但如果能節省自己的工作時間增加效率,每一筆錢都花得非常有價值。(省下來的時間不要傻傻的跟 PM 說因為我自己掏腰包買了神兵利器所以可以塞給我更多工作,那段空檔是拿來充電用的!)

Grid 的運用:PS外掛
Grid 的運用:PS外掛


製作的 Responsive Web 最好能先理解 Grid 概念。這概念不只運用在 Mobile Web ,包含 Smart TV 都會派上用場。如果你輕鬆想做出和 Mockup 相同的 Web ,最好把 Grid 學起來。

初學者的 Mockup

在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種,最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧,其實指的就是製作 Mockup 的能力,字體設計、按鈕樣式、扁平化、擬物風等等。

PS 色彩管理與解析度設定
PS 色彩管理與解析度設定

關於螢幕有太多學問,以 UI 的角度來談談給 UI 用的 Photoshop 螢幕設定吧,就「色彩管理」和「解析度」的部份。本文參考 Colour management and UI designDesigning for Retina display, part two 所寫。

我的選色技巧
我的選色技巧


Pochade 我愛用的截色 App

最近在工作上遇到關於配色的大難題…公司 LOGO 是深藍+亮橘,但要做的專案和股市看盤有關,所以要加入紅色和綠色,要求官網、網頁版系統、Desktop App、Mobile App 都要一致性、能讓人一眼就看出來這是該公司的產品,要有企業形象,一定要用上企業色。偏偏扯到「股市看盤」就不會只有兩條線在畫面上跑這麼簡單…

製作過程:Anna Sui Wallet
製作過程:Anna Sui Wallet


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

Icon Design:My Wallet

20131207-DEMO.png
總時數超過 30 小時,超過 100 個圖層。逼我換 MACBOOK PRO,還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon,分我個 Dribbble 的邀請碼。(真的拿到了!感謝 Mike Bronk

扁平化設計:斜陰影

flat-斜陰影.png
常常在扁平化的 icon 上看到斜陰影效果,要製作這個效果有很多種方式。網路上的教學文也很多種,我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。(沒辦法、現在就是流行扁平化、厚度、斜陰影。)