Sketch中畫布的概念

01、sketch的畫布是無限大的，也就是說一個(gè)畫布里面能放置很多個(gè)畫板

02、一個(gè)sketch文件中能新建多個(gè)頁面，而每個(gè)頁面中又可以添加多個(gè)畫板

（一個(gè)skech文件中新建多個(gè)頁面—page 點(diǎn)擊右上角“+”新建頁面）

03、新建畫板的方法

（插入畫板的方法）

當(dāng)然自己自定義的畫板也會(huì)被存儲下來，下次使用就可以直接選擇。

在這里進(jìn)行選擇自定義的畫板

04、按住alt鍵的同時(shí)鼠標(biāo)左鍵拖動(dòng)畫板，即可進(jìn)行復(fù)制

05、在左側(cè)的圖層區(qū)域可以修改畫板的名稱，雙擊即可進(jìn)行修改

06、刪除畫板：選中畫板——右鍵Delete/直接按Delete鍵

sketch中的快捷鍵

01、按住alt鍵的同時(shí)拖動(dòng)鼠標(biāo)左鍵可實(shí)現(xiàn) 拖動(dòng)畫布

02、放大畫布：Z+鼠標(biāo)左鍵縮小畫布：Z+alt+鼠標(biāo)左鍵

顯示畫布全部內(nèi)容：command+1最大化顯示畫布：command +0

03、復(fù)制頁面元素：按住alt鍵的同時(shí)鼠標(biāo)左鍵拖動(dòng)

04、原位復(fù)制粘貼／重復(fù)上一步動(dòng)作：command +D

（比如上一步通過按住alt鍵同時(shí)拖動(dòng)鼠標(biāo)左鍵的方式實(shí)現(xiàn)了元素的復(fù)制，此時(shí)按command +D 可以實(shí)現(xiàn)再次復(fù)制，并且復(fù)制出來的元素等距）

05、編組：command+G（先框選要進(jìn)行編組的頁面元素）

取消編組：在圖層上面右鍵選擇ungroup或者點(diǎn)擊上面工具欄中的

編組后的元素成為了一個(gè)整體，選擇的話也是選擇整體，如果想選擇單個(gè)元素可以按住ctrl鍵的同時(shí)單擊選擇即可。

06、按住alt鍵可以顯示選中的元素和其他元素之間的距離

07、R：插入矩形? O：插入圓形? L：插入直線? U：插入圓角矩形

08、放大或者縮小頁面元素 按住command鍵的同時(shí)按左右方向鍵即可實(shí)現(xiàn)頁面元素的放大縮小 如果是正圓形或者是正方形可實(shí)現(xiàn)等比例擴(kuò)大或者縮小，如果是長方形則通過調(diào)節(jié)右側(cè)邊實(shí)現(xiàn)放大縮小

如果開始畫的是正方形，但想實(shí)現(xiàn)一個(gè)邊的放大縮小，則需要先解鎖

09、添加或刪除頁面元素填充 快捷鍵：F（先選中元素）Fills

??? 添加或刪除頁面元素描邊 快捷鍵：B（先選中元素）Border

view基礎(chǔ)操作

01、shou pixels

sketch中的元素都是矢量的，也就是說放大是不會(huì)虛的，選中元素，點(diǎn)擊頁面右上角的view 選擇shou pixels，可以讓頁面元素暫時(shí)以像素形式顯示，但不是真的變成了像素。

02、show rules

勾選show rules之后可以看到在頁面的上面和左側(cè)出現(xiàn)了標(biāo)尺，出現(xiàn)標(biāo)尺之后就可以建立輔助線了，sketch中建立輔助線的方法和ps略有不同，sketch新建和刪除標(biāo)尺都需要在標(biāo)尺區(qū)域內(nèi)進(jìn)行

新建輔助線是在標(biāo)尺區(qū)域內(nèi)點(diǎn)擊，刪除輔助線是直接拖拽到左側(cè)標(biāo)尺和上面標(biāo)尺相交的左上角區(qū)域即可刪除

刪除所有輔助線的操作是：在標(biāo)尺上右鍵 remove all vertical Guides

