收到讀者來信，這位讀者是 F2E，發現設計師的切圖和 F2E 的切版似乎不太一樣，所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明，其實還滿想回他一句「多被RD罵幾次就會了啊」…orz
切版/切圖
切版、切圖這兩個詞都有人混著講，兩者其實指不同件事。
對設計師來講，切圖指的是 「把圖從 Mockup 裡以可被 RD 運用的方式切出來」。
但對前端來說，切版指的是 「對設計圖做版面劃分和規劃的行為」。比如 import、include 等等。
要混著講也是可以啦，同個詞放在不同職位身上會有不同含義也很正常，比如 RD 的 Design Pattern 和 UI 的 Design Pattern 就完全是兩回事。
但不管是切版或是切圖，麻煩在做 Mockup 前、完成 Mockup 要開始切的時候，F2E 和設計都坐下來花點時間，拿 Wireframe 討論一下要怎麼做圖和切圖好嗎？ 有經驗的 F2E 和設計都會先討論過再開工以減少錯誤，沒經驗的不更該好好問清楚要怎麼做才能互相配合？
切圖的工具
如果設計師會自己做網頁，哪怕是 Dreamweaver 圖像介面拉一拉，對切圖多少都會有點概念。當然能手刻 HTML CSS 更好。
如果你是 F2E，要面對平面設計師切出來的圖，請參考：如何讓公司的平面設計師交出可以用的 Web 圖？ 然後快點去拜拜或天天扶老太太過馬路求人品爆發。
切圖的流程每位設計師都不太一樣，但產出物會是相同的（不然 RD 怎麼套圖？）。市面上有很多工具可加快工作效率，我自己是 愛用切圖神器：Slicy ，有的設計師習慣使用 免費切圖神器：Cut&Slice me 。
另外推一套 Photoshop 外掛：DevRocket ，除切圖外，還可以做Mockup、Demo 圖。
很多繪圖軟體內建切圖功能，像新版的 Photoshop、Sketch 、Affinity 等等，挑自己順手的就好了，沒有什麼強硬的規定一定要用什麼方式切圖。
切圖的方式
依製圖習慣不同、切圖工具不同、專案需求不同，會有完全不同的切圖方式。但製圖遠比切圖更重要，在 Mockup 這一步沒做好，圖切得爛理所當然。
網頁
切圖前請先問清楚這個專案是否需要：
- @2x
- SVG
- Responsive
- 單一圖檔重覆使用…等等
其實這問題應該在畫 Mockup 前就要問清楚了，這 3 個需求會影響做圖方式。如果這 3 點都沒有就輕鬆啦，如果這三個都中獎了就要更注意 PSD 檔製作，該向量就向量、該對準參考線 Grid 的要對準。同一圖檔若會在許多地方出現，請轉智慧型圖層。
App
iOS 和 Android 切法不同，如果要一套 Mockup 切給兩個平台用，記得 iOS 切一次，另存新檔後再切 Android。有備份有保祐。
- @2x、@3x
- 9-patch
- 切 PDF…等等
比較容易出錯的的切圖應該會出在這 3 點上。參考 工作清單：切圖 ，一時間看不懂沒關係，被 RD 退件幾次罵幾次就會了。
切圖前設計的注意事項
這問題其實在問「Mockup 怎麼做」，範圍太大了很難詳細說明，列幾篇文章出來當延伸閱讀吧。圖切得爛只是設計師不知道怎麼做沒經驗，教他幾次就好了（學不乖、不肯學的例外）。Mockup 做得爛、製圖習慣不好才是真正難治療的黑洞。
Mockup
Web Grid
Grid 的運用：PS外掛
Fixed Grid System詳解
APP
iOS 解析度製圖設定
iPhone 6 及 Plus 製圖建議
iOS 支援向量切圖
iOS、Android 字級單位
希望這篇文給所有想轉行的平面設計師一點方向：網頁設計師基本功 。
