愛用切圖神器：Slicy
Slicy 是我測過幾種輔助切圖工具後又回來使用的神器。「把整個 PSD 扔進去，結束。」簡潔利落不囉嗦。我愛它的程度已經到了沒有它我就不會切圖了（哈哈）。
免費切圖神器：Cut&Slice me
整個開發流程中我最愛的就是切圖部份了，這表示改得要死的 Mockup 終於過關了喔耶～就來分享一下切圖神器吧，業界最知名的有 2 套，功能有些不同，比較複雜的這套是免費的 Photoshop 外掛，先從免費的開始講起吧。
標示神器：MarkMan
一堆人問我的慣用工具…就先從愛用品開始講起吧。
UI 在切完圖後還有工作要做，不是一堆 .png 打包扔給 RD 就了事，圖檔名稱咧？尺寸咧？字體咧？色碼咧？這些都要告訴 RD 的吧？
製作過程：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
）
扁平化設計：斜陰影
常常在扁平化的 icon 上看到斜陰影效果，要製作這個效果有很多種方式。網路上的教學文也很多種，我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。（沒辦法、現在就是流行扁平化、厚度、斜陰影。）
扁平化設計：厚度
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔，可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要，細細一條就能帶給人「厚度」和「轉折」的視覺效果。
扁平化設計：折頁
翻頁效果也是很常見的扁平化小技巧，簡單幾個步驟就能完成了。請接著扁平化設計：高光、陰影
繼續做喔！
扁平化設計：高光、陰影
有了基本雛型後可以開始添加細節，從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性，扁平化設計將視覺元素抽掉很多，高光、漸層、陰影等基本組成因此變得更重要，更需要注意每 1px 的細部處理。
扁平化設計：基本雛型
扁平化設計是現在最流行的設計趨勢，比起擬物風，扁平化設計去除大部份的材質和光影變化，但仔細觀察，仍保有許多細節。無論是陰影、漸層、高光、立體感等，並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧，只要會用「形狀圖層」就好。為了因應各種尺寸的 icon，我習慣盡可能用向量來製圖。
各式按鈕背景：進階篇
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影，為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景：基本篇
製作～
各式按鈕背景：基本篇
最常見的按鈕就是個長條型的色塊，配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化，在視覺上更顯精緻。可接著各式按鈕作法：文字篇
的步驟接著做。
文章分類