03、show grid

顯示網(wǎng)格：這個(gè)在做圖標(biāo)的時(shí)候比較常用? 點(diǎn)擊grid settings可以對網(wǎng)格的大小和每個(gè)單元內(nèi)網(wǎng)格的數(shù)量進(jìn)行設(shè)置

04、show layout

顯示柵格：這個(gè)在做網(wǎng)頁的時(shí)候比較常用 點(diǎn)擊layout settings可以對柵格進(jìn)行各種設(shè)置。

05、當(dāng)頁面中有新建的畫板時(shí)，選中畫板可以直接針對這個(gè)畫板顯示網(wǎng)格和柵格。

形狀之間的布爾運(yùn)算

布爾運(yùn)算的操作可以在頂部工具條中進(jìn)行

布爾運(yùn)算比較簡單，選中兩個(gè)元素執(zhí)行上面的操作即可。

注意：執(zhí)行布爾運(yùn)算后的元素其實(shí)還是單獨(dú)的個(gè)體，這個(gè)時(shí)候我們還可以對兩個(gè)不同的個(gè)體進(jìn)行單獨(dú)的設(shè)置，比如說移動(dòng)位置等。

缺點(diǎn)是不能單獨(dú)調(diào)整錨點(diǎn)

在左側(cè)的圖層中可以單獨(dú)選中每個(gè)元素。

注意：如果想把執(zhí)行完布爾運(yùn)算之后的兩個(gè)圖形固化下來，讓它真正的變成一個(gè)圖形，則可以點(diǎn)擊上方工具欄中的Flatten

固化之后的圖形雙擊進(jìn)入編輯模式，可以單獨(dú)針對錨點(diǎn)進(jìn)行調(diào)節(jié)

設(shè)置頁面元素放大縮小或者移動(dòng)都是整數(shù)值

菜單欄——sketch——preferences——pixel Fitting（勾選即可）

快速進(jìn)入頁面元素的編輯模式（可調(diào)節(jié)錨點(diǎn)）

方式1：雙擊? 方式2：選中元素按回車鍵? 方式3：工具欄點(diǎn)擊

進(jìn)入編輯模式后可以單獨(dú)針對某個(gè)錨點(diǎn)進(jìn)行編輯

四種錨點(diǎn)顯示方式，對應(yīng)的快捷鍵分別是 1 2 3 4

兩段路徑的鏈接操作

layer——path——join

注意這個(gè)方法是將臨近的錨點(diǎn)鏈接在一起

旋轉(zhuǎn)/鏡像畫面元素

旋轉(zhuǎn)

方法1：快捷鍵 command+shift+R 呼出旋轉(zhuǎn)模式，鼠標(biāo)放在端點(diǎn)處可旋轉(zhuǎn)

方法2：選中頁面元素在右側(cè)屬性欄操作

方法3：按住command鍵 鼠標(biāo)放在端點(diǎn)即可實(shí)現(xiàn)旋轉(zhuǎn)

方法4：在工具欄中進(jìn)行操作

鏡像

可在右側(cè)屬性欄中進(jìn)行操作

頁面中元素的鎖定與解鎖

鎖定

快捷鍵：command+shift+L（先選中元素）

解鎖

?在左側(cè)圖層面板中進(jìn)行操作，被鎖定的元素后面都有一個(gè)小鎖 點(diǎn)擊可解鎖

自定義sketch工具條

在上方工具條的任意位置，右鍵

選擇Customize Toolbar

常用的工具直接拖拽到工具條，不想用的直接從上方的工具條中拖拽下來

對齊方式命令在右側(cè)屬性欄的最上方

吸管工具的使用

首先，吸管工具能吸到頁面上任意元素的顏色，包括頁面上的圖標(biāo)顏色

吸管工具在哪：點(diǎn)開顏色面板在下方可以找到

調(diào)出吸管工具的快捷鍵是 ctrl+C

透視

選中頁面元素點(diǎn)擊工具欄中的透視工具即可對頁面元素進(jìn)行調(diào)整，注意操作的時(shí)候不需要進(jìn)入編輯模式，可以直接進(jìn)行調(diào)整。

