花最少的時間就能上手的繪圖工具,讓你專注于設計本身。

本手冊翻譯自 Sketch 官方用戶手冊,已更新至最新的 Sketch 3 版本。

如果你的 Sketch 還沒有升級 ,你也可以查看這個 Sketch 2 用戶手冊

歡迎使用 Sketch 3 的用戶手冊,這個手冊的内容同時适用于新手和熟練用戶。

如果你對于這個手冊的内容有任何想法和疑問,請通過郵箱 mail@bohemiancoding.com 随時聯系我們。

我們會不斷的完善本手冊。

 

 

介紹

Sketch 是一款适用于所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁,圖标以及界面設計的最好方式。但除了矢量編輯的功能之外,我們同樣添加了一些基本的位圖工具,比如模糊和色彩校正。

 

我們盡力讓 Sketch 容易理解并上手簡單,有經驗的設計師花上幾個小時便能将自己的設計技巧在Sketch中自如運用。對于絕大多數的數字産品設計,Sketch 都能替代 Adobe Photoshop,Illustrator 和 Fireworks。

 

 

為什麼選擇 Sketch

Sketch 是為圖标設計和界面設計而生的。它是一個有着出色 UI 的一站式應用,所有你需要的工具都觸手可及。在 Sketch 中,畫布将是無限大小的,每個圖層都支持多種填充模式;我們有最棒的文字渲染和文本式樣,還有一些你一定會愛上的文件導出工具。

 

必要的話,你可以用無限精準的分辨率無關模式來查看畫布,或者打開像素模式來查看每一個像素導出後的樣子。

 

但是 Sketch 并不是一個位圖編輯應用。也就是說如果你想修正一張照片或者用筆刷來畫畫,那麼這不是你要找的應用。

界面

我們将 Sketch 的界面設計的非常簡潔。最頂端的工具箱包含了最重要的操作。你可以用右側的檢查器來調整被選中圖層的内容,左側的窗口則會列出文件中的所有圖層,中間當然就是你正在創作的畫布。

 

Sketch 裡沒有浮動面闆,檢查器将會根據你選中的工具來顯示所需控件,這樣你能始終不受打擾的在畫布上創作。

畫布

Sketch 的畫布尺寸是無限的,可以向任意方向無限延伸,你将擁有絕對的自由來規劃自己的創作區域。

 

如果你想在畫布中設置一個固定的畫框,你隻需新建一個或多個新的畫闆。舉個例子,設計移動應用界面時,很多設計師會為應用的每一個屏都創建一個畫闆,然後排列開來以便查看。

 

你可以用無限精準的分辨率無關模式來查看畫布,或者打開像素模式來查看每一個像素導出成JPG或者PNG文件後的樣子。值得注意的是,有些效果——比如模糊——會自動将畫布的一部分以像素模式顯示,因為模糊本身就是一個基于像素的效果。

檢查器

右側的檢查器能讓你對正在編輯的圖層——有時是正在使用的工具——進行參數調整。當你選中一個圖層時,你會發現檢查器被劃分為幾個區域。

通用屬性

 

通用圖層式樣都在頂端區域:圖層所在位置,透明度,混合模式以及幾個特殊選項——比如調整矩形内角半徑和多邊形的不同點模式。

樣式屬性

 

邊框和填充屬性都有他們獨自的區域,你可以勾選左上方的小方框展開他們,并顯示出具體的選項。如果你點擊顔色按鈕,你會發現檢查器滑倒一邊,出現新的專門的顔色檢查器,你隻需要單擊頂端的“後退”按鈕便會回到主檢查器。當你選中了其他圖層,同樣會自動回到主檢查器。

圖層列表

圖層列表列出了所在頁面的所有圖層(和切片),每個塗層都會有一個小小的預覽。你可以在這裡:查看塗層是否被鎖定,不可見,使用了蒙闆或标記為可導出;重新排列圖層,或者給圖層添加布爾運算,比如減去頂層形狀;對圖層進行建組或者重命名來管理他們。

 

多頁面操作

 

Sketch支持多頁面操作,你可以在圖層列表上面的按鈕裡面添加/删除或者轉換到其他頁面(或者用鍵盤上的 Page Up/Page Down來切換)。圖層列表始終隻會顯示當前頁面的圖層。

 

畫闆

 

在圖層列表裡,有白色背景一欄的便是畫闆,你可以把畫闆視為設計中的頂層對象,所以一個畫闆不能被嵌入另一個畫闆。

蒙版

 

在圖層列表裡,那些使用了蒙版的圖層名前會有一個小點,它的蒙版則是底下緊接着不帶小點的圖層。了解更多關于蒙版。

布爾運算

 

每個圖形都可以包含多個子路徑,他們會以組的形式呈現在圖層列表中,伴随一個下拉箭頭顯示具體的子路徑。每一層子路徑都可以單獨設置布爾運算,決定和它的下一圖層以什麼方式組合。圖層列表能清晰的展現子路徑的組合方式,同時方便你随時調整更改。

符号和共享式樣

 

符号是一種特殊的組,他們可以出現在文件的多個地方。符号會以紫色文件夾圖标呈現在塗層列表中——正常編組則是藍色的文件夾。了解更多關于符号。

 

共享式樣可以使多個對象(圖形以及文本)的式樣保持一緻,如果一個圖形或者一段文本使用了共享式樣,他們的預覽小圖标會顯示成紫色,而不是标準的灰色。了解更多關于共享式樣。

工具欄

Sketch 的工具欄涵蓋了你創作當中所需要的所有工具。

 

在默認工具欄中,第一組工具是用來添加新圖層的:圖形、圖片、符号等等。

 

編組 (Group) 和取消編組 (Ungroup) 能讓你有條例的組織文件。

 

接下來的幾個工具則都是用來編輯現有圖層:旋轉 (Rotate),變形 (Transform), 通過布爾運算來合并圖層,以及在圖層列表中上移或下移圖層。

 

工具欄最後的導出(Export) 按鈕 同時也是一個切片工具,你可以在這将你的作品導出為一個或多個位圖或者矢量文件。

 

不同于其他繪圖應用,Sketch把常用工具放在頂端的工具欄,而不是垂直排列的工具箱,但如果需要,你可以通過右擊工具欄,進入“定制工具欄…” (Customize toolbar…) 來添加工具和快捷鍵。·

圖層

圖層是 Sketch 中最基本的構成單位。不同于其他将圖層和對象混為一談的應用,在 Sketch 裡每個對象都有自己的圖層。所以在這個手冊中,我們所說的“圖層”和“對象”其實是一樣的意思,這兩個詞是可以相互替換的。

 

編組和畫闆能讓你在 Sketch 裡有效的管理内容,他們也會被視為多個圖層的組合。要想添加新的塗層,你可以單擊工具欄中的 insert 按鈕。

添加圖層

添加圖層最簡單的方式便是直接從工具欄選擇一個标準圖形。比如選中矩形工具,光标會變成一個右上角有個小矩形的十字圖案。這時你隻需在畫布上單擊并拖動鼠标來添加你想要的形狀。松開鼠标,随即完成這個矩形,并開始編輯它。

高級選項

 

添加新圖層是非常容易的,但我們同時提供了幾個隐藏快捷鍵來幫助你方便的繪制。比如說你可以按住 shift 鍵來繪制等邊圖形;按住 option 鍵來從中心繪制圖形,而不是從左上角繪制。

 

如果你想改變圖形的起始點,你需要按住空格鍵,這樣你将會修改起始點,而不是圖形的大小。

選擇圖層

你隻需單擊來選中圖層,這時選擇框的四角和邊框上會出現8個小手柄。

 

值得注意的是,萬一你沒看見這些小手柄,那麼有可能是你不小心将手柄隐藏起來了,你可以進入 視圖 菜單欄,打開 顯示選區手柄 (View > Show Selection Handles)。

 

 

同時選擇多個圖層

 

你可以按住鍵盤上的 Shift 鍵來同時選擇多個圖層,當你點擊其他圖層時,之前選中的圖層也會為你保留。如果你按住 Shift 鍵去點擊一個已經選中的圖層,則會取消選擇它。

 

如果你在畫布上任一點單擊并拖拽出一個矩形,則會選中這個矩形中的所有圖層。你可以繼續按住 Shift 鍵或者command鍵來增加圖層或者取消個别已經選中的圖層。

 

如果你同時按住 option 鍵,則隻會選中完全被包括在所畫選取内的圖層。

 

 

重疊圖層

 

為了讓選擇某一圖層底下的圖層更容易,你可以右擊鼠标,從菜單中選擇 “選擇圖層”(Pick Layer),便會顯示出鼠标底下的所有圖層列表。

 

需要注意的是,在 Sketch 2 裡,這個功能是通過快捷鍵 option + command 來實現的,在 Sketch 3 裡将被右擊鼠标代替。

 

另一個方便的快捷鍵是 option 鍵,按住 option 鍵,Sketch 會選中第二層圖層,而不是最上層的。如果某個區域有多個圖層重疊,而你想選擇第三層,那麼還是需要用到上面說的右擊鼠标的方法來選擇了,有些情況下,你會發現這是個非常方便的小功能。

 

 

快速選擇組中的圖層

 

編組能方便的管理内容,有時還能預防無意的編輯操作。單擊組,整個組會被視為一個圖層,雙擊才會進入組内選擇具體圖形。

 

當然,有時你肯定想從深深的編組層級中直接選中某一具體圖層,你可以按住 command 鍵,來直接選擇埋在組裡的圖層,無需不停的雙擊以進入更深的層級,這将省去你不少的時間。

 

如果你同時按住 shift 鍵,則能選擇多個圖層。

移動圖層

