Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

9 個你應該知道的 Sketch 功能

by
Difficulty:BeginnerLength:ShortLanguages:

Chinese (Traditional) (中文(繁體)) translation by Erica Wong (you can also view the original English article)

Sketch 是一個適合設計師用的繪圖應用程式,讓設計師們更能做出更漂亮的網頁設計。如果你是初用者,你可能不知道 Sketch 的一些隱藏功能。今天,我將為你說明這些好用的技巧讓你加快你的設計流程。

等一等。什麼是 Sketch?

至去年 Sketch 第2版新舔的顏色設定後,越來越多的設計師已經切換用 Sketch 了。它的簡單的界面和性能使它比 Photoshop 更好用(不要忘了,Photoshop 最初是專為編輯和處理圖像以設計的),而其繪圖工具也很適用在向量圖形(vector) 上。Sketch 不是點陣圖影像(bitmap) 編輯工具。它配備了一個像素(pixel) 預覽,讓你更容易設計界面和圖標。

1. 智慧型物件(Smart Object) 插件 - Symbols

最近 Tisho Georgiev 發布了一個非常好用的 Sketch 插件,稱為Symbols。它能讓設計師在設計時建立智慧型物件(Smart Object) ; 一個 Sketch 目前不支援的功能。

智慧型物件(Smart Object) 允許你在文件中重複使用同一個圖像。若你需要更改所有的圖像,你只需要編輯其中一個智慧型物件(Smart Object) ,然後按 CMD + E 便可。


這個視頻會讓你更了解它的使用方法。

2. 智慧型參考線(Smart Guides)

Sketch 支援多個鍵盤快捷鍵。"智慧型參考線(Smart Guides)" 便是其中一個。

2-smart-guides

只要抓住一個圖像,然後按住 ALT(或 OPTION),智慧型參考線(Smart Guides) 便會顯示出來,同時也會顯示所選圖像和文件最大高度或寬度之間的距離。如果你要檢查所選圖像與另一個圖像之間的距離,只需將滑鼠懸停在那圖像上,智慧型參考線(Smart Guides) 便會自動調整。

3. 簡易格線(grid)

雖然製作格線(grid) 不難,但 Sketch 令製作格線(grid) 更簡單容易!

3-grids

Sketch 有一個稱為 "Create grid" 的功能。點擊工具欄中的四個方格(如圖右上方的圖像),就會跳出一個菜單,在這裡你可以設定你所需的行數和列數。

如果你設定每個物體四周的間距,你可以選擇 Boxed 選項。

4. 畫板(Artboards) 預設

當你使用 畫板(Artboards)(Sketch 有很多默認的畫布(Canvas))時,畫板的預設也是很有用的。點擊工具欄上的畫板(Artboards) 按鈕時,你便可以從工具欄中選擇不用的設定。

這些是可以立刻使用的設定。
這些是可以立刻使用的設定。

這些預設的設定可讓你更有效地編寫你的工作。例如,你可以建立一個有不同大小的畫板(Artboards)的文件,那你就不必記住各個圖標或圖像的尺寸了!

5. 範本(Templates)

Sketch 可讓你直接從範本(Templates) 創建一個新的文件,點擊菜單選項 File > New from template 便可。你也可以把當前的文件保存為範本(Templates),點擊 File > Save as template 便成。

5-templates

這是個又方便又好用的功能。例如,為iOS設計時,你建立一個包括狀態欄和菜單選項的文件檔,然後將其保存為範本(Templates),這樣你便可以用在其他iOS設計中。

6. 快捷鍵(Shortcuts)

之前也提到,Sketch 提供了許多快捷鍵。例如 Robert van KlinkenJeffrey de Groot 寫的 Sketch Shortcuts。它(幾乎)說明了有每個 Sketch 的快捷鍵的使用方法。

您也可以通過OS X的系統偏好設置 設定你自己的快捷鍵。其中一些例子都寫在Sketch Shortcuts的底部。

sketch-settings

7. 顏色編輯清單(Color Picker)

想輕鬆地從屏幕上挑選顏色,只要按下 CTRL + C ,一個放大鏡便會出現,方便你選擇你想要的顏色。即方便又簡單。

8-color-picker

8. 完美的像素

這可是 Sketch 最好的功能!它能把每個像素點準確地定位。

例如,你的圖層(layer) 中的圖像包含不完整的像素(pixel),或位置點不完整。你可能會為(在其他的圖形軟件)調整這些不完整的像素點而頭疼,但在 Sketch 中,只要點擊Edit > Round to nearest pixels edge(或者自定快捷鍵),整個圖層(layer) 的圖像和圖像位址便會自動調整。

7-round-to-nearest-pixels
給你的建議:自定快捷鍵!

當你需要匯入圖標的時候,這個功能可讓不完整的像素(pixel) 調整至正數。

注:如果你的設計是用@2X(用於高像素密度的屏幕),但卻要在匯出@1X時,要留意每個位置的像素都需要是 2 的整除,否則像素又會變得不完整和模糊。

注 2:Meng To 的文章會有更多關於完美像素的說明。

9. 匯出(Exporting)

Sketch 擁有最強的匯出功能,只要點擊 File > Export 和畫出你所需要的切片(slices) 便可。你也可以用@1x匯出@2x的解像度。相對地,你也可以用@2x匯出@1x的圖像。

sketch-export

Sketch 提供很多切割(slices) 功能。在菜單中點選 File > Add Slice from Selection,你可以選擇你剛建立的圖層(layer),然後點選那圖像便會自動畫出跟圖像一樣大小的切片。

結論

Sketch 還有許多實用,簡易又快捷的功能和插件,你可以用上述的技巧提高你的工作流程。當然如果你有什麼意見,也歡迎留言!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.