PS切圖：原則和注意事項(xiàng)

更新時(shí)間:2022年04月04日16時(shí)12分來源:傳智教育瀏覽次數(shù):

切圖的目的

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

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

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

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

2、圖標(biāo)切圖

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

圖標(biāo)切圖

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

3、降低文件大小

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

降低文件大小

縮前后對比

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

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

像素大小要求

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

切圖輸出類型

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

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

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

切圖和效果圖對比

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

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

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

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

3、圖片類切圖

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

4、可拉伸元素切圖

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

可拉伸元素切圖