你可以選中任意圖層,并拖動鼠标來移動他們。按住 Shift 鍵來拖動,則會讓圖層嚴格按照垂直或者水平方向移動。

 

當你移動某一圖層(或者修改尺寸)時,Sketch會自動幫你将它與相鄰的圖層對齊。如果沒出現自動對齊,那可能是參考線功能被不小心關閉了,你可以在 視圖 菜單裡打開顯示參考線 (View > Show Layer Guides)。标尺 (Rule),參考線 (Guides) 和 網格 (Grid) 是一個大的話題,我們會在另一章節單獨來讨論。

 

如果你先按住 alt 鍵再拖動圖層,你其實會創建一個原圖層的拷貝,原來的圖層還是會在最初的位子。(如果你接着按快捷鍵 command + D,Sketch則會重複你剛才的操作,複制出一個一樣的圖層。)

 

 

移動一個被遮蓋的圖層

 

這是另一個重疊圖層很麻煩的地方,正常情況下,你單擊并拖動一個圖層它會被立即選中,并移到新的位置。

 

大多數時候這是非常方便的,但如果你想移動一個完全在另一圖層底下的圖層,這就會變得非常礙事,因為會直接選中并移動最表面的圖層。

 

解決這個問題,你需要按住 option + command 鍵,再來單擊你需要的圖層并移動它,你甚至可以單擊畫布上完全不同的區域,Sketch 仍會為你保留之前的選區。

 

需要注意的是:在 Sketch 2 中這個功能的快捷鍵是 A 鍵,但在 Sketch 3 中,A 鍵被重新設定為添加畫闆的快捷鍵。

改變大小

8個手柄不僅會向你指示出選區,還可以幫你修改圖層的大小。你可以拖動任一個手柄來調整,如果你同時按下Shift 鍵,圖層的長寬則會按等比例變化。

 

拖拽圖形某一邊中間的手柄會隻調整圖形的長或寬,想要同時調整,則直接拖拽圖形的角。

 

如果你按住 option 鍵,圖層會從中間向四周改變大小,而不是從對角開始變化。

 

 

鍵盤

 

你可以直接使用鍵盤調整圖層大小。相對于鼠标,使用鍵盤能更好實現精确到像素的調整。你需要按住 command 鍵和方向鍵來操作。⌘→會将圖層寬度增加 1px,⌘←則會将寬度減少 1px。同樣的,⌘↓ 和 ⌘↑則分别将長度增加和減少 1px。如果你同時按住 shift 鍵,每一次更改的數值将會變成 10 px。

 

 

縮放

 

當你改變一個圖層的大小時,它的式樣元素并不會随之變大變小:一個 10x10的圖形上 1px的描邊在這個圖形被拉伸至 50x50的時候,将仍保持 1px的描邊。想要更改圖層大小的同時一起更改式樣,那就使用編輯菜單當中的縮放工具吧。

編輯圖層

雙擊一個圖層,或者單擊工具欄中的編輯按鈕就可以進入圖層的編輯模式,接下來發生什麼則取決于你想編輯的是什麼類型的圖層了,請接着閱讀相關的内容。

 

請記得,你可以單擊圖層外任一點,或者按下 Return 鍵或 Escape 鍵,來随時退出圖層的編輯模式。

圖形

在你的文件中最常見的圖層應該就是圖形了。Sketch 提供了多種不同的基本圖形供你選擇:圓形,矩形,星型等等。這幾個圖形中會有幾個有趣的額外選項,比如星型和圓角矩形。

 

你隻需單擊工具欄中的 添加(Insert)>圖形(Shape) 按鈕,選擇一個圖形,便可以開始創作。當你的鼠标在畫布上拖拽的時候,Sketch 會提示你這個圖形的大小,松開鼠标,便會成功添加圖形,右邊的檢查器上也會立即顯示出這個圖形的相關信息,又是也會出現相應的額外選項。

 

 

額外選項

 

有些圖形會帶來幾個有趣的額外選項,你最經常遇到的便是星型和圓角矩形,你可以調整星型的半徑和角的數量,也可以改變圓角矩形的圓角半徑。

 

 

圖形術語

 

點是組成每一個圖形的基本單位,他們會被直線或曲線連接成一條路徑。一個圖形可以包含一個或多個路徑。多個路徑則是通過布爾運算組合在一起的,想象大小兩個圓,小圓被放置在大圓上把大圓“打”出一個洞。這個将簡單圖形組合成複雜圖形的布爾運算我們會在另一章節詳細讨論。

 

圖形編輯

每當你繪制一個新的圖形或是編輯一個現有的圖形,你其實都是在和點做交互,你在屏幕上看到的是 Sketch 将這些點連接起來的線。有時是直線,有時是曲線。

 

舉個例子,先通過工具欄的 添加 > 圖形 > 矩形 (Insert > Shape > Rectangle)來添加一個矩形,完成後再雙擊它開始編輯,你會看見每個角上都會有一個小圓點,你可以單擊并拖拽這些點來移動。需單擊圖形邊上任意點單擊就可以添加新的點,要想删去某一個點,隻需選中它,然後按 delete 健。

 

如果你想将一條直線變為曲線,先雙擊一個點,它的兩側會出現兩個新的小手柄,他們分别控制這這一點兩邊線條的彎曲程度。你可以把這些小手柄理解為他們把線條朝自己的方向拉伸。

 

點模式

 

點的控制手柄有幾種不同的模式,他們決定了之間會出現怎樣的線條。

 

在編輯圖形的時候,檢查器會顯示出四種不用的點模式:

 

・直線角 (Straight):當你剛剛點擊畫布的時候,會添加一個直角,也就是說沒有任何錨點,你所得到的便是一條直線。

・鏡像 (Mirrored):錨點會鏡像對應。兩個錨點将會與主點距離相同并且正好相互對立。當主點并非直角時,鏡像便是默認的點模式。

・不對稱 (Asymmetric):兩個錨點到主點之間的距離是獨立的,但他們依然相互對應。

・斷開連接 (Disconnected):錨點之間完全獨立,互不影響。

如果一個角被設定為直線角,你也可以用底下的滑塊将直線叫變為圓角。如果你通過 添加 > 圖形 > 圓角矩形(Insert > Shape > Rounded)添加了一個圓角矩形,那麼你将得到一個四角被設定了默認值的圓角矩形。

 

能夠獨立控制每個點,代表着你可以為每個點都設置不同的值,比如說你可以輕松的讓一個矩形的上面兩個點為圓角,底部兩個點為直線角。

繪制 VS 編輯

 

除了用一個現有的圖形工具來添加圖形,你也可以用矢量工具自己繪制一個。進入菜單欄 > 添加 > 矢量工具 (Insert > Vector),在畫布上單擊添加第一個錨點,繼續單擊别處添加第二個錨點。

 

你會看見有線條連接兩點,接着單擊别處但不要松鼠标,拖拽錨點以繪制曲線。你可以繼續畫上幾條線,最後單擊第一個錨點,便能繪制出一個封閉的矢量圖形,完成編輯。

 

不管是繪制新的圖形還是編輯現有的圖形,選擇和添加新的錨點的這些操作方法都是一樣的。

封閉路徑 VS 開放路徑

 

一個路徑可以是封閉的也可以是開放的。封閉圖形的最後一條邊會與第一條相連接,開放圖形則會在起點和終點間留出一個間隔。你可以通過菜單欄中的 圖層 > 路徑 > 關閉路徑 (Layer > Paths > Close Path),來将一個開放路徑變為封閉路徑,反之亦然。

 

針對一個開放路徑,你可以随時在編輯模式中随時添加新的錨點。

 

值得注意的是,當你為一個開放路徑設置了顔色填充,那麼這個填充會呈現出路徑已經被封閉了一樣,哪怕這個路徑的邊框仍然有間隔不完整。

快捷鍵

 

繪制矢量圖形時,你可以按住 shift 鍵再畫之後的點,Sketch會自動幫你對齊到前一點的45度角方向,這在你繪制直線時會非常方便。如果你是在兩點之間添加新的錨點時按住 shift 鍵,你便會得到兩點間的錨點。

 

如果你按住 command 鍵,單擊兩點間的線條,Sketch則會幫你在線條的正中間添加錨點。

選中多個點

 

有一個不那麼明顯的功能是你可以同時選中多個點,一起移動它們。在選擇點的時候按住 shift 鍵就好,你會看見被選中的點中心是白色的,而沒被選中的點中心是灰色的。

 

另從畫布空白處單擊并拖拽出一個矩形選區。如果你一直按住了 shift 鍵,則會将新選區和之前的點一起選中,如果沒有按住 shift 鍵,則會取消之前的選擇,隻保留新選區内的點。

布爾運算

如果Sketch的标準圖形中沒有你想要的圖形,那就需要你自己創作了。你的第一個想法也許是用矢量工具來手繪出來,然而你會發現很多複雜的圖形都可以輕易地被拆分成基本的圖形,布爾運算正是為了幫你實現這一點——将幾個基本圖形結合成一個複雜圖形。

 

子路徑

 

Sketch支持動态的布爾運算,但在我們做進一步讨論之前,先來快速的回顧一下矢量圖形。Sketch當中的大多數矢量圖形都隻含有一系列的錨點——也就是說都隻有一個路徑。然而一個圖形可以有多個子路徑,至于這些子路徑最終是什麼效果,則取決于他們是如何組合的。

 

在Sketch當中使用布爾運算,Sketch會通過具體的布爾算法将最上層的圖形變成下一層圖形的子路徑。因為Sketch當中的布爾運算是動态的,所以你也可以随時調整每一個子路徑,比如你可以單獨調整其中一個矩形的内角半徑。

 

布爾運算

 

我們有4種不同的布爾運算,你可以根據需要來具體選擇:

 

 

 

 

 

 

