完成頁面切圖目錄4、命名規(guī)則1、切片工具的概念2、切圖插件的使用3、圖標(biāo)切圖5、切片導(dǎo)出6、任務(wù)實(shí)現(xiàn)知識(shí)點(diǎn)導(dǎo)入01一、切片工具的概念

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出，以替代傳統(tǒng)的手工"導(dǎo)出web所用格式"以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便你在pc、ios、Android等端上使用。它不需要你記住一堆的語法、規(guī)則，純點(diǎn)擊操作，方便、快捷，易于上手。二、切圖插件的使用

目前支持的版本有cs6/CC/CC2014

，1．cutterman的下載，去官網(wǎng)下載/cutterman2．安裝成功之后打開ps，點(diǎn)擊【窗口】->【擴(kuò)展功能】->【cutterman】三、圖標(biāo)切圖

cutterman提供了面向三種平臺(tái)的切圖特性1、輸出支持IOS平臺(tái)的單倍圖、雙倍圖，支持IPHONE6/6P尺寸比例。支持Android平臺(tái)2、輸出支持Android平臺(tái)的各種分辨率大小圖片3、PC:

如果你是做web端的設(shè)計(jì)，請使用PC標(biāo)簽，它可以支持輸出png/jpg/gif等各種格式和質(zhì)量大小的圖片四、命名規(guī)則

命名規(guī)則是【（界面或者功能）+（控件名）+（狀態(tài)）+（補(bǔ)充描述）】，以如下待付款圖標(biāo)為例。五、切片導(dǎo)出

切片導(dǎo)出：支持各種圖片格式輸出如png、jpg、gif、web等等，同時(shí)支持單個(gè)圖層輸出、多個(gè)圖層合并輸出、導(dǎo)出固定尺寸圖片輸出。1、導(dǎo)出單個(gè)圖層，

選中一個(gè)你要輸出的圖層，設(shè)置保存目錄，再點(diǎn)擊導(dǎo)出選中圖層按鈕，導(dǎo)出圖層組。如果你選中的是整個(gè)圖層組，cutterman會(huì)將組里的所有內(nèi)容都合并，輸出一張圖。以home圖標(biāo)為例，導(dǎo)出之后，ios會(huì)有@2x和@3x的切圖。（1）、電子商務(wù)。app是企業(yè)銷售中最直接、最有效的一種，許多電商app加入了社交等元素，加上各種社交平臺(tái)開發(fā)分享，因此用戶可以在購買的同時(shí)快速分享，在增加自己的銷售渠道。（2）、服務(wù)品牌。以大型企業(yè)為主，承擔(dān)一些功能，如我們熟悉的快遞查詢、小區(qū)內(nèi)客服、維修、活動(dòng)、積分（1）、電子商務(wù)。app是企業(yè)銷售中最直接、最有效的一種，許多電商app加入了社交等元素，加上各種社交平臺(tái)開發(fā)分享，因此用戶可以在購買的同時(shí)快速分享，在增加自己的銷售渠道。（2）、服務(wù)品牌。以大型企業(yè)為主，承擔(dān)一些功能，如我們熟悉的快遞查詢、小區(qū)內(nèi)客服、維修、活動(dòng)、積分商城等。讓你和顧客更近一點(diǎn)。（3）、本地應(yīng)用程序。企業(yè)可以把自己的業(yè)務(wù)領(lǐng)域分成若能，而本地app最主要的一點(diǎn)就是利用app來發(fā)展新客戶，維持舊客餐飲企業(yè)積累自己的客戶資源，有效地打造餐飲企業(yè)品牌。

2、導(dǎo)出多個(gè)圖層，

選中多個(gè)你要輸出的圖層，設(shè)置保存目錄，再點(diǎn)擊導(dǎo)出選中圖層按鈕，選中多個(gè)圖層進(jìn)行導(dǎo)出，默認(rèn)會(huì)逐一輸出每個(gè)，如果希望將選中的多個(gè)圖層合并導(dǎo)出，可以在右上角的設(shè)置里面進(jìn)行設(shè)置。3、導(dǎo)出固定尺寸圖片

對于大多數(shù)icon而言，在輸出的時(shí)候，會(huì)將icon周圍的透明像素進(jìn)行裁剪，只保留有像素的內(nèi)容。這樣輸出的圖片尺寸即是icon的絕對像素尺寸。但是很多時(shí)候，我們處于美觀統(tǒng)一、開發(fā)易用等因素，希望能夠輸出固定的icon尺寸，這時(shí)就需要用到Cutterman的“固定尺寸”設(shè)置。（1）注意：在固定尺寸的位置填入你希望輸出的寬和高，必須要比icon的尺寸要大。（2）注意

：設(shè)置固定尺寸后，icon會(huì)默認(rèn)居中顯示。如果設(shè)置的尺寸比icon尺寸小，會(huì)出現(xiàn)icon被裁剪的現(xiàn)象。任務(wù)實(shí)現(xiàn)026、任務(wù)實(shí)現(xiàn)

頁面的種類成千上萬，希望通過案例可以做到舉一反三。下面以個(gè)人中心頁為例進(jìn)行頁面切圖。1、在/zh/cutterman下載對應(yīng)的cutterman切圖插件（注意選擇適合PS的版本，不然安裝不上），解壓下載的安裝包,里面是一個(gè)exe文件,雙擊打開。不要修改默認(rèn)的安裝路徑,點(diǎn)擊安裝即可2、安裝完成后重啟PS，在菜單欄->窗口->擴(kuò)展里打開插件，登錄cutterman賬號(hào)3、打開cutterman插件后，可以看到，切圖的三種模式，分別是PC端、IOS、安卓三種，可以自由切換，點(diǎn)擊一下即可選中，再次點(diǎn)擊就是取消。4、直接選中要切的圖層，如果圖片有多個(gè)圖層就可以將圖層全部選中。這里以ios端導(dǎo)出待發(fā)貨圖標(biāo)為例，勾選【合并導(dǎo)出選中圖層】選項(xiàng)，選擇好存儲(chǔ)位置，然后點(diǎn)擊上面的【導(dǎo)出選中圖層】按鈕。5、如果文件較小的情況下，幾乎是瞬間下載，打開存儲(chǔ)位置就可以看到已經(jīng)切好的圖片。6、因?yàn)樽罱K輸出的切圖非常多，所以需要一個(gè)