認(rèn)識填充面板和描邊面板

填充面板

拾色器

點(diǎn)開拾色器面板可以看到拾色器面板的操作選項(xiàng)還是比較多的，下面分別講解

選擇填充方式，從左到右側(cè)依次是：純色、線性漸變、徑向漸變、角度漸變、圖案填充、雜色

上面色條調(diào)節(jié)色相，下面色條調(diào)節(jié)透明度

鼠標(biāo)放在“A”上面可以左右滑動(dòng)調(diào)節(jié)透明度

鼠標(biāo)點(diǎn)擊“RGB”可以切換為“HSB模式的色值”

這個(gè)部分是與存儲的顏色，點(diǎn)擊“+”可以將當(dāng)前顏色添加到色板

線性漸變的調(diào)節(jié)：在漸變色的色條上面雙擊可以添加色塊，選中色塊按delete可以刪除

在圖案填充模式下，點(diǎn)擊“choose Image”可以選擇本地電腦上的文件進(jìn)行填充。點(diǎn)擊“Fill”下拉框可以選擇填充樣式。

點(diǎn)擊填充面板右上角的“+”可以給頁面元素添加多層填充

通過選擇“Normal”的下拉列表可以設(shè)置多層填充之間的混合模式

刪除添加的填充的方式有2種

方法1：直接用鼠標(biāo)左鍵拖動(dòng)到畫布中即可刪除

方法2：去掉填充前面的復(fù)選框，右上會(huì)出現(xiàn)垃圾桶圖標(biāo)，點(diǎn)擊刪除即可

注意：如果不勾掉復(fù)選框，垃圾桶圖標(biāo)不會(huì)出現(xiàn)。

描邊面板

描邊面板值得一提的就是設(shè)置圓角端點(diǎn)，點(diǎn)擊描邊面板中的設(shè)置按鈕即可進(jìn)行設(shè)置

sketch中蒙版的使用

在上方的工具條中可以找到蒙版工具

使用方法：

選中畫面中的兩個(gè)形狀，注意上下兩個(gè)形狀的圖層順序，上面的形狀是被蒙版的，下面的是蒙版區(qū)域。

蒙版的高級用法——多層蒙版嵌套

這是最終實(shí)現(xiàn)出來的效果，是由三個(gè)半圓蒙版出來的，其中灰色和淺粉色是蒙版與被蒙版的關(guān)系，淺粉色和粉色是蒙版與被蒙版的關(guān)系，如果大家還是不明白，來看一下左側(cè)的圖層

這樣就能一目了然了吧

剪刀工具的使用

剪刀工具可以在工具欄中找到，就是下面截圖的這個(gè)

剪刀工具主要是剪斷兩個(gè)錨點(diǎn)之間的線段，我們在制作斷點(diǎn)圖標(biāo)的時(shí)候經(jīng)常用到

右側(cè)的線段被剪掉了

在設(shè)置斷點(diǎn)的時(shí)候主要要選擇居中描邊

最終實(shí)現(xiàn)出來的效果如下

操作過程：給圓形去掉填充留下描邊，雙擊進(jìn)入編輯模式，給要減去的線段兩端添加錨點(diǎn)，用剪刀工具剪掉線段。

將描邊或者文字轉(zhuǎn)換成形狀

這個(gè)工具相當(dāng)于Ai中的“拓展外觀”，可以在工具條中找到，如下

拓展外觀之后，就由原來的描邊轉(zhuǎn)換成了矢量形狀，可對每個(gè)錨點(diǎn)進(jìn)行單獨(dú)調(diào)整。

將文字沿路徑饒排

操作步驟：

1.準(zhǔn)備好兩個(gè)頁面元素，一段文字，一個(gè)圓形，注意要先畫圓形形狀，然后敲文字。

2.給文字設(shè)置屬性

菜單欄? Text——text on path

3.將文字向圓形形狀方向移動(dòng)，即可實(shí)現(xiàn)文字饒排

sketch中的預(yù)設(shè)組件