・合并形狀 (Union):合并的結果是會得到兩個矢量區域的總和。

・減去頂層形狀 (Subtract):這一項的結果是頂層矢量的區域會從下一層的圖形上移去。

・與形狀區域相交 (Intersect):與形狀區域相交的結果是會保留原圖形重疊的部分。

・排除重疊形狀 (Difference):排除重疊形狀的結果是隻保留原圖形不重疊的部分,它是“與形狀區域相交”這一運算的反向。

圖層列表

 

當你有一個含有多個子路徑的圖形時,你可以來看看左側的圖層列表。正如編組列表一樣,圖層列表的左邊也有一個下拉箭頭,單擊它你便會看見這個圖形的子路徑列表。值得注意的是,每一個子路徑的布爾運算你都可以在右邊的按鈕中單獨修改。一個子路徑可以被設置成減去頂層形狀,它上面的一個子路徑則可以和它再相合并。

 

圖層列表的順序是從下至上的,布爾運算的工作原理也是一樣,即你所選的布爾運算将這一層和下一層的圖形相組合,他們的結果再與另一層相組合。

圖層扁平化

 

當你使用扁平化功能( Flattening),Sketch 會試着将一個圖形裡的多個子路徑呈現為一個路徑——也就是将層級結構變得更扁平。但是有些圖形是無法扁平為一個路徑的,比如說一個環狀圖形,将隻能被呈現為兩個路徑:一個是外圈路徑,一個是内圈路徑。

 

當 Sketch 不能完成扁平化的命令時,會出現一個小警告,如果你繼續堅持,那有的子路徑可能被替換,也許比之前跟少,也許和之前一樣多。

 

也許在你之前使用的繪圖應用中,你每次添加布爾運算後到要讓圖層扁平一次,但在 Sketch 當中大可不必這麼做,你可以盡情添加無數曾布爾運算,而無需使用扁平命令。

變形工具

變形工具可以通過改變點的位置或者制造一個視覺上的3D效果來使一個矢量圖形變形。Sketch裡,你可以運用變形工具變形一個或同時變形多個圖層。

 

選中一個或多個圖層,然後單擊工具欄裡的變形工具。你可以拖動四角的錨點來任意改變圖形的形狀,或者拖拽中間的錨點來同時移動兩個邊角使圖形傾斜。

 

當你從一個圖形的一角拖拽變形,你會發現其對角也會往相反方向拉伸,這能形成對稱的變形效果,但如果你隻想往一個方向拉伸,按住 command 鍵再拖動鼠标就好。

蒙版

Sketch裡的蒙版可以讓你有選擇性的顯示出圖層的一部分。比如說在一個圖片上圓形蒙版,那麼這張圖片就隻會顯示出圓形内部的内容。

 

所有的圖形都可以變成蒙版,你隻需要先選中圖形,然後進入 圖層 > 使用圖形蒙版(Layer > Use as Mask), 所有在這個蒙版上面的圖形都會被剪切成蒙版的内容顯示出來。

 

 

限制蒙版

 

如果你不想接下來所有的圖層都被蒙版剪切,那麼你可以将蒙版和想要被剪切的圖層單獨編組,一次來限制蒙版的使用情景。一旦蒙版被編組,其他一切在組外的圖層就都不會被蒙版剪切了。

 

在無法編組的情況下,你還可以通過以下方式限制蒙版:

 

・選中一個你想從剪切蒙版中釋放出來的圖層

・進入 圖層 > 忽略底層蒙版 (Layer > Ignore Underlying Mask)

 

這一層圖層和它以上的所有圖層就都不會被蒙版剪切了。當你調整圖層順序的時候則需要格外注意,個别圖層可能會意外的被蒙版剪切。

 

圖形蒙版

 

如果上面這一系列操作聽起來很麻煩,我們也有更好的辦法:在畫布上同時選中一個圖形和一張圖片,選擇 圖層 > 用所選圖形做為蒙版 (Layer > "Mask with Selected Shape"), 就可以直接将這個圖形作為選中圖片的蒙版了。Sketch會自動為他們編組,并把其中的圖形圖層變成蒙版。

ALPHA 蒙版

 

默認情況下,一個蒙版會顯示出所在區域的圖片,隐藏其他的地方。另一種使用蒙版的方式是通過 ALPHA 蒙版建立漸變區域,來具體選擇圖片的各部分是否可見。

 

使用這個方法你可以先選中蒙版,選擇 圖層 (Layer) > 蒙版模式 (Mask Mode) > ALPHA 蒙版 (ALPHA Mask) 來實現。

剪刀工具

剪刀工具可以用來剪去矢量圖形的線條。你可以先選中矢量圖形,然後選中工具欄中的剪刀工具,或者在菜單欄中進入 圖層 > 路徑 > 剪刀工具 (Layer > Paths > Scissors) 來使用。

 

接下來你可以單擊矢量圖形的邊來剪切它。當你完成後,隻需單擊圖形外的畫布,或者按下鍵盤上的回車鍵或退出鍵即可。當你将圖形剪切到隻剩一條直線時,Sketch會自動退出剪刀工具。

複制旋轉

這是Sketch當中一個特别的工具。它并沒有出現在默認的工具欄裡,但你可以通過右擊工具欄并選中定制工具欄 (Customize)來将旋轉複制添加到工具欄上。你也可以在菜單欄中進入 圖層 > 路徑 > 複制旋轉 (Layer > Paths > Rotate Copies).

 

這個工具能複制選中的圖形,并按照一個特定的中心點旋轉。例如繪制一朵花,你可以先畫出一片花瓣,然後複制12片花瓣并旋轉,即可得到一朵花的圖案。

 

你可以選中一個圖層,激活複制旋轉工具,輸入你想要的複制數量,接着調整中心點的位置,最後單擊圖形外的畫布即可退出複制旋轉工具。

 

分離路徑

 

所有的複制圖形都會被視為原圖形的子路徑,如果你想讓他們成為完全獨立的圖層,你隻需從菜單欄進入 編輯 > 路徑 > 分離 (Layer > Paths > Split)即可。

鉛筆

你可以使用鉛筆工具來自由的繪圖。當你松開鼠标之後,Sketch 會幫你簡化路徑,順滑曲線。

 

你可以在工具欄的添加菜單中找到鉛筆,也可以用鉛筆的快捷鍵 P。

描邊寬度

描邊寬度工具讓你任意改變圖形邊框的寬度。選中一個矢量,在檢查器中設定邊框,然後在菜單欄中進入 圖層 > 路徑 > 描邊寬度 (Layer > Paths > Stroke width)。現在再點擊畫布上的圖形邊框,添加一個寬度錨點,你可以拖拽這個錨點使描邊變寬或變窄。

文本

Sketch 使用操作系統原生的字體渲染,因此文本看起來都會很棒。使用原生字體渲染的好處就是當你進行網頁設計時,你可以肯定作品中的文本都是精準的。Sketch 同時支持文本樣式,所以你可以讓多個文本圖層使用共同的字體,大小,和字間距等等。

 

添加文本

 

你可以從工具欄中選擇文本工具。當光标變成文本光标時,在畫布中任一點單擊以添加文本圖層。你會看見新的文本圖層已被選定,直接開始打字吧。

 

你也可以單擊并拖動鼠标以創造一個固定尺寸的文本框,當文本内容大于文本框時,會自動向下擴展文本框長度。而普通的不固定尺寸的文本框則會向後擴展寬度以适應文本内容。

改變文本大小

 

如果你直接拖拽文本框,文字本身的大小并不會相應改變,但是你可以拉動文本框底部的縮放手柄來一起控制文本框和文字的大小

文本檢查器

當你選中了一段文本,你會發現檢查器随之變成了編輯文本所需要的屬性。

 

在基本的圖層屬性下面是共享文本式樣的區域。

 

接着是選擇字體和字号的地方,同時你可以展開 T 按鈕,來選擇一些文字裝飾,比如下劃線。再下面則可以選擇字間距,行間距和段落間距。

文本顔色

 

編輯文本時,你可以通過 T 按鈕和字号中間的顔色按鈕為文本設置單獨的顔色。你也可以為文本設置一個通用的填充式樣,比如漸變,但是任何填充都将針對整個文本圖層,這将覆蓋剛才那個顔色按鈕的設置。

 

值得注意的是,為了在文本上渲染漸變效果,我們得将文本轉化為矢量圖形,并失去文本的子像素抗鋸齒效果。

自動大小文本框 VS 固定大小文本框

 

文本框的寬度屬性(在對齊功能的下面)可以被設置為自動或者固定。自動大小文本框意味着它會自動擴展以容納你輸入的一切文本。固定大小文本框則會在你輸入更多内容時保持現有寬度不變,而增加文本框的長度。

文本渲染

Sketch 使用操作系統原生的字體渲染,因此文本看起來都會很棒。使用原生字體渲染的好處就是當你進行網頁設計時,你可以肯定作品中的文本都是精準的。

 

Mac OS 系統使用了一種叫子像素抗鋸齒效果 (subpixel-antialiasing)的技術來提升文本渲染效果,Sketch 裡也是采用的這一種。但有時會出現一些問題警告,我們從一些底層技術來慢慢解釋。

子像素抗鋸齒技術

 

一個電腦的顯示器是由網格狀的像素組成的。文字渲染遇到的問題是普通的屏幕裡并沒有足夠多的像素來精确的展現文字的曲線。這就需要用到子像素抗鋸齒技術了,它會将那些被文字曲線遮住一部分的像素稍稍變亮一些,并且在視覺上産生更平滑的效果。

 

這就是為什麼當你在像素模式中把文本放很大觀察時,你會看見文字旁邊有一些藍色和棕色的小色塊,但是在正常大小時,這些文字效果又沒有任何問題。Windows 用戶對這種子像素抗鋸齒技術不太習慣,他們總是将 Mac 的文字渲染形容成 “很胖”。

