關於APP切圖和標注

 　　切圖是一件比較單調枯燥的工作，但又需要比較強的耐心和細心，用戶手中看到的產品界面，並非設計師的最終效果圖，而是一個個單獨的切圖經由開發技術實現。切圖作為設計師與開發者之間的橋梁，它的作用很關鍵，合適的切圖、精准的位置可以最大限度的還原效果圖的設計，精妙的切圖更會有事半功倍的效果。 這個切圖教程開始是寫給我們實習的小美女的，但她現在又上學了，切圖就分擔成每個設計師的必備工作，切圖技巧也因人而異，需要各位親自己去發現總結適合自己的技巧。這裡給大家介紹我自己的切圖和標注小技巧，可以更快，更好的方便工作。

　　工具軟件PS大神

　　相對於設計和繪畫，切圖用到的ps並不多，摸索個幾分鐘基本也就了解大概。說到這個，產品組的幾個小美女應該很興奮，哈哈!

　　先簡單的介紹幾個PS經常使用的快捷鍵：

　　切片工具：點擊C進入切片模式

　　自由的浏覽圖片：按住空格後，鼠標拖動

　　自由的縮放圖片：按住alt+滾輪

　　通過畫面上點選一個圖層：Alt + 鼠標右鍵

　　在畫面上拖動一個圖層：V 切換到移動模式 鼠標拖動

　　畫一個選區：點擊M進入選區模式 ， 鼠標拖畫

　　放棄選區：Ctrl+D

　　吸管工具：點擊I進入吸管模式，點選畫面顏色

　　感興趣的小伙伴可以推薦這個網址去看比較全的快捷鍵： http://www.douban.com.zcool.cn.zcool.cn.zcool.cn.zcool.cn/note/164279285/

　　功能頁面歸類

　　如果是一個新項目，按功能模塊切圖會更好服務開發，現在開發都是迭代式展開，這樣會讓開發工作更有效率，更有目的性。

　　但如果是單個頁面的切圖，就不需要考慮這麼多，注意一些現有的設計規范就可以。

　　保存生成圖片格式

　　按PS快捷鍵 CTRL+'顯示網格，這樣的切圖會比較精確點，把頁面需要的圖標切好生成圖片，圖片格式可以保存為JPG和PNG, 色彩眾多的圖片jpg優先，色彩簡單，需求透明的png優先。切片在儲存的時候，可以點選每個切片對其設定不同的圖片格式，保存的時候可以選擇保存選擇的切片而不是全部。

　　有時候我們切好的圖片尺寸還是很大，就需要二次加工，這裡給大家提供幾個壓縮圖片尺寸的好工具：

　　http://www.atool.org/pngcompression.php

　　http://www.secaibi.com/tools/

　　注意事項：千萬不要對jpg進行二次處理：jpg就算質量100%也是有損格式，保存的時候盡量為PNG，用上兩個工具都可以進行二次處理哦!

　　點九圖片的使用(安卓需要使用，IOS不需要)

　　“點九”是Android平台處理圖片的一種特殊的形式，由於文件的擴展名為：“.9.png”，所以被稱為“點九”。它可以將圖片橫向和縱向隨意進行拉伸，而保留像素精細度、漸變質感和圓角的原大小，實現多分辨率下的完美顯示效果，同時減少不必要的圖片資源。

　　圖標統一大小處理

　　切圖的時候圖標或者廣告圖片都會有幾像素的誤差，保存圖片的統一性，可以在圖片切好以後統一處理，這個就可以使用到PS裡面的動作路徑，很簡單的小動作，但可以省掉很多時間。

　　創建動作

　　使用動作之前先要創建和記錄動作，Photoshop已經定義了一些動作和動作組(動作組是動作的集合)，可以直接載入使用。

　　記錄動作

　　在“動作”面板中，單擊一個組或組中的一個項目為當前組或項目，或者建立一個新動作組。

　　載入和播放動作

　　Photoshop將多個命令組合為單個動作，通過載入並播放動作可以使任務執行自動化。

　　標注Markman工具

　　該工具可以對效果圖中的長度、坐標、顏色、文字、矩形進行標記。

　　便於客戶端開發人員對應用的每個控件在頁面中的位置進行精確控制，以確保效果圖和成品的高度契合。

　　網站有很詳情的介紹哦!不在這裡給大家介紹功能的使用。

　　很多時候在提供設計規范後愁苦實現效果不盡如人意的同時，可以盡可能的利用一些切圖手段，對切圖的小伙伴表示感謝，幫助設計達到零差別的呈現，同時對開發也減少了很多不必要的開發負擔，讓切圖和開發成為更貼心更默契的合作伙伴吧!為了更完美的展示效果!