Sketch 式樣

Sketch式樣

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

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

輸入框

我們有一個很特別的輸入框，鼠標(biāo)懸停上去時你會看見上下兩個小剪頭出現(xiàn)在文本區(qū)域右邊，你可以單擊他們來增減圖形的大小。如果你按住 shift 則會以 10 為單位變化。如果你按住 option 鍵，則會以0.1 為單位變化。

Sketch

上下箭頭

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

運算

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

模糊值

調(diào)整文本框大小更快的方式是直接拖拽文本框底部的手柄。如果你已經(jīng)很確定理想的文本框大小，只是想看看在畫布上的效果，這能幫你做最快的測試。

返回畫布

你將會在畫布和檢查器中來回操作，先在畫布上選中一個對象，去檢查器修改一些數(shù)值，然后再回到畫布。然而正常情況下應(yīng)用仍會關(guān)注在檢查器上，所以如果你想按 R 鍵來快速新建一個矩形，結(jié)果會是你在檢查器的輸入框中輸入了 R 。

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

拖放

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

刪去無用式樣

一個高效嘗試不同式樣的方法是添加多個邊框和陰影，然后選擇性的打開或關(guān)閉一部分。也許是這個原因，我們發(fā)現(xiàn)很多設(shè)計師的檢查器里都有好幾個無用的式樣。

為了讓刪去無用式樣更方便，我們增添了一個小垃圾桶圖標(biāo)，一旦檢查器中出現(xiàn)無用的式樣，這個垃圾桶就會顯示出來，單擊就可以刪去所有的無用式樣。

復(fù)制粘貼式樣

這并不是和檢查其完全相關(guān)的內(nèi)容，但你也可以使用編輯菜單，來在不同圖層之間復(fù)制粘貼式樣。如果你不想圖層始終保持鏈接，但又想共享其中一部分元素，這便是最好的選擇。

對齊

檢查器的最頂端是一些關(guān)于對齊的按鈕。右邊的6個按鈕是讓多個圖層相對自身對齊，只有一個圖層的情況下則是與當(dāng)前的畫板對齊。

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

圖層透明度快捷鍵

同樣不是嚴(yán)格和檢查器相關(guān)的功能，但每當(dāng)你選中一個圖層，你都可以按 1-9 的數(shù)字快捷鍵來快速將圖層透明度從 10% 調(diào)至 90%，按下0則會將透明度調(diào)至100%。

填充

Sketch 里你可以為圖形填充純色、漸變、圖片（或圖案）以及雜色。

填充選項從左至右分別是：

?純色

?線性漸變

?徑向漸變

?環(huán)形漸變

?圖案填充

?雜色填充

添加填充

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

圖案填充

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

?平鋪:圖像被不斷重復(fù)直至鋪滿整個區(qū)域

?擴展 :圖像被放大直至占滿整個區(qū)域

雜色填充

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

Sketch 3 現(xiàn)在包含了黑色、白色和彩色三種不同的雜色圖片，你還可以分別給他們設(shè)定混合模式。

邊框

除了文本之外的所有圖層都可以有多個邊框，你也可以給邊框設(shè)定不同的粗細(xì)、顏色和混合模式。

邊框選項從左至右分別是：
?純色填充

?線性漸變

?徑向漸變

?環(huán)形漸變

邊框位置

邊框可以出現(xiàn)在一個路徑的中間，內(nèi)部或外部，如果你有一個封閉的圖形，那么內(nèi)邊框會被繪制在圖形的輪廓以內(nèi)，外邊框則會在輪廓以外。

中心邊框則會剛好繪制在輪廓線上，一個開放圖形只能運用中心邊框，一條直線也只能運用中心邊框，畢竟直線根本就不存在“內(nèi)外”的概念。

純色或漸變

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

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

虛線

矢量圖層會有幾個額外的邊框選項：虛線，更改結(jié)束點或合并點的圖形。想創(chuàng)作虛線，你可以先找到檢查器中的邊框區(qū)域 (Border)，單擊右上角的三角形圖標(biāo)，這時邊框面板會自動擴展出現(xiàn)幾個新的選項，其中最下面就有四個設(shè)置虛線的輸入框。

