切圖那點(diǎn)事！關(guān)于APP切圖和標(biāo)注

切圖是一件比較單調(diào)枯燥的工作，但又需要比較強(qiáng)的耐心和細(xì)心，用戶手中看到的產(chǎn)品界面，并非設(shè)計(jì)師的最終效果圖，而是一個(gè)個(gè)單獨(dú)的切圖經(jīng)由開(kāi)發(fā)技術(shù)實(shí)現(xiàn)。切圖作為設(shè)計(jì)師與開(kāi)發(fā)者之間的橋梁，它的作用很關(guān)鍵，合適的切圖、精準(zhǔn)的位置可以最大限度的還原效果圖的設(shè)計(jì)，精妙的切圖更會(huì)有事半功倍的效果。 這個(gè)切圖教程開(kāi)始是寫(xiě)給我們實(shí)習(xí)的小美女的，但她現(xiàn)在又上學(xué)了，切圖就分擔(dān)成每個(gè)設(shè)計(jì)師的必備工作，切圖技巧也因人而異，需要各位親自己去發(fā)現(xiàn)總結(jié)適合自己的技巧。這里給大家介紹我自己的切圖和標(biāo)注小技巧，可以更快，更好的方便工作。

工具軟件PS大神

相對(duì)于設(shè)計(jì)和繪畫(huà)，切圖用到的ps并不多，摸索個(gè)幾分鐘基本也就了解大概。說(shuō)到這個(gè)，產(chǎn)品組的幾個(gè)小美女應(yīng)該很興奮，哈哈!

先簡(jiǎn)單的介紹幾個(gè)PS經(jīng)常使用的快捷鍵：

切片工具：點(diǎn)擊C進(jìn)入切片模式

自由的瀏覽圖片：按住空格后，鼠標(biāo)拖動(dòng)

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

通過(guò)畫(huà)面上點(diǎn)選一個(gè)圖層：Alt + 鼠標(biāo)右鍵

在畫(huà)面上拖動(dòng)一個(gè)圖層：V 切換到移動(dòng)模式 鼠標(biāo)拖動(dòng)

畫(huà)一個(gè)選區(qū)：點(diǎn)擊M進(jìn)入選區(qū)模式 ， 鼠標(biāo)拖畫(huà)

放棄選區(qū)：Ctrl+D

吸管工具：點(diǎn)擊I進(jìn)入吸管模式，點(diǎn)選畫(huà)面顏色

感興趣的小伙伴可以推薦這個(gè)網(wǎng)址去看比較全的快捷鍵： http://irelandcustomcontracting.com/Tutorial/ps1225.html

功能頁(yè)面歸類(lèi)

如果是一個(gè)新項(xiàng)目，按功能模塊切圖會(huì)更好服務(wù)開(kāi)發(fā)，現(xiàn)在開(kāi)發(fā)都是迭代式展開(kāi)，這樣會(huì)讓開(kāi)發(fā)工作更有效率，更有目的性。

但如果是單個(gè)頁(yè)面的切圖，就不需要考慮這么多，注意一些現(xiàn)有的設(shè)計(jì)規(guī)范就可以。

保存生成圖片格式

按PS快捷鍵 CTRL+ALT+'顯示網(wǎng)格，這樣的切圖會(huì)比較精確點(diǎn)，把頁(yè)面需要的圖標(biāo)切好生成圖片，圖片格式可以保存為JPG和PNG, 色彩眾多的圖片jpg優(yōu)先，色彩簡(jiǎn)單，需求透明的png優(yōu)先。切片在儲(chǔ)存的時(shí)候，可以點(diǎn)選每個(gè)切片對(duì)其設(shè)定不同的圖片格式，保存的時(shí)候可以選擇保存選擇的切片而不是全部。

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

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

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

注意事項(xiàng)：千萬(wàn)不要對(duì)jpg進(jìn)行二次處理：jpg就算質(zhì)量100%也是有損格式，保存的時(shí)候盡量為PNG，用上兩個(gè)工具都可以進(jìn)行二次處理哦!

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

“點(diǎn)九”是Android平臺(tái)處理圖片的一種特殊的形式，由于文件的擴(kuò)展名為：“.9.png”，所以被稱(chēng)為“點(diǎn)九”。它可以將圖片橫向和縱向隨意進(jìn)行拉伸，而保留像素精細(xì)度、漸變質(zhì)感和圓角的原大小，實(shí)現(xiàn)多分辨率下的完美顯示效果，同時(shí)減少不必要的圖片資源。

圖標(biāo)統(tǒng)一大小處理

切圖的時(shí)候圖標(biāo)或者廣告圖片都會(huì)有幾像素的誤差，保存圖片的統(tǒng)一性，可以在圖片切好以后統(tǒng)一處理，這個(gè)就可以使用到PS里面的動(dòng)作路徑，很簡(jiǎn)單的小動(dòng)作，但可以省掉很多時(shí)間。

創(chuàng)建動(dòng)作

使用動(dòng)作之前先要?jiǎng)?chuàng)建和記錄動(dòng)作，Photoshop已經(jīng)定義了一些動(dòng)作和動(dòng)作組(動(dòng)作組是動(dòng)作的集合)，可以直接載入使用。

記錄動(dòng)作

在“動(dòng)作”面板中，單擊一個(gè)組或組中的一個(gè)項(xiàng)目為當(dāng)前組或項(xiàng)目，或者建立一個(gè)新動(dòng)作組。

載入和播放動(dòng)作

Photoshop將多個(gè)命令組合為單個(gè)動(dòng)作，通過(guò)載入并播放動(dòng)作可以使任務(wù)執(zhí)行自動(dòng)化。

標(biāo)注Markman工具

該工具可以對(duì)效果圖中的長(zhǎng)度、坐標(biāo)、顏色、文字、矩形進(jìn)行標(biāo)記。

便于客戶端開(kāi)發(fā)人員對(duì)應(yīng)用的每個(gè)控件在頁(yè)面中的位置進(jìn)行精確控制，以確保效果圖和成品的高度契合。

網(wǎng)站有很詳情的介紹哦!不在這里給大家介紹功能的使用。

很多時(shí)候在提供設(shè)計(jì)規(guī)范后愁苦實(shí)現(xiàn)效果不盡如人意的同時(shí)，可以盡可能的利用一些切圖手段，對(duì)切圖的小伙伴表示感謝，幫助設(shè)計(jì)達(dá)到零差別的呈現(xiàn)，同時(shí)對(duì)開(kāi)發(fā)也減少了很多不必要的開(kāi)發(fā)負(fù)擔(dān)，讓切圖和開(kāi)發(fā)成為更貼心更默契的合作伙伴吧!為了更完美的展示效果!