sketch用戶手冊二之圖層

圖層(Layer)

圖層是sketch里的基本模塊,圖形(Shapes), 分組(Groups) 和畫板( Artboards) 都是不同類型的圖層

添加圖層

直接通過工具欄的Insert按鈕就能添加各種類型的圖層

添加圖層

或者直接使用每個圖層對應(yīng)的快捷鍵也可以添加圖層。比如:

A: 添加面板
R: 添加矩形
O: 添加橢圓

選中圖層

  1. 直接在畫布上點擊要選擇的圖層
  2. 也可以在The layer List里選中要選擇的圖層
  3. 通過按住Shift(?)鍵,可以依次選中多個圖層
  4. 通過在畫布空白處拖出一個選擇框來選中的各個圖層
  5. 通過在畫布空白處拖出一個選擇框,并同時按住?, 只會選中完全在框里的圖層
  6. 通過在畫布空白處拖出一個選擇框,并同時按住?, 會將選中的圖層添加到當前選中的圖層列表里
  7. 通過在畫布空白處拖出一個選擇框,并同時按住?, 可以實現(xiàn)反選的效果,即將已經(jīng)選中的圖層移除,沒有選中的添加到當前選中的圖層列表里
  8. 通過Edit > Select > Select All in Artboard選中一個畫板里的所有圖層

選擇重疊的圖層

在多個重疊的圖層上點擊選擇的同時,按住?鍵,可以選擇當前圖層下的第二個圖層,也可以右擊從Select Layer里選擇需要選中的圖層。

選擇重疊的圖層

圖層分組

通過給多個圖層分組,可以方便的調(diào)整一組圖層的大小,透明度等

選中要分組的多個圖層,通過Arrange > Group或者快捷鍵? + G對圖層進行分組

取消分組可以使用Arrange > Ungroup或者快捷鍵? + ? + G

當選中一個圖層組時,默認是選中整個組,如果要選中組里的單個圖層,可以雙擊圖層組,或者按住?+要選擇的圖層即可。

移動圖層

選中一個圖層后,通過拖拽即可移動圖層,拖拽的同時如果按住?, 可以顯示移動的像素信息。

使用Tidy重新整理多個圖層

選中多個圖層后,使用檢查器(Inspector)頂部的Tidy按鈕可以快速重新將多個圖層按照網(wǎng)格重新排序

智能排版

通過Tidy按鈕的布局之后,選中多個圖層, 可以智能調(diào)整圖層之間的間距或者位置

復(fù)制圖層

選中圖層之后,通過? + D鍵可以復(fù)制選中的圖層,也可以在拖拽圖層的同時,按下?鍵來復(fù)制圖層

對齊圖層

Ctrl + ? + H 垂直方向分布多個圖層
Ctrl + ? + V 水平方向分布多個圖層

調(diào)整圖層大小

選中圖層后,通過拖拽圖層的邊框可以調(diào)整圖層的大小。

拖拽的同時如果按住?鍵,可以保證拖出來的圖形寬和高都相等。用于拖拽正方形或圓形

拖拽的同時如果按住?鍵,可以保證是按照保證圖層的中心不變,按照中心縮放,而不是默認的按照某個邊進行縮放

通過檢查器調(diào)整圖層大小

可以直接在檢查器里通過設(shè)置寬和高的值來設(shè)置圖層的大小。
默認情況下,都是固定圖層左邊以及上面的邊來調(diào)整圖層大小的。

在檢查器輸入要調(diào)整的寬高的數(shù)字同時,也可以跟一些字符來控制要固定的邊。如:

  • l: 從左邊開始縮放(默認)
  • r: 從右邊開始縮放
  • t: 從上面開始縮放(默認)
  • b: 從下面開始縮放
  • c/m: 從中心開始縮放

比如:

設(shè)置寬度時,輸入200r, 可以實現(xiàn)固定圖層右邊不動的情況下,將寬度調(diào)整為200
設(shè)置高度時,輸入200b, 可以實現(xiàn)固定圖層下面的邊不動的情況下,將圖層高度調(diào)整為200。

同時,在設(shè)置寬和高時,也可以用一些簡單的運算, 如:

  • + 加法
  • - 減法
  • * 乘法
  • / 除法

也可以直接設(shè)置百分數(shù)。不過需要注意的是,當設(shè)置百分數(shù)時,是以圖層所在畫布的寬和高的百分比來計算的,而不是圖層本身之前的寬或高的百分比,

如: 設(shè)置寬度為10%, 就是將當前圖層的寬度設(shè)置為它所在面板寬度的10%,與圖層本身之前的寬度沒有任何關(guān)系。

在設(shè)置圖層四個角的拐角半徑時,如果只輸入一個數(shù)字,會同時設(shè)置4個角的拐角半徑。

也可以通過;作為分隔符,依次設(shè)置4個角的拐角半徑,比如對一個矩形設(shè)置為20;40;60;80,出來的效果如下:

拐角半徑

精細的調(diào)整

如果需要進行比較精細的大小調(diào)整,可以在選中圖層的同時,使用下面的快捷鍵

  • ? + : 寬度增加1px
  • ? + : 寬度減少1px
  • ? + ? + : 寬度增加10px
  • ? + ? + : 寬度減少10px

縮放圖層

當調(diào)整圖層大小時,之前對于圖層的一些設(shè)置,比如(strokes, border radii or shadow sizes)這些屬性都不會變化,如果需要讓這些屬性按照調(diào)整的比例一起變化時,可以使用Layer > Transform > Scale…或者快捷鍵? + K

畫板調(diào)整

選中畫板之后,如下圖所示:

如果使用Fit按鈕,會自動調(diào)整畫板的大小,讓它包含所有的圖層內(nèi)容。

如果候選上Adjust content on resize, 在調(diào)整畫板大小的同時,
也會調(diào)整里面的圖層大小。

畫板調(diào)整

布局約束

選中一個圖層之后,可以在檢查器的RESIZING里設(shè)置它相對于父容器的布局。

RESIZING
  • 通過Pin to Edge固定圖層的邊緣相對于父容器的位置
  • 通過Fix Size讓圖層隨著父容器的寬度和高度同步變化
  • 在Preview里能預(yù)覽變化的效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容