無法實現抗鋸齒時

 

順利實現子像素抗鋸齒效果,文本必需出現在一個不透明的(有色的)背景上,因為系統需要知道最終的顔色對比結果是什麼樣的。這一點與圖層混合模式是相沖突的。

 

要實現圖層混合模式,Sketch 需要在一個透明背景上渲染所有的圖層,這樣這些圖層才能像你所期望的那樣混合在一起,最終結果再渲染回 Sketch 的白色畫布上。

 

這就會帶給我們一個問題,如果沒有一個不透明背景我們就不能渲染抗鋸齒的文字,但是有了不透明的背景我們又不能渲染圖層的混合模式了。這就意味着,一旦你的畫布中出現了一個有混合模式的圖層,Sketch 就不得不運用透明背景的算法,而無法給文字實現子像素抗鋸齒效果了。

 

你可以嘗試對比一下,将一段文本放在不透明背景上(比如填充顔色或者填充了圖片的圖形)來看看效果。

導出

 

另一個關于子像素抗鋸齒效果的問題出現在導出上。在畫布上,Sketch 可以順利的渲染有色背景上的文本。但當你将文本導出為 PNG 文件,并保持背景透明,你便會發現文本變得不太一樣——因為背景是透明的,我們無法在透明背景下渲染子像素抗鋸齒效果。

 

和之前說的混合模式一樣,你也可以嘗試對比一下,将一段文本放在不透明背景上(比如填充顔色或者填充了圖片的圖形)來看看效果。

為 iOS 設計

 

蘋果最初發布 iPhone 時,他們決定不用子像素抗鋸齒技術來渲染手機上的文字,原因是顯示器上的像素都是由紅綠藍的光形成的,而 iPhone 是可以橫屏豎屏切換的,也就是說這些本來垂直排列的紅綠藍像素會突然水平排列,這樣一來,整個子像素抗鋸齒技術就崩潰了。蘋果可以保持豎屏時候的文字渲染,放棄掉橫屏的情況,但他們理智的決定保持豎屏與橫屏的體驗一緻。

 

所以每當你在為 iPhone 或者 iPad 設計交互頁面,你都需要記住這一點:在畫布上,Sketch 會幫你對文字進行子像素抗鋸齒渲染,但在移動設備上,文字并不會被這樣處理。你需要告訴 Sketch 無需進行子像素抗鋸齒渲染,通過 Sketch > Preferences > General, 取消選擇 subpixel-antialiasing。

共享式樣

你會經常想将多個文本設置為同一式樣,共享式樣能實現這一點,他們會将你分散在不同圖層中的文本都保持同步。

 

值得注意的是,文本式樣隻能在一個文件中共享,一個文件中的不同頁面不同畫闆都能夠使用。

創建式樣

 

想要創建新的文本式樣,你需要先選中一個文本框,然後進入 圖層 > 創建共享式樣 (Layer > create Shared Style),你會發現檢查器立即顯示出了當前圖層的文本式樣,你也可以在這裡給式樣重命名。

 

如果文本屬性發生任何改變,都會自動與其他使用同一式樣的文本保持同步。

新的文本圖層

 

你可以和往常一樣添加第二個文本圖層,然後在檢查器中給這個文本使用之前創建好的式樣。另一個直接添加特定式樣文本圖層的方法是,進入 添加 > 式樣文本 (Insert > Styled Text),然後選擇你想要的式樣,接下來的步驟和添加正常的文本圖層則是一樣的了。

 

注意:在Sketch 2 中我們就已經有了文本共享式樣的功能,在Sketch 3中又進一步升級了。最大的變化就是,現在漸變填充,陰影和内陰影都能包含在文本式樣當中了。

Sketch支持文本渲染路徑,比如右邊這樣:

 

我們隻需要兩個東西來實現這個效果:一個矢量圖形和一個文本圖層。當你進入頂端的 編輯菜單 > 文本路徑 (Edit > Text on Path),Sketch會幫你把文本圖層貼合的放在它下一層的矢量圖形上面。值得注意的是,兩者的順序必須是矢量圖形在文本圖層的下面,才能得到這樣的效果。

 

放置文本圖層時你隻需将文本橫向拖至矢量圖形,這點很難用文字表述,但你可以在創作中非常直觀的看到他們如何實現。

文本路徑

文本轉化為輪廓

文本也都可以被轉換成矢量圖形,你可以執行 文本 > 将文本轉換為輪廓 (Type > Covert Text to Outlines) 的命令來實現。這會将文本中的每個字母都變成圖形,你可以向編輯任何其他圖形一樣單獨編輯每一個路徑和錨點。

 

警告

 

但是,請額外留心這個操作。不要将很長一段文字都轉化為矢量圖形,這回大大減緩文件的運行速度。

 

将一小段文字轉化為大量包含布爾運算的子路徑是非常非常消耗系統内存的,如果你不得不轉換一段文字,那麼你可以先将一段文字盡可能分成多個短文本,然後再一個個的轉化為矢量。

 

不過既然你現在可以直接在文本上運用漸變等效果,大多數時候你都不會需要将文本轉化為輪廓。

 

圖片

Sketch 不是一個位圖編輯器,所以我們的圖片編輯功能比較有限。但是 Sketch 3 改進了這一點,現在能更好的處理文件中的圖片。

 

值得注意的是,你可以将任何圖層變成一個扁平的位圖,通過進入 圖層 > 将選區變成位圖 (Layer > Flatten Selection to Bitmap)

位圖編輯

 

Sketch 中的位圖編輯有很大的提升,現在也有一個得體的 UI 來專門展示。

 

選中一個圖片,雙擊它進入編輯模式,你會看見檢查器裡出現了幾個特殊的工具,但是你需要先在畫布上設立一個選區,然後再選擇編輯工具。

 

・選區:在圖片上選擇一個矩形區域
・魔棒:單擊畫布上任一點開始拖拽以選擇一個區域,拖拽的範圍越大,容差就會越大。

 

值得注意的是,你可以按住 shift 來同時添加多個選區,或者按住 option 鍵從已有選區中取差集。一旦确立好選區,你可以剪切/複制選區來創建一個新的位圖,或者用以下四種工具再來編輯。

 

・反向:當前未被選中的區域會被選中,反之亦然。

・剪裁:剪去選區之外的區域。

・填色:為選區填充特定顔色。會出現拾色器供你選擇顔色。

・矢量化:将選區轉變為的圖形圖層,與魔棒工具結合能發揮強大功能。

 

當你結束對位圖的編輯,隻需單擊圖片外任一點,或按下 return 鍵/ escape 鍵即可退出編輯模式。

九宮格

正常情況下,你縮放一個位圖時,他們會對稱的向各個方向變化。但有時這并不是你想要的,比如說你在做一個網頁設計,你也許會想要一個 safari 裡的白色背景,随着網頁内容變多而變長。

 

我們特意增加了針對圖片的九宮格縮放來解決這個問題。進入 圖層 > 轉化為九宮格圖片 (Layer > Convert to Nine-slice Image),你會發現圖片被劃分為了9個區域。你可以單擊拖拽四個中心點的任一個來調整9個區域。

下次你再縮放這個圖片時,變隻會向某一個方向移動和伸展,并按比例的縮放中心的部分。

色彩校正

如果你想微調一張現有圖片的顔色,那可以使用檢查器中的色彩校正面闆來實現,在這,你可以改變圖片的飽和度,亮度和對比色。

 

需要注意的是,這一個不破壞原圖的操作,所以你稍後還可以再次更改這些參數。

符号

符号是 Sketch 3 裡一個重要的新功能,它讓你方便的在多個頁面和畫闆中重複運用某組内容。但他們保存在某一文件中,并不能在不同文件中共享。

 

符号本身其實就是一種特殊的組,在圖層列表中也是以組的形式出現,但是不同于普通的組的藍色圖标,符号會有一個紫色的文件夾圖标。

創建符号

要想創建新的符号,隻需選中一個組,或者幾個圖層,然後單擊工具欄中的 “轉化為符号(Convert to Symbol)按鈕”。或者進入菜單的 圖層 > 創建符号 (Layer > Create Symbol)

 

如果你所選是多個圖層,Sketch 會幫你把他們先進行編組,你會發現塗層列表裡這個組的圖标變成了紫色,你可以給這個符号重命名。

 

現在你可以再進入 添加 > 符号 (Insert > Symbol),在畫布中複用這個符号了。你可以繼續複制粘貼這個符号,Sketch 會自動将所有副本保持鍊接。

 

任何針對某一副本的編輯,都會立即同步到其他所有的副本上去。

排除文本

 

符号被運用的最廣泛的地方,一般就是網頁的 header 和 footer,或是按鈕這樣的基本 UI 元素。這個時候你就會希望symbol當中保持文本的獨立:比如每個按鈕看起來是一樣的,但裡面的文本内容各不相同。

 

實現這一點非常簡單,你隻需先選中符号中的文本,然後勾選 從符号中排除文本(Exclude Text Value from Symbol),這時起,所有針對文本的編輯就都是獨立的了。

管理符号

 

如果你在文件中創建了多個符号不方便管理,你會想把它們也編組。

 

如果你進入 添加 > 符号 > 管理符号 (Insert > Symbol > Manage Symbols),你會得到一個文件中所有符号的下拉列表,你可以在這删除或重命名符号。如果你在符号名中加入了斜杠 “ / ”,Sketch 會将它視為組的分隔标志。舉個例子,兩個分别名為 Button/Normal 和 Button/Pressed 的符号會被一起編入叫 Button 的組内。

 

值得注意的是,符号始終會按照字母順序排列,而不是創建時間。

 

 

