圖形(Shapes)
添加圖形
添加預置的圖形
圖形是sketch最常見的圖層類型，Sketch預定義了一些常見圖形。比如, 使用快捷鍵
-
R添加矩形 -
O添加橢圓 -
U添加圓角矩形 -
L添加線條
在拖拽添加的圖形時，按住?可以使圖形的寬和高一致。
在拖拽添加的圖形時，按住?可以保持圖形的中心位置不動(代替默認的從左上方擴大圖形)
在拖拽添加的圖形時，按住Space可以移動圖形的位置，非常適合一來就把圖形放錯位置的情況。
使用鉛筆添加圖形
使用快捷鍵P可以使用鉛筆自己繪制圖形。
使用svg代碼添加圖形
直接復制并粘貼SVG代碼到畫布或者面板上面。比如。復制并粘貼下面的代碼到畫布，可以得到一個圓形的圈
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
編輯圖形
使用檢查器修改圖形的角個數，角的弧度，旋轉圖形位置
如下圖所示，選擇圖形之后，從上往下，紅色圈出來的功能依次是調整圖形旋轉的度數，角的弧度，以及角的個數
翻轉圖形(Flip Shapes)
使用檢查器的如下圖所示的按鈕，可以在水平或者豎直方向翻轉圖形
矢量模式編輯圖形
雙擊圖形便可以進入矢量編輯模式，可以任意的拖動編輯點來調整圖片的形狀，也可以點擊邊添加編輯點，或者刪除一個編輯點
圖形變形
通過Layer > Transform > Transform或者快捷鍵? + ? + T
裁剪圖形
使用Layer > Path > Scissors便可以裁剪圖形
旋轉復制
旋轉復制使用選擇的圖形，根據一個點旋轉復制出來多個拷貝對象。使用Layer > Path > Rotate Copies可以完成旋轉復制，如使用旋轉復制，可以很輕松繪制出如下圖形。
首先畫一條線，然后旋轉復制多份，再調整中心位置即可
布爾計算
當一次選中多個圖形時，可以使用工具欄的按鈕方便地進行布爾運算
例如有兩個圖形A和B，A在B的圖形的圖層下面
- 合并形狀 (Union):
A ∪ B - 減去頂層形狀 (Subtract):
A - B(以圖層最下面的圖形為主) - 與形狀區域相交 (Intersect):
A ? B - 排除重疊形狀 (Difference):
(A ∪ B) - (A ? B)
蒙板
選中多個圖形時，Sketch默認以最下面的圖層作為模板使用，使用Layer > Mask > Use As Mask可以創建輪廓模板
向量編輯
當預置的圖形不能滿足需求時，使用快捷鍵V便可以自己繪制矢量圖形，
繪制圖形之后，使用Tab或Shift + Tab鍵可以快速在多個點之間切換。
術語屬于約定:
- 跨越了所有點的線稱作
path. - 兩點之間的線稱作
segment
點類型
選中一個點之后，通過快捷鍵1,2,3,4可以修改點的類型
-
1: Straight -
2: Mirrored -
3: Disconnected -
4: Asymmetric
插入點
可以點擊path的任意地方插入點，插入點的同時按住Shift鍵，可以讓插入的點位于兩個點的中間
彎曲segment
按住?時拖動任意的segment，可以起到彎曲segment的效果
閉合開放path
一個圖形的path， 可以開放，也可以閉合。即首尾的兩個ponit可以連接在一起，也可以不連接在一起。通過Layer > Path > Close Path或快捷鍵? + ? + O來閉合它們
偏移path
通過Layer ? Path ? Offset可以基于現有的path，創建一個偏移了位置的path
反轉path
當我們創建了一個開放的path時，它是明確有首尾的點，可以通過Layer ? Path ? Reverse Order來反轉path，這樣能方便我們從相反的方向編輯圖形
文本
插入純文本
先按快捷鍵T，然后在點擊畫布上想插入文本的地方，即可完成文本的插入。
或者拖動一個框來插入文本，這樣當文本內容比較多時，插入的文本都會在拖動的框里面
插入富文本
使用Edit > Paste > Paste as Rich Text或者快捷鍵?+ ? + ? + V可以直接插入富文本
插入文本在path上面
首先添加一個矢量圖形，如一條線，然后再添加文本，選中文本之后,設置Text > Text on Path，再拖動path時，使它靠近文本即可實現如下效果:
再次選擇Text > Text on Path，可以取消上述效果
編輯文本
使用Text菜單編輯文本
使用菜單欄的Text菜單，可以編輯文本的樣式，比如:
- 加粗，斜體，下劃線
- 調整字體大小
- 字母大小寫轉換
- 設置對齊方式
- 有序列表和無序列表
使用檢查器編輯文本
- 創建或使用文本樣式
- 調整字體大小，字體類型，顏色等
- 如果使用的是
OpenType font，這里可以進行一些樣式修改 - 控制字符，句子，段落之間的空白字符
- 字體自適應設置
- 字體對齊方式設置
修改字體顏色
有兩種方式修改字體顏色
-
使用檢查器的顏色控制面板
使用檢查器的顏色控制面板調整顏色 -
使用填充面板
使用填充面板
將字體轉換為矢量圖形
選中字體之后，使用Layer > Convert to Outlines或者快捷鍵? + ? + O可以將字體轉為矢量圖形
注意
將文本轉換為矢量圖形之后，便不能再編輯文本本身了。同時如果轉換太多文本的話，會降低使用sketch的使用速度。
圖像
插入圖片
使用Insert > Image…可以直接插入圖片，也可以直接將圖片從桌面拖到畫布的方式來添加圖片
替換圖片
如果你已經插入了一個圖片并調整了大小，這時又希望換一張圖片時，可以通過Layer > Image > Replace來重新選擇一張圖片，新的圖片會自動使用之前調整的大小
優化圖片大小
當一次添加了比較多的圖片到文檔時，會增加文檔的大小，同時也就降低sketch的速度，可以使用Layer > Image > Minimize File Size來優化圖片的大小
編輯圖片
雙擊圖片便可以進入編輯模式，可以實現選擇圖片，裁剪圖片，翻轉圖片等功能
數據
sketch默認包含了許多數據源，數據源主要分為兩類:
- 文本類型: 如隨機的人物名字，城市信息等
- 圖片類型: 各種頭像，裁剪的圖片等
有了數據源，可以方便的讓我們設計各種原型而不用到處去找圖片或文本素材。
也可以使用第三方的數據源，sketch默認集成了Unsplash插件，使用這個插件可以從Unsplash library搜索或者隨機插入圖片
數據源使用
選擇一個需要綁定數據的圖形后，可以使用工具欄的Data按鈕或者Layer > Data來插入數據
刷新數據
當多數據源提供的數據不滿意時，使用快捷鍵? + ? + D或者Data菜單的Refresh Data按鈕可以刷新綁定的數據
自定義數據源
自定義文本數據源
創建一個純文本的文件,每行包含一條數據,比如下面的Names.txt
Afghanistan
Albania
Algeria
Andorra
Angola
然后從sketch的偏好設置里的數據源標簽里，使用添加數據源功能，選擇剛剛創建的數據源文件
最后便可以從Data里使用自己剛剛添加的自定義數據源
自定義圖片數據源
創建一個目錄，把希望使用的圖片放在里面，采用上述創建文本數據源的步驟，就可以創建一個自定義的圖片數據源
備注
自定義的數據源需要保存在本機一個相對固定的地方，如果位置發生改變，sketch會找不到自定義的數據源
第三方數據源
我們也可以使用第三方的插件提供的數據源
- Kitchen 阿里的開發sketch插件，提供了很多實用功能
