移動端UI設計項目實戰(zhàn)教程 項目八-任務四-完成頁面切圖-任務實現(xiàn)

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

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

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

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

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

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

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

切片導出：支持各種圖片格式輸出如png、jpg、gif、web等等，同時支持單個圖層輸出、多個圖層合并輸出、導出固定尺寸圖片輸出。1、導出單個圖層，

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

2、導出多個圖層，

選中多個你要輸出的圖層，設置保存目錄，再點擊導出選中圖層按鈕，選中多個圖層進行導出，默認會逐一輸出每個，如果希望將選中的多個圖層合并導出，可以在右上角的設置里面進行設置。3、導出固定尺寸圖片

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

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

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