複制符号

 

如果你想複制一個現有的符号,選中畫布上的任一副本,然後再檢查器中選擇 複制符号(Duplicate Symbol)。

 

交換符号

 

你可以給現有的副本更換符号,比如說,你可以将正常按鈕和按下的按鈕符号對調,但仍然保持他們的文本不變——如果你之前設定好符号排除文本的話。

 

式樣

檢查器會顯示出所選圖層的一切式樣選項。

 

從共享式樣開始,接着是通用透明度、通用混合模式,再下面是填充、邊框、陰影、模糊和鏡像,我們會在本手冊中分章節一一介紹,但是現在我們想先讨論幾個通用的小技巧。

 

輸入框

 

我們有一個很特别的輸入框,鼠标懸停上去時你會看見上下兩個小剪頭出現在文本區域右邊,你可以單擊他們來增減圖形的大小。如果你按住 shift 則會以 10 為單位變化。如果你按住 option 鍵,則會以0.1 為單位變化。

上下箭頭

 

一旦你開始直接編輯輸入框,上下剪頭就會消失,但這個功能依然可用,你可以用鍵盤上的上下方向鍵配合 shift 或 option 鍵來完成。

 

 

運算

 

輸入框另一個很棒的功能是可運算,簡單的入 +5 或 /2 這樣的四則運算都沒有問題,不同的運算符号也是支持的。

 

 

模糊值

 

調整文本框大小更快的方式是直接拖拽文本框底部的手柄。如果你已經很确定理想的文本框大小,隻是想看看在畫布上的效果,這能幫你做最快的測試。

 

 

返回畫布

 

你将會在畫布和檢查器中來回操作,先在畫布上選中一個對象,去檢查器修改一些數值,然後再回到畫布。然而正常情況下應用仍會關注在檢查器上,所以如果你想按 R 鍵來快速新建一個矩形,結果會是你在檢查器的輸入框中輸入了 R 。

 

絕大多數時候這都不會是你想要的,所以先按 return 鍵來确認輸入框中的任何編輯。然後再按一次 return 鍵,即可返回到畫布中,并可以使用任何其他畫布專用的快捷鍵了。

 

 

拖放

 

任一邊框、填充或是陰影都可以被拖拽,隻需在按鈕和輸入框的中間地單擊開始拖拽即可。你可以通過這個方式來重新排列填充層,或是直接拖出檢查器已删除某一填充。

删去無用式樣

 

一個高效嘗試不同式樣的方法是添加多個邊框和陰影,然後選擇性的打開或關閉一部分。也許是這個原因,我們發現很多設計師的檢查器裡都有好幾個無用的式樣。

 

為了讓删去無用式樣更方便,我們增添了一個小垃圾桶圖标,一旦檢查器中出現無用的式樣,這個垃圾桶就會顯示出來,單擊就可以删去所有的無用式樣。

複制粘貼式樣

 

這并不是和檢查其完全相關的内容,但你也可以使用編輯菜單,來在不同圖層之間複制粘貼式樣。如果你不想圖層始終保持鍊接,但又想共享其中一部分元素,這便是最好的選擇。

對齊

 

檢查器的最頂端是一些關于對齊的按鈕。右邊的6個按鈕是讓多個圖層相對自身對齊,隻有一個圖層的情況下則是與當前的畫闆對齊。

 

左邊的對齊按鈕則是讓圖層垂直或水平分布,比如說水平分布,最左和最右的兩個圖層會留在原地,其他圖層則會均勻的分布在他們中間。

圖層透明度快捷鍵

 

同樣不是嚴格和檢查器相關的功能,但每當你選中一個圖層,你都可以按 1-9 的數字快捷鍵來快速将圖層透明度從 10% 調至 90%,按下0則會将透明度調至100%。

填充

Sketch 裡你可以為圖形填充純色、漸變、圖片(或圖案)以及雜色。

填充選項從左至右分别是:

・純色

・線性漸變

・徑向漸變

・環形漸變

・圖案填充

・雜色填充

添加填充

 

你可以單擊第一個色彩填充旁邊的 + 按鈕來添加新的填充,每一個圖層都可以有無限的填充,填充會按照從下至上的順序疊加,每一層填充也都有自己可調節的混合模式和透明度。

圖案填充

 

你也可以在預設中選擇圖案來進行圖案填充,或者你也可以自己添加一張圖片,平鋪 (Tile) 或者擴展 (Fill) 的來填充。

 

・平鋪:圖像被不斷重複直至鋪滿整個區域

・擴展 :圖像被放大直至占滿整個區域

雜色填充

 

雜色填充能為你的圖層增添細小紋理,讓乏味的填充和圖形變得更生動獨特。

 

Sketch 3 現在包含了黑色、白色和彩色三種不同的雜色圖片,你還可以分别給他們設定混合模式。

邊框

除了文本之外的所有圖層都可以有多個邊框,你也可以給邊框設定不同的粗細、顔色和混合模式。

 

邊框選項從左至右分别是:
・純色填充

・線性漸變

・徑向漸變

・環形漸變

邊框位置

 

邊框可以出現在一個路徑的中間,内部或外部,如果你有一個封閉的圖形,那麼内邊框會被繪制在圖形的輪廓以内,外邊框則會在輪廓以外。

 

中心邊框則會剛好繪制在輪廓線上,一個開放圖形隻能運用中心邊框,一條直線也隻能運用中心邊框,畢竟直線根本就不存在“内外”的概念。

純色或漸變

 

一個邊框可以運用純色或漸變色來填充,你可以在每個邊框的色彩檢查器裡更改,比如從一個扁平顔色換成一個漸變的綠色。

 

編輯一個邊框漸變色和編輯填充漸變色是一樣的操作方法,你可以在漸變的章節了解更多。

虛線

 

矢量圖層會有幾個額外的邊框選項:虛線,更改結束點或合并點的圖形。想創作虛線,你可以先找到檢查器中的邊框區域 (Border),單擊右上角的三角形圖标,這時邊框面闆會自動擴展出現幾個新的選項,其中最下面就有四個設置虛線的輸入框。

 

舉個例子,一個4-2的虛線圖形會畫出一個長4個像素的線條,留出長2個像素的間隔,接着再畫4個像素長的線條并一隻重複。一個5-4-3-2的虛線圖形則會畫出一個長5個像素的線條,留出長4個像素的間隔,接着再畫3個像素長的線條,留出一個長2個像素的間隔,并重頭再來一遍。

陰影

陰影和内陰影會有相同的參數設置和工作原理,唯一的區别是陰影一個在圖形外部一個在圖形内部。每個陰影都可以有自己的混合模式,你可以在顔色彈出窗口裡調試。每個陰影同時還有一個擴散值,它會增強對象的陰影效果。

 

值得注意的是,當模糊半徑被設置為0的時候,文本圖層的内陰影才是最好看的。擴散并不适用于文本圖層。

模糊

Sketch為你提供了四種不同的模糊方式,你可以在模糊工具的區域中進行選擇:

 

・高斯模糊(Gaussian Blur):能讓你的圖層均勻的模糊

・動态模糊 (Motion Blur):僅向一個方向模糊,造成一種運動的錯覺

・縮放模糊 (Zoom Blur) :從一個特定的點向外模糊

・背景模糊 (Background Blur) :将圖層下一層的内容模糊

 

 

背景模糊

 

其他幾種模糊方式大家都很容易理解,背景模糊則可能需要一點解釋。

 

背景模糊是在蘋果發布 iOS 7之後添加的功能,你需要确認有一個半透明的圖層在表面應用了背景模糊,這樣下層的内容才會出現模糊效果。

 

需要注意的是,模糊是一種非常消耗資源的渲染效果,圖層越大,模糊就需要占用更多的内存空間和處理器能力。盡量少使用模糊,如果你一定要在背景模糊和普通模糊中選擇,那麼選擇普通模糊吧。

 

色彩

Sketch裡我們直接将拾色器放在了檢查器當中。你可以選中一個圖形,進入填充或者邊框選擇的面闆,再點擊色彩按鈕,這時,通用檢查器将會滑到一邊,展現出一個新的色彩面闆。色彩面闆會根據你要編輯的顔色類型(陰影顔色還是填充顔色,純色還是漸變色)顯示不同的選項,但是你會發現色彩面闆很大空間都被拾色器占據着。

 

拾色器是基于HSB的色彩模式的r,色彩的飽和度和亮度分别按照水平和垂直方向變化。底下則有兩個滑動條,分别供你調整色相和透明度。

 

你可以用色彩值輸入框來改變顔色,也可以直接拖拽拾色器裡的小指示符。調整色彩的飽和度和亮度時,你可以按住 shift 鍵來限制隻朝一個軸移動。

HSL 色彩模式

 

緊接着你會看見一個十六進制表示 (HEX) 的色彩數值,以及 RGB 模式的色彩值。你也可以直接單擊 RGB 的标簽來切換至 HSBA 的色彩模式。

常用顔色

 

拾色器下面你會看見一排預設的顔色,這是 Sketch 自動抓取的顔色,它會自動分析你的文件,提取你用到最多的顔色在在這裡。這樣你就能方便的重複使用顔色,而無需手動的給每個顔色添加預設了。

漸變

想要給圖形設置漸變填充,你可以直接選中圖形,單擊填充按鈕,色彩工具就會顯示在檢查器中。想了解色彩工具的使用方式,請先閱讀色彩工具章節。在色彩面闆的底部,你也可以選擇填充純色、漸變、圖案還是雜色。

 

你可以選擇線性漸變,徑向漸變或是環形漸變,但是他們在 Sketch 中的工作原理都大緻相同。

 

