在《夜雨原創(chuàng)玩轉(zhuǎn)Sketch第一期：初識Sketch》中糕珊，我們對Sketch的功能特性、界面和基本操作有了一定的了解毅糟，這期我們需要學(xué)習(xí)的是基本工具的使用红选，涉及線條、幾何姆另、文字工具三個類別喇肋。

注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本。

1.線條工具

為了方便系統(tǒng)學(xué)習(xí)迹辐，我們把Sketch中直線蝶防、鋼筆、鉛筆都?xì)w在線條工具中明吩，再逐一講解间学。線條在生活中隨處可見，在交互設(shè)計中同樣使用頻繁印荔，例如分割線低葫、形狀勾勒等。

（1）直線工具

直線是交互設(shè)計中比較常見的工具仍律，我們可以利用直線來做分割線或者標(biāo)注等嘿悬。在Sketch中，可以通過快捷工具欄“Line”或者“Insert”-“Shape”-“Line”（快捷鍵L）快速勾勒一條直線

然后水泉，我們可以通過調(diào)整檢查器的“Thickness”調(diào)整直線的粗細(xì)善涨。

假如窒盐，我們需要一條虛線，則在直線的基礎(chǔ)上點擊“Borders”所在的設(shè)置圖標(biāo)躯概，在彈出的面板中登钥，改變第二個“Gab”數(shù)值即可得到一條虛線。由于直線是由無數(shù)個點組成的娶靡，我們可以理解為“Gab”是控制點和點距離遠(yuǎn)近牧牢，而“Dash”是則是控制點的大小，通過調(diào)整“Gab”和“Dash”可以得到各種各樣的虛線效果姿锭。

通常塔鳍，我們在做標(biāo)記說明的時候，需要一個箭頭來指示方向呻此，同樣在“Borders”設(shè)置彈出面板轮纫，在“Start Arrow”或者“End Arrow”選擇端點形狀為箭頭即可。

有時候焚鲜，我們需要一條彎曲的線條而不是直線掌唾，則可以雙擊直線進(jìn)入編輯模式，在直線的任意位置（例如中間）點擊添加一個點忿磅，再拖動點的位置即可糯彬。我們還可以利用檢查器的貝塞爾曲線來設(shè)置直線的彎曲效果，分別是Straight（直角）葱她、Mirrored（鏡像）撩扒、Disconnected（斷開連接）和Asymmetric（不對稱）。

最后吨些，我們重溫一下直線工具的使用方法：粗細(xì)搓谆、虛線、箭頭豪墅、彎曲泉手。

（2）鋼筆工具

在直線工具中，我們利用貝賽爾曲線很容易地將直線轉(zhuǎn)換為曲線但校，但是描繪曲線的話螃诅，使用鋼筆工具更方便。如圖所示状囱，可以通過快捷工具欄“Vector”或者“Insert”-“Vector”（快捷鍵V）使用鋼筆工具插入連貫的曲線术裸。

配合貝塞爾曲線，能對鋼筆繪線進(jìn)行修正亭枷，使其達(dá)到我們想要的弧度袭艺，應(yīng)用在曲線畫圖上，例如折線圖叨粘。

（3）鉛筆工具

鉛筆工具在交互設(shè)計中應(yīng)用得比較少猾编，它的特點是能繪制無規(guī)則的圖形瘤睹，例如制作獨特的簽名。如圖所示答倡，可以通過快捷工具欄“Pencil”或者“Insert”-“Pencil”（快捷鍵P）使用鉛筆工具轰传。

這里給大家介紹一個鉛筆工具的高級應(yīng)用揪阶，結(jié)合鉛筆工具的自由性和上文提及的虛線技巧钟哥，我們可以利用鉛筆繪制散點圖刮刑。具體步驟如下：

首先芬为，使用鉛筆工具亂畫一通，有多亂畫多亂封豪，如下圖所示

然后褥影，設(shè)置鉛筆工具的線條為虛線效果飒筑，即可得到散點圖渤涌。

2.幾何工具

格式塔原理告訴我們佩谣，簡單的整體更容易被人腦所理解。所以实蓬，在交互設(shè)計當(dāng)中茸俭，圓形、矩形以及其他幾何圖形出現(xiàn)的頻率最高安皱。

（1）圓形工具

