【Sketch】Pixel-perfect Design in Sketch

之前在學校，教的學的最多的是設計思想，流程，方法，從來沒有非常看重pixel-prefect這個問題～最近越來越發現pixel-perfect的重要性，尤其是和front-end交流溝通delivery設計稿的時候。到處去學習了學習應該怎樣更好地生產pixel-perfect的設計，自己總結了總結這段時間以來積累的淺薄的經驗，寫了這篇和大家一起分享。這篇會列出來一些Sketch中可以幫助work with pixel的小技巧；推薦一下好用的Plug-in～

嗯！和其他在專欄里的分享一樣，歡迎大家能在評論里留下相關的內容讓我們可以互相學習一起進步呀！(●°u°●) 」

1. 設置pixels settings。打開pixel fitting。

2. 實際大小 Designing in 1x as a base.

3. 在位置和大小處使用整數。尤其是position，有時候單獨畫一個icon的時候，常常會忽略position而導致那裡出現小數，在導出的時候會有blur。

4. 可以在view里設置常年打開「show pixels grid」和在toolbar裡面加上「show pixels」

5. 調整形狀時記得打開，round to full pixels edges。

6. border記得調整成「inside」。比方說注意下面三個圓的選擇他們的框的位置！畢竟align的時候，按住option來看位置的時候，是按照這個框的啊（按著option時候，不會用mac截圖了，抱歉）～在使用outside boder的時候，同樣有這樣的問題～

7. 當使用alignment工具來align的時候～小心會end up with half pixel。同時奇數偶數也要注意呀～

The picture with purple circles credit to：Nav Pawera

8. 盡量畫長方形「rectangular」而不是畫線「line」。用line在resizing的時候真的很麻煩。

9. 當把text 「convert to outlines」了之後，有時會產生half pixel等情況；所以記得選中之後在layer下面選「round to nearest pixel edge」

工具推薦:

Zeplin: Collaboration app for UI designers and frontend developers.

Read more:

Pixel fitting type in sketch

Getting the pixels right in Sketch - by Nav Pawera

Sketch official guide on pixel precision

Zeplin Official Site

推薦閱讀：