如果你選擇了線性漸變,你會看見圖層上出現了有兩個或多個點組成的漸變線,上面每一個點都是一個色彩滑塊,滑塊之間的顔色則會被繪制成平滑的色彩過渡。想要改變色彩滑塊的顔色,你可以先單擊選中它,這時你會在右邊的拾色器裡看見你所選滑塊的顔色。隻要選擇一個新的色彩值,你就能在畫布上看到相應的改變。

 

在漸變線中間單擊,你就會看見一個新的色彩滑塊被添加。你可以移動這些色彩模塊來調整漸變過程的平滑度,你也可以移動漸變線的起點和終點來改變漸變的方向。

 

如果你想移除色彩滑塊,直接在畫布上選中它,再按下鍵盤上的 delete 鍵,或是 backspace 鍵即可。

 

 

徑向漸變

 

如果你選中了徑向漸變,那麼漸變線上的第一個點便會是徑向漸變的中心,末端的點則會決定漸變的範圍。在漸變色的外圈上,你會發現另一的點,你可以拖拽它使漸變範圍在正圓和橢圓當中變化。

 

 

環形漸變

 

環形漸變會在圖層上以中心點順時針漸變。你可以在其中任意加減色彩滑塊,方法和線性漸變一樣,在漸變線上移動或者拖拽色彩滑塊即可。

 

漸變條

 

Sketch 3 裡我們添加了一個新的傳統樣子的漸變條,你能看見漸變的每一個節點,以及從左至右的變化,

 

 

快捷鍵

 

Sketch 3 裡我們也添加了幾個快速放置節點的快捷鍵,你可以按下1-9的數字鍵來在漸變線的 10%-90% 的位置添加新的節點,所以如果按下 5,就能将節點添加在正中間。如果你想在兩個節點的正中間添加,則按下 = 鍵即可。

 

你還可以使用 tab 鍵快速的在不同節點中切換,用方向鍵(也可以同時按住 shift 鍵)移動節點,

 

邊框漸變

 

Sketch裡,我們同樣可以對描邊進行漸變渲染,使用方法和填充漸變類似,隻需點擊邊框面闆裡的色彩按鈕,再重複以上的操作就好。

 

鏡像

鏡像會給你一個圖層是站在玻璃桌面上的感覺。你可以使用滑塊來調整鏡像的強度。第二個滑塊則會決定鏡像和原圖形之間的距離。如果你認為滑塊無法提供足夠的靈活性,你也可以在一旁的文本框中輸入更大的數值。

 

需要注意的是,使用鏡像效果會讓這個對象被繪制兩次,其中會包含一些性能含義。

共享式樣

Sketch 2 中就有了共享式樣的功能,但是在 sketch 3 裡得到了全面的提升。共享式樣現在在通用圖層選項和式樣選項中間的白色區域裡。

 

你可以先選中一個圖形,然後在下拉面闆中設置想要的式樣。你可以創建無數的式樣,也可以在現有的式樣中更換。在共享圖層中任一個做修改,其他的都會立即做出相應的改變。

編組

除了圖形、圖片、文本這樣的基本圖層之外,Sketch 還有一些可以幫助你管理和展現導出的特殊圖層。

你可以對多個圖層進行 編組 ,并呈現為一個圖層。你可以移動和縮放組,同時也可以進入組修改每一個獨立的圖層。

 

Sketch 當中的編組工具是非常強大的,因為多個組可以再次建為新的組,一起移動或者改變大小。當你改變一個組的大小時,組當中的内容也會相應的擴大。如果這個組中包含文本信息,那麼文本的字體也會跟着擴大。

 

想要創建組,你需要先選中一個或多個圖層,然後單擊菜單欄中的編組圖标,Sketch 便會為你創建一個包含所選圖層的組,你當然也可以直接在圖層列表裡拖拽圖層,移動到不同的組裡去。

 

 

編輯群組

 

當你選中了一個組,你可以雙擊它去查看和編輯裡面的内容,比如在組内移動單個圖層或者直接新建圖層。如果你選中了組外的任一對象,Sketch 會自動跳出組以便你選擇文件當中的其他圖層。這時如果你再選擇某一組中的一個圖層,Sketch 會自動幫你選中整個組。這和我們創作圖形時的子路徑是一樣的。

 

 

直接選擇

 

默認下,你需要先雙擊選中組,再單擊選中組裡的圖層。但是如果你按住 command鍵,你便可以進入組,直接選擇想要的圖層。

 

如果你隻想将編組工具用于組織圖層列表,而不想每次都先雙擊,你可以勾選編組檢查器中的 直接選擇 (Click-through when selecting) 選項。你也可以在通用偏好設置中這樣定義新建的編組。

畫闆

Sketch裡的畫闆是在無限的畫布中的一塊固定大小的畫框,這些畫闆完全是可選擇的。當你的文件中包含畫闆的時候,畫闆之外的部分會變暗,這樣你就可以很清晰的看到什麼在畫闆中,什麼不在畫闆中。

 

如果你設計網頁,你會想針對不同大小的屏幕進行設計,這時你就可以将每一個屏幕尺寸設定為一個畫闆。如果你設計圖标,你會想限制自己在默認的圖标尺寸中創作,你同樣可以将不同的圖标尺寸設定為畫闆。

 

畫闆會有一點像一個特殊的組,他們永遠是開放的狀态,你不用雙擊它以查看内容。畫闆的大小也不會随着内容增多而自動擴展,如果你已經給畫闆設定了一個固定大小,那麼這個尺寸一直保留,直到你再次更改它。

 

 

添加畫闆

 

想添加新的畫闆,進入工具欄中的 添加 > 畫闆 (Insert > Artboard), 檢查器會顯示出一些常用的畫闆尺寸,比如 iOS設備屏幕,常用寬度的網頁,以及圖标。

 

單擊一個預設的畫闆,将它添加至畫布中,或者單擊畫闆預設的頂端欄,将所有預設畫闆都置入畫布,你也可以在檢查器底部添加自己的預設畫闆。

 

如果你想添加多個剛才置入的新畫闆,可以按 command + D 的快捷鍵來重複添加畫闆。

 

 

移動畫闆

 

如果一個畫闆中已經有内容了,Sketch就不會讓你直接選中這個畫闆,這樣你在建立大的選區時不必擔心選中了畫闆。但有時候我們還是有移動畫闆的需求。

 

你可以直接在圖層列表中選中畫闆,然後在畫布上拖拽,或是在檢查器中更改它的位置和大小。

 

你也可以直接在畫布上單擊拖拽某一畫闆的名字,來移動它。

 

 

網格和标尺

 

每一個畫闆都是在畫布上相對獨立的創作空間,所以每個畫闆都有自己的标尺和網格選項。當你在一個畫布上創作不同大小的畫闆時,這一點就會非常有用——比如響應式設計下每個斷點的畫闆。

 

 

模闆

 

另一個了解畫闆功能的例子就是我們包含在 Sketch 中的模闆了,進入 文件 > 從模闆新建 (File > New from Template),如果你選擇了 “Mac App Icon” 的模闆,你就會看見我們為每種常用尺寸都創建好了畫闆。

 

頁面

一個 Sketch 文件内可以包含多個頁面。與其一個頁面一個文件,不如将多個相關頁面放在一個 sketch 文件中,這樣的好處很多,比如說符号和共享式樣将在頁面中通用。另一個多頁面的好處就是,雖然每個頁面都可以輕松的編輯12個畫闆,但是取決于不同的内容、大小和數量,你會發現把過多的畫闆分布在多個頁面中會高效很多。

畫布

Sketch 裡的畫布尺寸是無限的。你可以用無限精準的分辨率無關模式來查看畫布,或者打開像素模式來查看每一個像素導出後的樣子。

 

如果你想在畫布中設置一個固定的邊框,你可以直接用畫闆 (Artboard) 工具創造一個新的畫闆。

 

 

導航

 

畫布中的導航是非常容易的,你可以直接用鼠标滾輪滑動或者電腦的觸摸闆來控制方向。你還可以按住空格鍵,來使用抓手工具移動畫布。并且,沒有任何對象被選中的時候,你可以用方向鍵來移動畫布。

 

值得注意的是,Page Up/Page Down 是用來在頁面當中切換的。

 

 

放大

 

我們有一些列的快捷鍵來幫助你放大查看畫布或對象,你也可以按住 command 鍵并滾動鼠标滾輪來放大查看。

 

最後,你還能用 Z 鍵來快速放大某一特定區域,單擊畫布任一點拖拽出矩形區域即可。

像素縮放

在Sketch裡,你可以用來你兩種方式來查看你的作品,具體用哪一種則取決于你的創作了。這兩種模式可以在 視圖 > 顯示/隐藏像素網格 (View > Show/Hide Pixel Grid) 當中切換。值得注意的是,當你用100%的尺寸(圖片的實際尺寸)來查看時,這個兩個模式看起來是沒有任何區别的,隻有當你放大圖片時,才會顯示。

 

如果你很在意作品中每一個像素看起來的樣子,那麼這個像素模式就非常是你的菜。你所看到的就相當于,先把這張圖到處為PNG格式再在MAC自帶的“預覽”應用中放大查看。

 

如果你不太在意這些那麼傳統的模式會更适合你,就算你放大,所有的圖形也依然會有順滑的曲線。

 

 

強制像素預覽

 

有時你會發現你無法退出像素模式,這是因為有些圖層效果(模糊和色彩校正)必需在像素基礎上工作。這就意味着,想要展現這些效果,你必須先栅格化圖形然後再添加濾鏡,也就是說,雖然矢量預覽不再适用,但我們可以強制顯示像素預覽。

 

當你無法退出像素模式時,Sketch會彈出對話框告訴你具體是哪一個圖層在阻止你,如果你正在創作一個非常大的文件,這将會幫你節省不少時間。

标尺,參考線,網格

