Sketch進階教程-全面的圖像處理方案

Sketch Mac是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。能夠滿足網頁、用戶界面、圖標等的設計需求。 Sketch是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。製作出漂亮的圖形是一件很有挑戰性的事情,你所需要的是一款精心設計的應用 程序。此次小編帶大家瞭解基本工具使用方法。

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

12083224_3da865b486.jpeg

1、怎麼把圖像添加到sketch中?
有兩種方式把圖像添加到Sketch中,一種是通過工具欄“Image…”插入圖像;另外一種方式則較爲常用,即所謂的複製粘貼(快捷鍵Command⌘+C/Command⌘+C)圖像到畫布中。

12083236_d753a1b7bb.jpeg

2、Sketch圖像處理方式

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

Sketch處理方式1:通過檢查器的Size調整“Width”和“Height”的數值控制圖像大小,注意,點擊鎖定的話,圖像會按照比例來進行調整。

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

12083335_72c391b744.jpeg

(2)轉換格式
應用說明:不同格式的圖像存儲大小和分辨率都不同,不同平臺也限制了圖像採用何種格式上傳,所以往往需要對圖像的格式進行處理。

Sketch處理方式:和調整圖像大小方式2基本一致,只是從輸入比例變成了選擇圖像格式。Sketch支持導出PNG、JPG、TIFF、SVG等常用的圖片格式。12083416_5827d6fbff.jpeg

(3)裁剪形狀
應用說明:把通過裁剪來調整圖像的大小,“隱藏”不需要的區域,也可以通過Sketch的Mask(蒙版)來添加遮罩處理。

Sketch處理方式:鼠標雙擊需要處理的圖像,即可在檢查器中看到“Crop(裁剪)”菜單,在圖像上拖動選中需要裁剪的區域,點擊Crop(裁剪)即可。至於蒙版的處理方式,可以參考之前的蒙版教程文章《Sketch基礎教程:蒙版(Mask)的使用詳解》

12083617_e39dc1500a.jpeg

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

Sketch處理方式:鼠標雙擊需要處理的圖像,拖動選中需要消除的區域,點擊“fill selection(填充選區)”,即可看到消除的區域被默認紅色填充了。然後,我們可以通過顏色拾取器,把填充顏色和填充區域的顏色保持一致即可。

12083643_d28bc1c966.jpeg

(5)佈局重組
應用說明:靈活運用截圖軟件和自帶的裁剪、消除功能,我們可以對一個產品的內容佈局進行調整,這是一種高效、可行的設計方法。
Sketch處理方式:截圖+消除內容+裁剪形狀,任意調整位置。

12083702_5fcfe75c4c.jpeg

以上就是小編爲大家帶來的Sketch進階教程-全面的圖像處理方案。還有更多詳細、實用的功能以及相關軟件sketch和其他Mac軟件獲取,大家快來Macdown.com自行探索一番吧。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章