我們在做UI設(shè)計(jì)的時(shí)候像狀態(tài)欄等固有的內(nèi)容，我們不需要自己制作，從sketch的空間庫中直接拿來用就行。

使用方法

01.菜單欄 file--new from Template—ios UI design

02.選中需要的組件，執(zhí)行command+C復(fù)制 回到自己的畫板command+V粘貼即可

固化圓角

新建一個(gè)矩形，雙擊進(jìn)入編輯模式，選中其中的一個(gè)角，調(diào)整右側(cè)屬性欄corners值

選中已經(jīng)調(diào)整為圓角的角，執(zhí)行l(wèi)ayer—path—Reverse order即完成了對圓角的固化，固化后的角可以以錨點(diǎn)的形式進(jìn)行調(diào)整。

sketch中的復(fù)用樣式和復(fù)用符號

復(fù)用樣式

復(fù)用樣式顧名思義就是將我們設(shè)置好的樣式應(yīng)用到頁面中的其他元素中

方法1：設(shè)置好樣式的圖層上面右鍵——copy style，然后在新元素圖層上面右鍵執(zhí)行paste style

方法2：選中設(shè)置好樣式的頁面元素，在右側(cè)屬性欄中進(jìn)行設(shè)置

點(diǎn)擊“creat new shared style”給新建的樣式命名，然后選中需要復(fù)用樣式元素，選中剛才新建的樣式即完成復(fù)用

復(fù)用符號

復(fù)用符號命令可以將一組元素存儲為一個(gè)復(fù)用符號，然后將這組元素應(yīng)用到多個(gè)頁面中，如果后期需要修改這組元素中的部分樣式，就可以實(shí)現(xiàn)改一個(gè)其他全部修改的目的。

比如我們將標(biāo)簽欄的這組元素設(shè)置為復(fù)用符號，進(jìn)行如下操作，選中這組元素，點(diǎn)擊工具欄中的creat symbol命令，命名

然后就可以將在這組元素應(yīng)用到其他頁面，后期修改就可以實(shí)現(xiàn)一改全改的目的

導(dǎo)出資源

方法1：可以將頁面中的icon等直接拖拽到桌面，直接導(dǎo)出

方法2：選中頁面上的元素，點(diǎn)擊右下角的make exportable可以導(dǎo)出多個(gè)倍率的切片

設(shè)置完成之后點(diǎn)擊 Export Group即可導(dǎo)出

批量導(dǎo)出

將需要導(dǎo)出的每個(gè)元素設(shè)置好倍率之后，點(diǎn)擊上方工具欄中的Export即可全部導(dǎo)出

這里可以勾選我們需要導(dǎo)出的元素，默認(rèn)是全部導(dǎo)出

分類導(dǎo)出

通過給頁面元素重命名的方式，可以實(shí)現(xiàn)切片的分類導(dǎo)出

比如我們給一組元素的切片前綴都命名為icon/? 比如下面這組元素的命名

icon/1? icon/2? icon/3

那么這三個(gè)資源導(dǎo)出來之后就會(huì)自動(dòng)存儲在一個(gè)角icon的文件夾中

設(shè)置切片區(qū)域

我們也可以在導(dǎo)出之前給切片設(shè)置切片區(qū)域

具體方法是

01.點(diǎn)擊上方工具欄中的insert—slice命令，選中切片工具，給icon切出切片區(qū)域

02.同時(shí)選中切片和icon按ctrl+G編組

選中切片圖層，右側(cè)屬性欄中勾選export group contens only僅導(dǎo)出組內(nèi)元素，可實(shí)現(xiàn)背景透明

這時(shí)就可以導(dǎo)出帶有區(qū)域的icon了。

Sketch中的插件

Sketch中有很多幫助我們提高工作效率的插件，這里就不一一做介紹，需要的朋友可以進(jìn)入下面的鏈接進(jìn)行下載安裝。

鏈接:https://pan.baidu.com/s/1yXXS7yncZqiWoEeb3ccRfg ?密碼:9bfj

轉(zhuǎn)自：https://www.zcool.com.cn/article/ZNzA2NDM2.html