Sketch裡的這幾個工具能幫你把圖層準确的放在理想的位置,是沿着網格還是沿着一條直線,又或者是在另兩個圖層正中間。

 

參考線

 

自動參考線在Sketch的默認設置中是被打開的,你可以同時按住 control 鍵和 L 鍵來關閉它。當你在調節一個圖層的大小或者移動一個圖層的位置時,Sketch會自動幫你把這個圖層與其他圖層對齊。如果Sketch将某一圖層自動與另一圖層對齊,你會看見一條紅線,兩個圖層便依據這條紅線對齊。

 

 

标尺

 

Sketch當中的标尺在默認設置中是被隐藏起來的。就像我們說的,Sketch裡的畫布是無限的,所以标尺也并不是固定的。你可以任意拖動标尺來設置自己的起始點。

 

你可以在标尺上任一處雙擊鼠标,便可以添加手動參考線,隻要标尺是被顯示的,這些手動參考線也會一直被顯示。想移動标尺,你需要在标尺裡按住鼠标拖拽。想要移動手動參考線,你需要在标尺中選中參考線再拖拽。想要移除手動參考線,則需要把參考線拖出标尺之外,噗的一聲便會消失。

 

 

規則網格

 

你可以進入 視圖 > 顯示網格 (View > Show grid) 來打開網格,在這裡你還會看見 網格設置 (Grid Settings)的按鈕. Sketch支持兩種不同的網格:規則網格和布局網格,你可以根據所進行的創作來選擇适合的網格,這兩者的區别也非常顯而易見:

 

規則網格可以調節小方塊的大小以及粗線條出現的頻率,默認的規則網格是由長度為20px的小方塊組成的,每10個小方塊出現一條粗線條。

 

 

布局網格

 

在布局網格裡,你可以改變頁面的總寬度,以及所含多少個縱列。同時你也可以修改每一個橫排的高度和縱列的寬度, 同時還有針對空白的選項。

 

Sketch 會盡力将網格放在畫布的正中間,不過一旦畫布大小發生改變,網格可能就不在正中間了,這時候你隻需要按下 “Center” 鍵就可以讓網格對齊到畫布中心。

測量

Sketch 有一個超棒的内置工具,來确保你創作的内容都能整齊排列。這對與那些收到 Sketch 設計稿的開發人員來說也是個福音,他們可以輕松的查看每個元素之間的精确距離。

 

 

距離

 

當你按住鍵盤上的 option 鍵,Sketch會幫你顯示出你已選中的圖層和你的鼠标現在所懸浮的圖層之間的距離,一個簡單的圖例便能說明。

同樣的,在移動一個對象時,移動到和另外兩個對象的距離相等,Sketch也會給你提示。

同樣的,如果你在調節一個圖層的大小,Sketch也會幫你顯示出具有相同長度或寬度的圖形的數據。

導出

想要導出你的文件,你可以從菜單欄進入 文件 > 導出… (File > Export…) 或者直接單擊工具欄中的導出按鈕。Sketch的畫布是無限的,所以導出文件時,你要告訴 Sketch 你想導出具體哪個部分。

 

在Sketch 3 裡,我們極大改進了導出文件的流程。當你點擊工具欄中的導出按鈕時,Sketch 會為你列出畫布、畫闆、切片中所有可導出的圖層。你可以從中導出部分或全部的圖層。值得注意的是,如果你事先選好了圖層再點擊導出按鈕,那麼Sketch 會默認的隻幫你導出那些圖層。

導出圖層

Sketch 3 裡的新功能是可以無需建立切片而直接導出圖層。

 

 

圖層 VS 切片

 

導出圖層本事意味着畫布上其他的元素都不會被一起導出,如果它表面有一個圖層或者有一個背景圖層,他們也都不會被包含進導出的文件。

 

這個方法很适用于導出圖标或者一個大的設計當中的小元素,但并不适用于導出一整個設計。

 

 

導出圖層

 

如果你隻想導出一個圖層,你可以直接在檢查器中實現。先選中圖層或組,然後單擊檢查器底端的 Make Exportable。你會發現檢查器立即顯示出你将要導出一張原尺寸的圖片,沒有前綴,并且默認為PNG格式。

 

你可以單擊那個小小的 + 按鈕,來添加新的導出尺寸,默認下會是有着 @2x 前綴的2倍大小的圖片,但這些都是可以随你修改的。如果你本來就在創作一個 @px 的作品了,你也可以為它添加一個 @2x 的前綴,然後在添加一個 0.5倍大小的導出方式。

 

值得注意的是, 我們現在支持任意大小的導出了,所以如果你在為 Android 設計,1.5倍大小的導出也是能夠實現的。

 

 

圖層列表

 

在圖層列表中,你會發現這些圖層多了一個小刀的圖标,說明這個圖層時可導出的。下次你再從工具欄中點擊導出按鈕,這個圖層也會和其他切片一起顯示在列表當中了。

 

需要注意,你無需先建立切片也能直接從圖層列表導出圖層,如果你直接列表中将圖層拖到 Finder 或者其他 App 裡,Sketch 會迅速的幫你導出一張 PNG 圖片。如果按住 option 鍵,則會将它以 PDF 數據寫入剪貼闆中。

 

 

切片

切片能讓你将畫布中的特定區域導出為一個文件。一個 Sketch 可以有無數個切片,每個切片都能導出不同的文件。

 

 

圖層切片

 

在 Sketch 3當中,切片被視為普通圖層。這麼做會有很多好處,比如說你可以把想要導出的多個圖層編組形成一整個切片,當你移動這個組的時候,切片也會跟着移動。

 

如果你暫時不想花心思整理畫布上的切片,你也可以在圖層列表最底下關閉小刀的按鈕。

 

 

添加切片

 

你可以進入工具欄的 添加 > 切片(Insert > Slice),并在畫布上單擊拖動鼠标創建一個新的切片區域。在切片工具中,你也可以直接直接單擊一個圖層,Sketch 會立即圍繞那個圖層建立一個新的切片。

 

 

命名

 

你可以為每一個切片單獨命名,同時他們也會以這個名字保存進磁盤。

 

這裡有一個很方便的小技巧:如果你在文件名中加入了一個斜杠 (一個"/"),那麼Sketch就會自動新建一個文件夾,并把這個文件放入其中。舉個例子,如果你将切片命名為 foo/bar.png ,那麼Sketch會先幫你創建一個叫做 foo 的文件夾,然後在裡面創建一個叫 bar.png 的圖片。

 

 

多尺寸

 

Sketch 3 新增了一個功能是可以從一個切片中同時導出多個圖片。如果你在為iOS設備做設計,那你會常常想為圖标導出1倍或2倍大小的圖片,切片工具幫你大大簡化了這個步驟,你隻需單擊檢查器中的 + 按鈕來添加新的導出命令即可。

 

每個尺寸的圖片都可以定制大小,文件格式和文件名前綴。當你同時導出兩個以上圖片時就必須要設定前綴,這樣才能區分開不同的文件。默認情況下,你添加的第二種導出将會像蘋果要求的那樣,是一個帶有 @2x 前綴的2倍大小圖片。但你并不會被限制與2倍大小,你可以以任何前綴名導出任何大小的圖片。

 

 

僅導組内圖層

 

Sketch 2 當中有一個功能可以導出切片中的某些特定圖層,雖然這一開始是非常便于理解的概念,可是一旦你想改變一些元素或者替換一些内容時,這個過程就會變得非常糟糕。

 

在Sketch 3當中,每個切片都隻有一個選擇框——僅導出組内圖層(Export Group Contents Only),選中這個,就隻會到導出那些在組内的塗層,而不會導出表面的或者背景圖層等等其他切片内的東西。

 

 

修剪

 

每一個切片中都還包含一個 修剪 選項。選中它之後,每一個被導出的切片中的透明外圍都會被剪去。

 

舉個例子,你在文件中定義了一個 30 x 40 px 的切片選區,裡面隻包含了一個 15 x 15 px 的圓形,與其修改切片選區的大小來貼合這個圓形,不如打開 修剪 選項,Sketch就會自動幫你減去 30 x 40 px 選區内的所有透明部分,最後隻留下 15 x 15 px的圖像。

文件格式

支持導出的文件格式

 

・JPG: 照片文件所常用的格式,但并不支持透明度。

・PNG: 如果你畫的内容中有透明的像素,這将是最好的選擇。

・TIFF: 支持透明度,但這種格式的文件會更大。

・PDF or EPS:  保存矢量對象,目前基本支持。

・SVG: 能很好的保留圖形和文本的導出,但是并不支持陰影使用這種格式主要可以讓該文件在其他應用中導入。

 

不支持導出的文件格式

 

・PSD: Photoshop 文件是封閉且不支持導出的,如果你有Adobe CC的套件,那麼你可以将PS文件導出為 .PDF,并導入Illustrator。

・AI: Sketch目前不支持.AI文件,但是Illustrator可以打開從 Sketch 裡導出的 .PDF 或 .SVG 文件。

畫闆

Sketch 3 裡的畫闆無需先創建切片就可以直接導出,隻需先添加一個畫闆的導出尺寸,下次你單擊導出時,Sketch 就會幫你也導出畫闆了。

 

當你的畫布上已經有幾個畫闆了,然後你第一次點擊導出,Sketch 會推測你是想導出這些畫闆,并自動的把他們變為可導出的狀态。

CSS 屬性

Sketch有一個貼心的小功能,幫助網頁設計師将他們的靜态原型轉化成真實的 HTML 代碼。

 

當你在畫布中選中了任意數量的元素,你都可以進入菜單欄中選擇的 編輯 > 複制CSS 屬性 (Edit > Copy CSS Attributes) ,Sketch便會為你選中的對象聲明 CSS 中的邊框,填充,漸變,陰影以及文字樣式。

 

