這期我們需要學(xué)習(xí)的是基本工具的使用，涉及線條、幾何、文字工具三個(gè)類別。

一、基本工具

1. “Insert”快捷鍵的使用

　　什么是你在設(shè)計(jì)中最常用的呢?創(chuàng)建一個(gè)新的Artboard A，插入文字T，創(chuàng)建一個(gè)矩形R或者橢圓形O。

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

（1）圓形工具

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

圓形通常應(yīng)用于圓環(huán)圖、圓形icon、圓形頭像

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

（2）矩形工具

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

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

（3）其他形狀

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

1.線條工具

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

（1）直線工具

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

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

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

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

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

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

（2）鋼筆工具

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

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

（3）鉛筆工具

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

2.幾何工具

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

（1）圓形工具

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

圓形通常應(yīng)用于圓環(huán)圖、圓形icon、圓形頭像

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

（2）矩形工具

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

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

3.文字工具

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

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

①文字類型

Sketch中自帶常用的字體庫，打開其他Sketch文件時(shí)，如果找不到該種類型的字體，會用其他字體替換；缺失的字體可以通過系統(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è)置

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

①下劃線和刪除樣式

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

②段落符號

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

③大小寫切換

通過“Text Transform”可以把小寫英文切換為大寫英文字母，雖然不建議這樣做，因?yàn)槿看髮懙挠⑽淖帜笗兊米屓穗y以閱讀，用戶平時(shí)接觸大寫字母作為單詞組的較少，會導(dǎo)致閱讀的時(shí)間大大增加。

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

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

二、小技巧

1. 正確的方式縮放

　　縮放到100%：?CMD+0;

　　查看你畫布全部的設(shè)計(jì)：?CMD+1;

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

2. 滾動

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

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

3. 隱藏/顯示sidebars

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

4. 標(biāo)尺

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

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

5. 在移動的時(shí)候查看margin值

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

6. 改變對象尺寸

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

7. 為對象命名和建組

　　當(dāng)你的設(shè)計(jì)項(xiàng)目很大的時(shí)候，你會發(fā)現(xiàn)給對象命名和建組會很有用。

　　每次我創(chuàng)建新的對象的時(shí)候我機(jī)會按下?CMD + R，為其名一個(gè)有意義的名字。

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

8. 復(fù)制對象

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

　　如果你不想復(fù)制后的對象在同樣的位置，你可以在此設(shè)置。

三、小案例

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。