PS切圖：原則和注意事項

切圖的目的

切圖的目的是跟前端工程師進行團隊協(xié)同工作，切圖輸出時應(yīng)盡可能的降低工作量，避免因切圖輸出而導(dǎo)致的重復(fù)工作，下面是一些需要注意的事項。

1、切圖尺寸為偶數(shù)

移動端手機的屏幕尺寸大小都是偶數(shù)，比如iphone 7的屏幕分辨率是2532×1170像素。工程師在實際開發(fā)過程中以1266×585pt(pt是iOS開發(fā)單位，像素倍率為@2x時，1pt=2px)進行開發(fā)，切圖資源尺寸為偶數(shù)，可以被2整除。偶數(shù)是為了保證切圖資源在前端工程師開發(fā)時能清晰顯示。如果是奇數(shù)的話會導(dǎo)致邊緣模糊，下圖所示為偶數(shù)和奇數(shù)對比。

偶數(shù)和奇數(shù)對比

2、圖標(biāo)切圖

根據(jù)設(shè)計尺寸輸出設(shè)計基準(zhǔn)圖是以iOS系統(tǒng)屏幕分辨率750×1334像素情況下設(shè)計的，在切圖時要明確設(shè)計以@2x進行的，輸出@2x和@3x的切圖即可滿足iPhone手機主流機型，下圖為@2x和@3x圖標(biāo)切圖。如果是改版Android系統(tǒng)分辨率720×1280像素情況下，在切圖的時候就需要明確設(shè)計是以xhdpi進行的，然后再輸出切圖。

@2x和@3x圖標(biāo)切圖

3、降低文件大小

有些圖片也需要切圖，如引導(dǎo)頁、啟動頁、默認(rèn)圖等。但是圖片切圖一般文件大小都較大，不利于用戶在使用App過程中加載頁面。而且前端工程師會希望圖片不影響識別的情況下壓縮到最小。降低文件大小可使用Photoshop軟件自帶的功能壓縮文件，也可通過一些圖片壓縮網(wǎng)站進行壓縮。壓縮過的文件用肉眼基本上分辨不出壓縮的損失，圖7-15所示為使用TinyPng網(wǎng)站壓縮前后對比。

縮前后對比

4、可點擊區(qū)域不低于44像素

切圖時添加一些空白面積，增加觸碰面積，保證用戶可以點擊到。設(shè)計基準(zhǔn)圖中圖標(biāo)大小可以和切圖大小不一致，記得要保證切圖面積，可點擊區(qū)域不低于44像素。圖7-16所示為圖標(biāo)實際大小和增加空白面積大小。但是伴隨著手機分辨率的提升，可點擊區(qū)域也有所提升如66像素和88像素的可點擊區(qū)域也比較常見。

圖標(biāo)實際大小和增加空白面積大小

切圖輸出類型

切圖輸出類型主要分為應(yīng)用型圖標(biāo)切圖、功能型圖標(biāo)切圖、圖片類切圖和可拉伸元素切圖四類，下面將進行詳細(xì)講解。

1、應(yīng)用型圖標(biāo)切圖

App的應(yīng)用型圖標(biāo)會被運用在很多不同的地方展示，如手機界面、AppStore以及手機的設(shè)置列表，所以App應(yīng)用型圖標(biāo)需要多個不同尺寸的切圖輸出。以及兩個平臺中參數(shù)不同，在輸出時要把雙平臺的尺寸全部輸出切圖。需要注意的是iOS系統(tǒng)應(yīng)用型圖標(biāo)切圖需要提供直角的圖標(biāo)切圖，如圖7-17所示，因為iOS系統(tǒng)會自動生成圓角效果。

iOS系統(tǒng)應(yīng)用型圖標(biāo)切圖

2、功能型圖標(biāo)切圖

對于iOS系統(tǒng)界面中的功能型圖標(biāo)，由于Plus版本的切圖是設(shè)計基準(zhǔn)圖的1.5倍，輸出切圖為@3x即可，圖7-18所示為站酷功能型圖標(biāo)@2x和@3x的對比。默認(rèn)情況下，@3x是@2x的1.5倍。到時前端工程師會將切好的@2x和@3x圖放到庫中，iOS系統(tǒng)會根據(jù)設(shè)備型號自動挑選合適的尺寸使用。

站酷功能型圖標(biāo)@2x和@3x對比

3、圖片類切圖

圖片類切圖如啟動頁、引導(dǎo)頁、提示頁面等需要切圖的圖片。有些需要全屏切圖、有些則需要局部切圖，如圖7-19紅框標(biāo)識所示。如果是全屏切圖最好以手機分辨率大尺寸進行切圖適配。如果頁面是背景圖和底色結(jié)合，只需要切背景圖，而背景色只需告訴前端工程師色值即可。如果背景圖是單個元素重復(fù)平鋪只需切單個元素即可，告訴前端工程師頁面尺寸，將單個元素進行平鋪。

4、可拉伸元素切圖

可拉伸元素是指按鈕在切圖過程中可對切圖進行瘦身壓縮的元素，原理是不可拉伸區(qū)域不變?？梢蕴嵘鼳pp中的加載速度和節(jié)省手機空間，這種切圖方式在iOS中叫平鋪切圖，Android中叫做點九圖。它是為了提升圖片在客戶端內(nèi)的加載速度，保證安裝包的輕量化，圖7-20所示為在iOS中的平鋪切圖和Android中點九圖的形式。

注意：平鋪切圖只需要表明什么區(qū)域可拉伸即可。而點九圖則需要再繪制1像素的黑線表示內(nèi)容展示區(qū)域，1像素的黑點表示的是一條完整的可拉伸區(qū)域，以及切出的圖片后要人為的添加后綴.9

網(wǎng)站logo有什么作用？如何設(shè)計網(wǎng)站logo？

PS:圖層切圖、切片切圖、PS 插件切圖

“年終總結(jié)”這個痛怎么破？

扁平化設(shè)計風(fēng)格的特點?扁平化優(yōu)缺點

傳智教育UI/UE設(shè)計培訓(xùn)課程