舉個例子，一個4-2的虛線圖形會畫出一個長4個像素的線條，留出長2個像素的間隔，接著再畫4個像素長的線條并一只重復(fù)。一個5-4-3-2的虛線圖形則會畫出一個長5個像素的線條，留出長4個像素的間隔，接著再畫3個像素長的線條，留出一個長2個像素的間隔，并重頭再來一遍。

陰影

陰影和內(nèi)陰影會有相同的參數(shù)設(shè)置和工作原理，唯一的區(qū)別是陰影一個在圖形外部一個在圖形內(nèi)部。每個陰影都可以有自己的混合模式，你可以在顏色彈出窗口里調(diào)試。每個陰影同時還有一個擴散值，它會增強對象的陰影效果。

值得注意的是，當(dāng)模糊半徑被設(shè)置為0的時候，文本圖層的內(nèi)陰影才是最好看的。擴散并不適用于文本圖層。

模糊

Sketch為你提供了四種不同的模糊方式，你可以在模糊工具的區(qū)域中進行選擇：

?高斯模糊（Gaussian Blur）：能讓你的圖層均勻的模糊

?動態(tài)模糊 (Motion Blur)：僅向一個方向模糊，造成一種運動的錯覺

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

?背景模糊 (Background Blur) ：將圖層下一層的內(nèi)容模糊

背景模糊

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

背景模糊是在蘋果發(fā)布 iOS 7之后添加的功能，你需要確認(rèn)有一個半透明的圖層在表面應(yīng)用了背景模糊，這樣下層的內(nèi)容才會出現(xiàn)模糊效果。

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

色彩

Sketch里我們直接將拾色器放在了檢查器當(dāng)中。你可以選中一個圖形，進入填充或者邊框選擇的面板，再點擊色彩按鈕，這時，通用檢查器將會滑到一邊，展現(xiàn)出一個新的色彩面板。色彩面板會根據(jù)你要編輯的顏色類型（陰影顏色還是填充顏色，純色還是漸變色）顯示不同的選項，但是你會發(fā)現(xiàn)色彩面板很大空間都被拾色器占據(jù)著。

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

你可以用色彩值輸入框來改變顏色，也可以直接拖拽拾色器里的小指示符。調(diào)整色彩的飽和度和亮度時，你可以按住 shift 鍵來限制只朝一個軸移動。

HSL 色彩模式

緊接著你會看見一個十六進制表示 (HEX) 的色彩數(shù)值，以及 RGB 模式的色彩值。你也可以直接單擊 RGB 的標(biāo)簽來切換至 HSBA 的色彩模式。

常用顏色

拾色器下面你會看見一排預(yù)設(shè)的顏色，這是 Sketch 自動抓取的顏色，它會自動分析你的文件，提取你用到最多的顏色在在這里。這樣你就能方便的重復(fù)使用顏色，而無需手動的給每個顏色添加預(yù)設(shè)了。

漸變

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

你可以選擇線性漸變，徑向漸變或是環(huán)形漸變，但是他們在 Sketch 中的工作原理都大致相同。

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

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

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

徑向漸變

如果你選中了徑向漸變，那么漸變線上的第一個點便會是徑向漸變的中心，末端的點則會決定漸變的范圍。在漸變色的外圈上，你會發(fā)現(xiàn)另一的點，你可以拖拽它使?jié)u變范圍在正圓和橢圓當(dāng)中變化。

環(huán)形漸變

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

漸變條

Sketch 3 里我們添加了一個新的傳統(tǒng)樣子的漸變條，你能看見漸變的每一個節(jié)點，以及從左至右的變化，

快捷鍵

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

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

邊框漸變

Sketch里，我們同樣可以對描邊進行漸變渲染，使用方法和填充漸變類似，只需點擊邊框面板里的色彩按鈕，再重復(fù)以上的操作就好。

鏡像

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

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

共享式樣

Sketch 2 中就有了共享式樣的功能，但是在 sketch 3 里得到了全面的提升。共享式樣現(xiàn)在在通用圖層選項和式樣選項中間的白色區(qū)域里。

你可以先選中一個圖形，然后在下拉面板中設(shè)置想要的式樣。你可以創(chuàng)建無數(shù)的式樣，也可以在現(xiàn)有的式樣中更換。在共享圖層中任一個做修改，其他的都會立即做出相應(yīng)的改變。