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

切圖的目的

切圖的目的是跟前端工程師進(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í)際開(kāi)發(fā)過(guò)程中以1266×585pt(pt是iOS開(kāi)發(fā)單位，像素倍率為@2x時(shí)，1pt=2px)進(jìn)行開(kāi)發(fā)，切圖資源尺寸為偶數(shù)，可以被2整除。偶數(shù)是為了保證切圖資源在前端工程師開(kāi)發(fā)時(shí)能清晰顯示。如果是奇數(shù)的話會(huì)導(dǎo)致邊緣模糊，下圖所示為偶數(shù)和奇數(shù)對(duì)比。

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

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)行的，然后再輸出切圖。

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

3、降低文件大小

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

縮前后對(duì)比

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ū)域也比較常見(jiàn)。

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

切圖輸出類型

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

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

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

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

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

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

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

3、圖片類切圖

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

4、可拉伸元素切圖

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

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

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

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

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

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

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