這期我們需要學習的是基本工具的使用，涉及線條、幾何、文字工具三個類別。

一、基本工具

1. “Insert”快捷鍵的使用

　　什么是你在設計中最常用的呢?創建一個新的Artboard A，插入文字T，創建一個矩形R或者橢圓形O。

格式塔原理告訴我們，簡單的整體更容易被人腦所理解。所以，在交互設計當中，圓形、矩形以及其他幾何圖形出現的頻率最高。

（1）圓形工具

在第一期當中，我們就使用圓形工具創作了第一個作品，現在來重溫一下吧。通過工具欄的橢圓工具“Oval”插入，或者通過工具欄的“Insert”-“Shape”-“Oval”（快捷鍵O）插入一個圓形即可。

圓形通常應用于圓環圖、圓形icon、圓形頭像

如下圖所示，取消填充，改變邊框的大小即可快速得到一個圓環圖。另外，可以通過調節“Position”中的“Center”、“Inside”、“Outside”，來調整邊框所在的位置。

（2）矩形工具

矩形工具是應用十分頻繁的工具之一，常見的卡片、按鈕、輸入框等都屬于矩形。通過工具欄的矩形工具“Rectangle”插入，或者通過工具欄的“Insert”-“Shape”-“Rectangle”（快捷鍵R）即可插入一個矩形。

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

（3）其他形狀

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

1.線條工具

為了方便系統學習，我們把Sketch中直線、鋼筆、鉛筆都歸在線條工具中，再逐一講解。線條在生活中隨處可見，在交互設計中同樣使用頻繁，例如分割線、形狀勾勒等。

（1）直線工具

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

然后，我們可以通過調整檢查器的“Thickness”調整直線的粗細。

假如，我們需要一條虛線，則在直線的基礎上點擊“Borders”所在的設置圖標，在彈出的面板中，改變第二個“Gab”數值即可得到一條虛線。由于直線是由無數個點組成的，我們可以理解為“Gab”是控制點和點距離遠近，而“Dash”是則是控制點的大小，通過調整“Gab”和“Dash”可以得到各種各樣的虛線效果。

通常，我們在做標記說明的時候，需要一個箭頭來指示方向，同樣在“Borders”設置彈出面板，在“Start Arrow”或者“End Arrow”選擇端點形狀為箭頭即可。

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

最后，我們重溫一下直線工具的使用方法：粗細、虛線、箭頭、彎曲。

（2）鋼筆工具

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

配合貝塞爾曲線，能對鋼筆繪線進行修正，使其達到我們想要的弧度，應用在曲線畫圖上，例如折線圖。

（3）鉛筆工具

鉛筆工具在交互設計中應用得比較少，它的特點是能繪制無規則的圖形，例如制作獨特的簽名。如圖所示，可以通過快捷工具欄“Pencil”或者“Insert”-“Pencil”（快捷鍵P）使用鉛筆工具。

2.幾何工具

格式塔原理告訴我們，簡單的整體更容易被人腦所理解。所以，在交互設計當中，圓形、矩形以及其他幾何圖形出現的頻率最高。

（1）圓形工具

在第一期當中，我們就使用圓形工具創作了第一個作品，現在來重溫一下吧。通過工具欄的橢圓工具“Oval”插入，或者通過工具欄的“Insert”-“Shape”-“Oval”（快捷鍵O）插入一個圓形即可。

圓形通常應用于圓環圖、圓形icon、圓形頭像

如下圖所示，取消填充，改變邊框的大小即可快速得到一個圓環圖。另外，可以通過調節“Position”中的“Center”、“Inside”、“Outside”，來調整邊框所在的位置。

（2）矩形工具

矩形工具是應用十分頻繁的工具之一，常見的卡片、按鈕、輸入框等都屬于矩形。通過工具欄的矩形工具“Rectangle”插入，或者通過工具欄的“Insert”-“Shape”-“Rectangle”（快捷鍵R）即可插入一個矩形。

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

3.文字工具

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

（1）文字工具的基本設置

①文字類型

Sketch中自帶常用的字體庫，打開其他Sketch文件時，如果找不到該種類型的字體，會用其他字體替換；缺失的字體可以通過系統字典進行安裝，安裝完成后，在“Typeface”處切換字體類型即可。另外，可以通過“Weight”切換字重，即普通，加粗，細體等。

②對齊和寬度自適應

Sketch中提供四種常見的文字對齊方式：左對齊、居中對齊、右對齊、兩端對齊，通過檢查器的“Alignment”選擇即可。其中“Width”選擇“Auto”和“Fixed”都使文本邊框適應文字內容。

③間距

如果要設置文字的間距，可以通過“Spacing”進行設置，“Character”、“Line”、“Paragrah”分別對應字間距、行間距以及段落間距。

（2）文字工具的高級設置

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

①下劃線和刪除樣式

如圖，在“Decoration”中可以設置文字的下劃線和刪除樣式。

②段落符號

段落符號可以在“List Type”中進行選擇。

③大小寫切換

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

（3）文字轉換為圖形

有時候，我們可能會設計一款字體，或者針對字體做微小的改動，以期達到我們想要的廣告效果，那么使用Sketch的文字轉換為圖形的功能，將會變得十分方便。具體做法是，右鍵點擊文字，在呼出的菜單中選擇“Convert to Outlines”即可把文字轉換為圖形。

二、小技巧

1. 正確的方式縮放

　　縮放到100%：?CMD+0;

　　查看你畫布全部的設計：?CMD+1;

　　縮放特定的對象：選擇對象然后按下?CMD+2。

2. 滾動

　　在沒有觸控板的情況下如何橫向滾動? 使用?Shift+滾輪。

? ? ? ? 放大縮小?CMD+滾輪

3. 隱藏/顯示sidebars

　　如果在一個小的屏幕上操作，你可能需要隱藏左右兩邊的圖層面板(Layer-List-sidebar)和右側的工具面板(Inspector Sidebar)，使用?CMD+?Alt +3?；蛘咧浑[藏左側?CMD+?Alt +1,隱藏右側?CMD+?Alt +2。

4. 標尺

　　按下Ctrl+ R可以顯示或者隱藏標尺。雙擊標尺可以添加參考線，將參考線拖到最左側或者最右側可以將其刪除。

　　使用方向鍵你可以移動選中的對象1px，如果在按著?Shift則可以每次移動10px。

5. 在移動的時候查看margin值

　　在移動的時候按下?Alt即可查看對象的margin值。

6. 改變對象尺寸

　　按下?CMD+方向鍵可以改變對象的尺寸，同樣的按下?Shift+?CMD+方向鍵可以每次10px的改變對象的尺寸。

7. 為對象命名和建組

　　當你的設計項目很大的時候，你會發現給對象命名和建組會很有用。

　　每次我創建新的對象的時候我機會按下?CMD + R，為其名一個有意義的名字。

　　建組則可以使用?CMD + G。

8. 復制對象

　　如果你不想使用?CMD + C和?CMD + V來復制對象，你可以使用?CMD + D一步到位。? alt+拖動可以復制

　　如果你不想復制后的對象在同樣的位置，你可以在此設置。

三、小案例

本教程使用Sketch繪制小鳥圖標一枚，使用到軟件功能很簡單目的是為了能夠逐步的由淺入深的來介紹這款軟件。

總結

以上是生活随笔為你收集整理的03-sketch基本工具使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。