在第一期當(dāng)中瓣履，我們就使用圓形工具創(chuàng)作了第一個作品，現(xiàn)在來重溫一下吧练俐。通過工具欄的橢圓工具“Oval”插入，或者通過工具欄的“Insert”-“Shape”-“Oval”（快捷鍵O）插入一個圓形即可冕臭。

圓形通常應(yīng)用于圓環(huán)圖腺晾、圓形icon、圓形頭像（圓形頭像可參考筆者早前的文章《Sketch基礎(chǔ)教程：蒙版（Mask）的使用詳解》）等制作辜贵。如下圖所示悯蝉，取消填充，改變邊框的大小即可快速得到一個圓環(huán)圖托慨。另外鼻由，可以通過調(diào)節(jié)“Position”中的“Center”、“Inside”厚棵、“Outside”蕉世，來調(diào)整邊框所在的位置。

（2）矩形工具

矩形工具是應(yīng)用十分頻繁的工具之一婆硬，常見的卡片狠轻、按鈕、輸入框等都屬于矩形彬犯。通過工具欄的矩形工具“Rectangle”插入向楼，或者通過工具欄的“Insert”-“Shape”-“Rectangle”（快捷鍵R）即可插入一個矩形查吊。

日常，我們往往需要一個圓角的按鈕湖蜕，有兩種解決方案逻卖，一種是通過“Insert”-“Shape”-“Rounded”插入一個圓角的矩形；另外一種方式是通過改變檢查器“Radius”的值來獲得圓角昭抒，“Radius”的值越大评也，圓角的彎曲程度越高。

（3）其他形狀

其他形狀可以通過“Insert”-“Shape”插入戈鲁，日常用到的地方不多仇参，視需求而定。

3.文字工具

文字工具絕對是交互設(shè)計中使用最多的工具婆殿，沒有之一诈乒，人類在漫長的歷史進(jìn)化之中都離不開文字。通過工具欄的文字工具“Text”婆芦，或者通過工具欄的“Insert”-“Text”（快捷鍵T）即可插入文字怕磨。

（1）文字工具的基本設(shè)置

①文字類型

Sketch中自帶常用的字體庫，打開其他Sketch文件時消约，如果找不到該種類型的字體肠鲫，會用其他字體替換；缺失的字體可以通過系統(tǒng)字典進(jìn)行安裝或粮，安裝完成后导饲，在“Typeface”處切換字體類型即可。另外氯材，可以通過“Weight”切換字重渣锦，即普通，加粗氢哮，細(xì)體等袋毙。

②對齊和寬度自適應(yīng)

Sketch中提供四種常見的文字對齊方式：左對齊、居中對齊冗尤、右對齊听盖、兩端對齊，通過檢查器的“Alignment”選擇即可裂七。其中“Width”選擇“Auto”和“Fixed”都使文本邊框適應(yīng)文字內(nèi)容皆看。

③間距

如果要設(shè)置文字的間距，可以通過“Spacing”進(jìn)行設(shè)置碍讯，“Character”悬蔽、“Line”、“Paragrah”分別對應(yīng)字間距捉兴、行間距以及段落間距蝎困。

（2）文字工具的高級設(shè)置

點擊字重“Weight”下方的“Options”按鈕录语，即可看到針對文字的高級設(shè)置選項。

①下劃線和刪除樣式

如圖禾乘，在“Decoration”中可以設(shè)置文字的下劃線和刪除樣式澎埠。

②段落符號

段落符號可以在“List Type”中進(jìn)行選擇。

③大小寫切換

通過“Text Transform”可以把小寫英文切換為大寫英文字母始藕，雖然不建議這樣做蒲稳，因為全部大寫的英文字母會變得讓人難以閱讀，用戶平時接觸大寫字母作為單詞組的較少伍派，會導(dǎo)致閱讀的時間大大增加江耀。

（3）文字轉(zhuǎn)換為圖形

有時候，我們可能會設(shè)計一款字體诉植，或者針對字體做微小的改動祥国，以期達(dá)到我們想要的廣告效果，那么使用Sketch的文字轉(zhuǎn)換為圖形的功能晾腔，將會變得十分方便舌稀。具體做法是，右鍵點擊文字灼擂，在呼出的菜單中選擇“Convert to Outlines”即可把文字轉(zhuǎn)換為圖形壁查。