Sketch也會自動将軟件當中的漸變轉化為 CSS 當中的漸變。由于 CSS 中的漸變語法非常糾結,所以這個功能可以幫你節省很多時間。将你的創作從 Sketch 轉化為 CSS 真的非常簡單。

打印

Sketch 中的畫闆和切片都是可以打印的。進入 文件 > 打印 (File > Print),你就會得到一個畫闆列表——如果沒有畫闆的花就會是切片列表。接着會出現一個标準的打印對話框讓你設置打印需求。

 

值得注意的是,我們已經為你設置好了默認的 A4、A5 和 A6 大小的畫闆,供你直接選擇。

導入

 

支持導入的文件格式

 

Sketch 支持導入幾種不同格式的文件,你可以将文件拖進 dock 上的 Sketch 圖标,或者直接拖進一個已經打開的畫布裡。

 

・JPG: 照片文件所常用的格式,但并不支持透明度。

・PNG: 如果你畫的内容中有透明的像素,這将是最好的選擇。

・TIFF: 支持透明度,但這種格式的文件會更大。

・SVG: Sketch 支持導入 SVG 文件,但是可能并不是100%,目前 SVG 有一些概念我們還不支持

・PDF or EPS:  Sketch 支持導入 PDF 和 EPS 文件,但是和 SVG 一樣,有一些概念無法支持,文件内容可能無法完整顯示

 

如果你的 EPS、PDF 或 SVG 文件 Sketch 無法正确導入,請郵件聯系我們,我們會嘗試在下次更新解決這個問題。

 

不支持導入的文件格式

 

以下列出了一些平面設計中常用的,但Sketch暫時還不支持的文件格式。

 

・PSD: Sketch 隻能以位圖形式打開 .psd 文件。

・AI: Sketch 隻能以位圖形式打開 .ai 文件。

偏好設置

通用設置

打開軟件時

 

打開 Sketch 時,你需要創建一個新的文件,或者選擇現有文件。

 

 

撤銷

 

Sketch 會将多個相似的操作視為一組,比如你連續多次按下方向鍵以移動圖層,但是隻需一次撤銷,即可恢複原來的位置。

 

 

字體渲染

 

當你為 Mac 或網頁設計時,你會想打開子像素抗鋸齒效果,但是為 iOS 設計時,你會想關掉它。

 

 

矢量導入

 

這個選項讓你在導入 PDF 或者 EPS 的時候告訴 Sketch,是應該以位圖形式打開呢,還是嘗試解析其中的路徑變成可編輯的圖形。

 

 

Sketch Mirror

 

讓你選擇 Mirror 是随時顯示當前選中的畫闆,還是獨立運行。

 

 

畫布

Retina

 

Mac 和 iOS 的顯示器會用4個像素來顯示1個傳統的像素。新的 Retina Mac Book Pro 上的像素是舊版本的4倍,但展示的内容大小是一模一樣的,他們隻是用多的像素來展現圖片和字體的更多細節。

 

默認設置下,Sketch 也會這麼做,多的像素會被用來展現細節,但是設計的物理大小保持不變。如果你不想使用這個功能,隻想讓顯示器顯示實際的每個像素,那麼你可以關閉 Retina Canvas 的選項。

 

 

放大至選區

 

如果你使用 視圖 > 放大/縮小 (View > Zoom In/Zoom Out),Sketch 會從畫布中心縮放。但如果你選中這個選項,則會放大至選中的圖層。

 

 

縮小至上一位置

 

這個選項能讓你縮小畫布回到放大前的位置。 默認設置中,Sketch 會縮小至畫布的中心,如果你想要編輯的圖層在畫布很低端,這個選項能讓你直接回到那裡。

 

 

布局網格

 

布局網格可以是填充顔色的,或者隻是有輪廓的,取決于你的喜好。

 

圖層

比例縮放

 

如果新建組的比例是被鎖住的,那麼這個圖隻會按照固定比例縮放。如果沒有鎖住,則可以任意改變其大小。

 

 

開啟新組的直接選擇

 

默認設置下,新建組的直接選擇功能是關閉的,一旦打開,之後新建的任何組都可以進行直接選擇。

 

 

位移貼圖 & 對象複制

 

這個選項會讓你的圖像位移 10px, 如果取消這個選項的話,你複制的圖像則會粘貼在原圖完全一樣的坐标上。

 

 

貼合像素邊緣

 

這個選項打開時, Sketch 會把所有圖層盡可能的靠在像素邊緣。但如果你手動在輸入框輸入有小數的值,Sketch 則會保留小數值。

 

同時,這個功能在旋轉圖層時也會被無視,因為旋轉時本來就很難保持圖層都在整數位置。

 

 

剝去文本式樣

 

對于你粘貼進 Sketch 的文本,将除去所有的字體、段落、顔色信息。這樣當你從網頁或者其他文本編輯器中拷貝文本過來時,将無視其原本的式樣。

性能

Sketch 的性能可以輕松的支持相當複雜的設計,但如果你創作出了一個很大的文件,你可能會想知道有哪些因素影響着 sketch 的性能。

 

 

模糊

 

模糊是非常消耗系統資源的效果。Sketch 需要先将圖層渲染成一個位圖(這已經很消耗資源了),然後再在上面添加一個模糊(這将更消耗資源),模糊半徑越大,消耗的資源也就越大。

 

一個半徑為 1px的模糊,Sketch 需要檢查每一個像素周圍的每一個像素,也就是說在計算新的平均值時,每個像素我們都需要檢查他周圍的9個像素的值。如果模糊半徑為 2px,這些數據也會按比例增長。

 

請記住,背景模糊會比普通的模糊更加複雜和消耗資源,所以如果你想模糊一整張圖片,那還是用普通模糊吧,不要用背景模糊。

 

 

陰影

 

這個規律同樣适用于陰影,在(大的)圖片上渲染(大的)陰影也是非常耗資源的,陰影越多,延遲也就越長。帶有擴散的内陰影效果更是會消耗大量系統資源。

 

 

多頁面

 

Sketch 的一個頁面能輕松負載12個畫闆,但如果多個畫闆上都有大面積的陰影和模糊效果,文件操作起來就會很慢,解決這個問題最簡單的方法,就是把一部分畫闆移到新的頁面上去。

 

 

文本轉化為輪廓

 

布爾運算是一種非常複雜的數學運算,如果你的一個陰影效果還包含了數個做布爾運算的子路徑的話,文件就會遇到問題。

 

所以說你在将文本轉化為輪廓是要格外謹慎。其實無需矢量化,文本也可以直接應用漸變效果。但如果你執意要将文本轉化為輪廓,那記得現将每個字母都單獨放在一個圖層當中。

快捷鍵

Sketch 有一系列為數不多但相當實用的快捷鍵,他們能大大提高你的工作效率。

 

通用快捷鍵

 

・control+h: 觸發選區手柄

・control+l: 觸發自動參考線

・control+g: 觸發網格

・Space: 抓手工具

・Enter: 編輯所選圖層

・⌘+3: 滾動至所選圖層

・⌘+2: 放大所選圖層

・Z: 放大工具。按住 Z 鍵,用鼠标單擊拖拽出一個區域放大。縮小啧使用 Z + alt 再用鼠标單擊。

・Escape: 退出當前工具,取消選擇所有圖層或返回檢查器。

・Tab/Shift-tab: 在當前群組中切換不同圖層。

 

添加圖層

 

・R: 添加一個矩形

・O: 添加一個橢圓

・L: 添加一條直線

・U: 添加一個圓角矩形

・T: 添加一個文本圖層

・V: 添加矢量圖層

・P: 鉛筆工具

 

移動圖層 & 更改尺寸

 

・alt + 拖拽鼠标: 複制一個圖層

・alt + 鼠标懸停: 顯示兩個圖層之間的距離

・alt + 更改圖形尺寸: 兩邊對稱的更改圖形尺寸

・shift + 更改圖形尺寸: 等比更改圖形大小

以上列出的是一些隐藏的快捷鍵,但是當然啦,還有更多的快捷鍵已經顯示在菜單裡了。熟練的使用這些快捷鍵真的能大大加快你的工作速度。 如果你發現某一功能用另一個快捷鍵更方便的話,請一定讓我們知道。

 

隐藏命令

 

Sketch 有一些隐藏的偏好設置,對于一些特定的使用需求将會很有用。想要使用這些指令,進入到 Mac 下的 “終端” ,然後輸入這些命令。重啟 Sketch 即會生效。要想關閉其中的任何一項設置,把命令中的 YES 改成 NO 即可,反之亦然。

 

defaults write com.bohemiancoding.sketch svgExportSkipAssignIdToLayerName -bool YES

 

例如當上面這條指令被設置成 YES, 圖片導出 SVG 格式時,Sketch 就不會使用圖層 ID 作為名稱。

 

如果有用戶希望 Sketch 針對特定的小衆群體有一些非常實用的功能,我們可以幫你制作一條像上面那樣的命令,如果你有這樣的想法,請随時聯系我們。

About

Sketch中文網迫切的和你分享關于 Sketch 的一切,感謝 Bohemian Coding 為我們創作如此出色的應用。

 

本站全部在 Sketch App 和 Adobe Muse 中完成。

Contact

如果你創作或翻譯了 Sketch 的相關文檔、視頻和教程,請一定與我分享,讓更多人愛上 Sketch。如果你對于本站有任何想法和疑問也請随時聯系我,我很期待你的建議。

aegeankuang@gmail.com

Share

Sketch 中文站對你有幫助嗎?不要吝啬你的愛,分享給你的 Designer 和 Geek 朋友們吧。

©2014 SketchCN. Made with ❤︎ by Aegean K.