在第五期夜雨玩轉(zhuǎn)Sketch中，我們虛構(gòu)并上手做了一個項(xiàng)目首頁的原型，中間涉及到一些圖像和icon的處理沒有在前面系列教程中體現(xiàn)，所以第六期，我們將講述如何使用Sketch處理圖像并具體應(yīng)用到項(xiàng)目中去；在第七期，我們將學(xué)習(xí)怎么畫一枚icon。

注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本。

1.本期內(nèi)容導(dǎo)讀

在實(shí)際交互設(shè)計工作中，我們通常都離不開圖像的處理，例如對過大的圖像進(jìn)行大小的調(diào)整或者裁剪，可選擇的圖像處理工具也很多，但是Sketch自帶的圖像處理特性能很好地滿足我們簡單的圖像處理要求，一站式解決所有需求。本期內(nèi)容將分別介紹Sketch的5種圖像處理方式及其應(yīng)用案例，分別是：調(diào)整大小、轉(zhuǎn)換格式、裁剪形狀、消除內(nèi)容、布局重組。

2.怎么把圖像添加到sketch中？

有兩種方式把圖像添加到Sketch中，一種是通過工具欄“Image...”插入圖像；另外一種方式則較為常用，即所謂的復(fù)制粘貼（快捷鍵Command?+C/Command?+C）圖像到畫布中。

3.Sketch圖像處理方式

（1）調(diào)整大小

應(yīng)用說明：我們有時候獲取的圖片尺寸過大，需要按比例調(diào)整它的尺寸，以便放進(jìn)我們的原型當(dāng)中，但又需要完整的圖像，而不是一部分的截圖。在日常中應(yīng)用中，我們通過這樣的處理方法把一些圖片處理成合適大小的QQ表情:)。

Sketch處理方式1：通過檢查器的Size調(diào)整“Width”和“Height”的數(shù)值控制圖像大小，注意，點(diǎn)擊鎖定的話，圖像會按照比例來進(jìn)行調(diào)整。

Sketch處理方式2：不在Skech中修改比例，僅通過導(dǎo)出工具控制最終的導(dǎo)出圖像大小。即使用“Slice”工具按比例導(dǎo)出，既可以自由輸入比例，例如0.65，即65%，也可以選擇安卓/IOS平臺的尺寸。第2種方式的好處是不改變原圖大小。

（2）轉(zhuǎn)換格式

應(yīng)用說明：不同格式的圖像存儲大小和分辨率都不同，不同平臺也限制了圖像采用何種格式上傳，所以往往需要對圖像的格式進(jìn)行處理。

Sketch處理方式：和調(diào)整圖像大小方式2基本一致，只是從輸入比例變成了選擇圖像格式。Sketch支持導(dǎo)出PNG、JPG、TIFF、SVG等常用的圖片格式。

（3）裁剪形狀

應(yīng)用說明：把通過裁剪來調(diào)整圖像的大小，“隱藏”不需要的區(qū)域，也可以通過Sketch的Mask（蒙版）來添加遮罩處理。

Sketch處理方式：鼠標(biāo)雙擊需要處理的圖像，即可在檢查器中看到“Crop（裁剪）”菜單，在圖像上拖動選中需要裁剪的區(qū)域，點(diǎn)擊Crop（裁剪）即可。至于蒙版的處理方式，可以參考之前的蒙版教程文章《Sketch基礎(chǔ)教程：蒙版（Mask）的使用詳解》

（4）消除內(nèi)容

應(yīng)用說明：直接在非矢量圖像上修改內(nèi)容，例如需要隱藏敏感信息，替換成新的說明文案等。這種操作技巧在處理產(chǎn)品線上問題時將會應(yīng)用得十分頻繁，例如，APP上某處文案需要修改，通過這種處理方式，可以很快地和開發(fā)溝通需要修改內(nèi)容的位置和新的內(nèi)容文案。

Sketch處理方式：鼠標(biāo)雙擊需要處理的圖像，拖動選中需要消除的區(qū)域，點(diǎn)擊“fill selection（填充選區(qū)）”，即可看到消除的區(qū)域被默認(rèn)紅色填充了。然后，我們可以通過顏色拾取器，把填充顏色和填充區(qū)域的顏色保持一致即可。

（5）布局重組

應(yīng)用說明：靈活運(yùn)用截圖軟件和自帶的裁剪、消除功能，我們可以對一個產(chǎn)品的內(nèi)容布局進(jìn)行調(diào)整，這是一種高效、可行的設(shè)計方法。

Sketch處理方式：截圖+消除內(nèi)容+裁剪形狀，任意調(diào)整位置。

PS：最近都在寫Sketch工具教程文章，希望融入交互設(shè)計方法論和實(shí)踐進(jìn)去，如果你有想要了解的，歡迎評論或者簡信和我溝通。