論切圖仔的自我修養

1、Photoshop

Adobe Photoshop 是設計師的必備，因此也是前端切圖仔的必備工具。 
Photoshop CC 2015 牆裂推薦安裝2015版，有諸多改進，很多新功能是與咱們切圖仔息息相關的。

• 工做區

• 經常使用快捷鍵

• 輔助App和擴展

• 設計社區

工做區

推薦選擇「排版規則」，比較適合咱們切圖仔。主界面右側有不少和網頁排版相關的工具和信息展現。若是你是在狹小的顯示器裏工做，你也能夠選擇收起最右側的面板組。

設置

性能方面，設計師童鞋廣泛用的糕富帥版本的電腦，作出來的稿子有時候塊頭都好大，讓咱們這些切圖仔的電腦鴨梨山大。 咱們只好給咱們的PS多喂些奶咯。 打開首選項［Cmd+k］，選擇性能面板1. 給PS分配更多的可用內存； 
2. 勾選「使用圖形處理器」；

網頁設計方面一般用像素做爲長度的度量單位，咱們須要和設計師保持一致，因此設置單位與標尺的單位爲「像素」；

再嘮叨幾句：P

像素完美，這應該是值得每個設計師（我廠的製圖員）去努力追求的。 當你拿製圖員給你的設計稿時，請先花個兩三分鐘掃一遍稿子。看是否有明顯的像素不完美的狀況，這樣減小沒必要要的返工。

經常使用快捷鍵

如下黃色高亮的功能都是PS CC 2015新增的

• 存儲爲Web所用格式：Shift+Cmd+Option+s

• 圖像大小：Option+Cmd+i

• 畫布大小：Option+Cmd+c

• 合併拷貝：Shift+Cmd+c

• 快速導出整圖

  ：Shift+Cmd+Option+w

• 快速導出圖層

  ：Shift+Cmd+'

Tips：

1. 按住Cmd鍵，鼠標移到圖層上可顯示智能參考線； 
   

2. 選擇多圖層[組]，進行快速對齊調整，如水平居中對齊、垂直居中對齊等。

3. 快速導出爲PNG

2、Photoshop 插件推薦

1. DevRocket

加速你的iOS設計工做流。咱們在手機端h5有不少不少頁面須要設計，這個工具能幫助設計師的工做更加高效。對於切圖仔來講，也有很多便利的功能，好比一鍵提取圖層[組]到新的文檔並裁切空白元素。View Template 
Export Assets 
One Clip 
Preview Design 
傳送門：http://devrocket.uiparade.com/ $19

2. GuideGuide

支持多種PS版本（CS5～CC2015），參考線神器。

能夠基於文檔或選區新建參考線，快速在邊緣或中心點生成參考線。還有參考線組，一鍵生成。最強大的功能還屬它的自定義參數生成參考線。

傳送門：http://guideguide.me/

3. Device Preview

功能同Skala Preview，但這貨是Adobe的親兒子，功能依賴Adobe ID，手機也要安裝app，一樣支持iOS和Android。

4. CSS Hat

以前有買過1.x版，支持導出圖層樣式爲css、less、sass等，若是要升級到支持CC2014+版本又要收錢，坑爹～。～已棄坑。

傳送門：https://csshat.com/

3、輔助App

用好輔助的App和擴展能使你的切圖效率事半功倍哈：），推薦幾款給你們～

1. Slicy

比較依賴製圖組童鞋的稿子質量了，製圖員須要加不少的輔助標註和切圖所需的輔助圖層

傳送門：http://macrabbit.com/slicy/ $29

2. Skala Preview

在手機上預覽設計稿的好工具，製圖組的小夥伴們好多在用，切圖仔們也能夠耍耍，須要在手機上安裝相應的app，支持iOS和Android；另PS須要開啓「遠程鏈接」功能。

傳送門：http://bjango.com/mac/skalapreview/ Free

4、我常逛的設計類社區

• Dribbble Show and tell for designers

• Awwwards Best Web Design Trends

• Behance Showcase and discover the latest work from top online portfolios by creative professionals across industries.

• Smashing Magazine For Professional Web Designers and Developers

• Pttrns Mobile design patterns, resources and inspiration

• UI8 Carefully Crafted UI Design Assets

原文：http://tech.youzan.com/cut-boy/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io