㈠ 80%的人不知道的Sketch小技巧
繪制矢量圖形時,你可以按住 shift 鍵再畫之後的點,Sketch會自動幫你對齊到前一點的45度角方向,這在你繪制直線時會非常方便。如果你是在兩點之間添加新的錨點時按住 shift 鍵,你便會得到兩點間的錨點。
如果你按住 command 鍵,單擊兩點間的線條,Sketch則會幫你在線條的正中間添加錨點。
繪制
如果你想改變圖形的起始點,你需要按住空格鍵,這樣你將會修改起始點,而不是圖形的大小
大小斗豎
我們有一個很特別的輸入框,滑鼠懸停上去時你會看見上下兩個小剪頭出現在文本區域右邊,你可以單擊他們來增減圖形的大小。如果你按住 shift 則會以 10 為單位變化。如果你按住 option 鍵,則會以0.1 為單位變化。
一旦你開始直接編輯輸入框,上下剪頭就會消失,但這個功能依然可用,你可以用鍵盤上的上下方向鍵配合 shift 或 option 鍵來完成。
漸變
你可以按下1-9的數字鍵來在漸變線的 10%-90% 的位置添加新的節點,所以如果按下 5,就能將節點添加在正中間。
如果你想在兩個節點的正中間添加,則按下 = 鍵即可。
還可以使用 tab 鍵快速的在不同節點中切換,用方向鍵(也可以同時按住 shift 鍵)移動節點。
背景模糊
背景模糊是在蘋果發布 iOS 7之後添加空森大的功能,需要確認有一個半透明的圖層在表面應用了背景模糊,這樣下層的內容才會出現模糊效果。
需要注意的是,模糊是一種非常消耗資源的渲染效果,圖層越大,模糊就需要佔用更多的內存空間和處理器能力。盡量少使用模糊,如果你一定要在背景模糊和普通模糊中選擇,那麼選擇普通模糊吧。
分離路徑
所有的復制圖形都會被視為原圖形的子路徑,如果你想讓他們成為完全獨立的圖層,你只需從菜單欄進入 編輯 > 路徑 > 分離 (Layer > Paths > Split)即可。
轉曲
不要將很長一段文字都轉化為矢量圖形,這會大大減緩文件的運行速度。
將一小段文字轉化為大量包含布爾運算的子路徑是非常非常消耗系統內存的,如果你不得不轉換一段文字,那麼你可以先將一段文字盡可能分成多個短文本,然後再一個個的轉化為矢量。
不過既然你現在可以直接在文本上運用漸變等效果,大多數時候你都不會需要將文本轉化為輪廓。
路徑文字
當你進入頂端的編輯菜單 > 文本路徑 (Edit > Text on Path),Sketch會幫你把文本圖層貼合的放在它下一層的矢量圖形上面。值得注意的是,兩者的順序必須是矢量圖形在文本圖層的下面,才能得到這樣的效果。
抗鋸齒
順利實現子像素抗鋸齒效果,文本必需出現在一個不透明的(有色的)背景上,因為系統需要知道最終的顏色對比結果是什麼樣的。這一點與圖層混合模式是相沖突的。要實現圖層混合模式,Sketch 需要在一個透明背景上渲染所有的圖層,這樣這些圖層才能像你所期望的那樣混合在一起,最終結果再渲染春螞回 Sketch 的白色畫布上。
如果沒有一個不透明背景我們就不能渲染抗鋸齒的文字,但是有了不透明的背景我們又不能渲染圖層的混合模式了。這就意味著,一旦你的畫布中出現了一個有混合模式的圖層,Sketch 就不得不運用透明背景的演算法,而無法給文字實現子像素抗鋸齒效果了。
色彩校正
如果你想微調一張現有圖片的顏色,那可以使用檢查器中的色彩校正面板來實現,在這,你可以改變圖片的飽和度,亮度和對比色。
需要注意的是,這一個不破壞原圖的操作,所以你稍後還可以再次更改這些參數。
九宮格
正常情況下,你縮放一個點陣圖時,他們會對稱的向各個方向變化。但有時這並不是你想要的,比如說你在做一個網頁設計,你也許會想要一個 safari 里的白色背景,隨著網頁內容變多而變長。
我們特意增加了針對圖片的九宮格縮放來解決這個問題。進入圖層 > 轉化為九宮格圖片 (Layer > Convert to Nine-slice Image),你會發現圖片被劃分為了9個區域。你可以單擊拖拽四個中心點的任一個來調整9個區域。
普通蒙板
Sketch里的蒙版可以讓你有選擇性的顯示出圖層的一部分。比如說在一個圖片上圓形蒙版,那麼這張圖片就只會顯示出圓形內部的內容。
所有的圖形都可以變成蒙版,你只需要先選中圖形,然後進入圖層 > 使用圖形蒙版(Layer > Use as Mask), 所有在這個蒙版上面的圖形都會被剪切成蒙版的內容顯示出來。
限制蒙版
如果你不想接下來所有的圖層都被蒙版剪切,那麼你可以將蒙版和想要被剪切的圖層單獨編組,一次來限制蒙版的使用情景。一旦蒙版被編組,其他一切在組外的圖層就都不會被蒙版剪切了。
在無法編組的情況下,你還可以通過以下方式限制蒙版:
・選中一個你想從剪切蒙版中釋放出來的圖層
・進入圖層 > 忽略底層蒙版 (Layer > Ignore Underlying Mask)
這一層圖層和它以上的所有圖層就都不會被蒙版剪切了。當你調整圖層順序的時候則需要格外注意,個別圖層可能會意外的被蒙版剪切。
ALPHA 蒙版
默認情況下,一個蒙版會顯示出所在區域的圖片,隱藏其他的地方。另一種使用蒙版的方式是通過 ALPHA 蒙版建立漸變區域,來具體選擇圖片的各部分是否可見
使用這個方法你可以先選中蒙版,選擇 圖層 (Layer) > 蒙版模式 (Mask Mode) > ALPHA 蒙版 (ALPHA Mask) 來實現。
復制
command + D,Sketch則會重復你剛才的操作,復制出一個一樣的圖層。
編組選擇
想從深深的編組層級中直接選中某一具體圖層,你可以按住 command 鍵,來直接選擇埋在組里的圖層,無需不停的雙擊以進入更深的層級,這將省去你不少的時間。同時按住 shift 鍵,則能選擇多個圖層。
疊加選擇
右擊滑鼠,從菜單中選擇 「選擇圖層」(Pick Layer),便會顯示出滑鼠底下的所有圖層列表。
按住 option 鍵,Sketch 會選中第二層圖層,而不是最上層的。如果某個區域有多個圖層重疊,而你想選擇第三層,那麼還是需要用到上面說的右擊滑鼠的方法來選擇了。
滑鼠框選
如果你同時按住 option 鍵,則只會選中完全被包括在所畫選取內的圖層
改變大小
可以直接使用鍵盤調整圖層大小。按住 command 鍵和方向鍵來操作。⌘→會將圖層寬度增加 1px,⌘←則會將寬度減少 1px。同樣的,⌘↓ 和 ⌘↑則分別將長度增加和減少 1px。如果你同時按住 shift 鍵,每一次更改的數值將會變成 10 px。
改變一個圖層的大小時,它的式樣元素並不會隨之變大變小:一個 10x10的圖形上 1px的描邊在這個圖形被拉伸至 50x50的時候,將仍保持 1px的描邊。想要更改圖層大小的同時一起更改式樣,那就使用編輯菜單當中的縮放工具吧。
圖層扁平化
當你使用扁平化功能( Flattening),Sketch 會試著將一個圖形里的多個子路徑呈現為一個路徑——也就是將層級結構變得更扁平。但是有些圖形是無法扁平為一個路徑的,比如說一個環狀圖形,將只能被呈現為兩個路徑:一個是外圈路徑,一個是內圈路徑
當 Sketch 不能完成扁平化的命令時,會出現一個小警告,如果你繼續堅持,那有的子路徑可能被替換,也許比之前少,也許和之前一樣多。
也許在你之前使用的繪圖應用中,你每次添加布爾運算後到要讓圖層扁平一次,但在 Sketch 當中大可不必這么做,你可以盡情添加無數曾布爾運算,而無需使用扁平命令。
你可以用無限精準的解析度無關模式來查看畫布,或者打開像素模式來查看每一個像素導出成JPG或者PNG文件後的樣子。值得注意的是,有些效果——比如模糊——會自動將畫布的一部分以像素模式顯示,因為模糊本身就是一個基於像素的效果。值得注意的是,當模糊半徑被設置為0的時候,文本圖層的內陰影才是最好看的。擴散並不適用於文本圖層。
可以按住 command 鍵並滾動滑鼠滾輪來放大查看。
還能用 Z 鍵來快速放大某一特定區域,單擊畫布任一點拖拽出矩形區域即可。
如果你在文件名中加入了一個斜杠 (一個"/"),那麼Sketch就會自動新建一個文件夾,並把這個文件放入其中。舉個例子,如果你將切片命名為 foo/bar.png ,那麼Sketch會先幫你創建一個叫做 foo 的文件夾,然後在裡面創建一個叫 bar.png 的圖片。
㈡ sketch快捷鍵
一、畫板/圖層相關快捷鍵
1.快速重命名圖層:command+R
2.依次選擇上一個圖層:Shift + Tab(下一個圖層是單按 Tab)
3.顯示/隱藏圖層:cmd+shift+h
4.Comd+shift+L: 鎖定圖層/解鎖蠢配圖層
5.折疊與展開所有圖層:顯示-圖層列表
6.作為蒙版使用:control+cmd+m
7.圖層上移/下移山散一層:alt+cmd+上箭頭/下箭頭
8.查找圖層:cmd+f
9.將圖層移到最頂層:Control + Alt + Cmd + ↑
10.將圖層移到最底層Control + Alt + Cmd + ↓
二、樣式相關快捷鍵
1.復制圖層樣式:Command + Option + C
2.粘貼圖層樣式:Command + Option + V
3.吸取顏色:control+c
三、字體相關快捷鍵
1.字體加粗:cmd+b;字體傾斜:cmd+i;字體下劃線:cmd+u
2.字間距:alt+control+L
3.字大小:cmd+alt++/-
4.文字轉曲:cmd+shift+o
四、局部/屏幕查看
1.將屏幕帶唯指放大到特定區域:Z + 單擊/選區
2.放大選中對象到屏幕合適的大小:comd+2
3.縮小至能看見所有的畫板:comd+1
4. 縮小至100%:comd+0
5.等比縮小:Z+Option
6.隱藏左邊欄:command+option+1
7. 隱藏右邊欄:Option+Cmd+2
8.全屏演示:cmd+ .
9.當前畫布窗口居中:cmd+3
10.sketch進入/退出全屏模式:control+cmd+f
㈢ sketch新手入門(中文版)-9 控制項
控制項幫助我們加快我們的工作流,我們可以不斷的重復利用我們設計中的元素,當我們對其中的元素改動時,所有的控制項也都會更新,我們也可以利用覆蓋層來控制我們的獨立控制項。
要創建一個控制項,我們可以選擇一個群組,一個美術板,一個層然後在工具欄中選擇創建組件,或者選擇層>創建組件。給你的組件取一個名字,這是你的控制項的父裂謹級元素,當你創建一個模板的時候,sketch會自動幫助你創建一個實例,如果你對母版進行了更改,會顯示在所有實例中。
如果你在野陵創建控制項的時候,勾選了發送控制項到控制項頁面,那麼控制項就會自動發送到控制項層,如果你沒有勾選,那麼你將在當前頁面看到控制項。
選擇 圖層>從控制項中分離,任何與其有關的實例將變成文件夾,母版和實例分開,無關聯。
當您創建了一個符號時,您可以在設計中插入任何現有的層。要執行此操作,請在層上單擊控制項,選擇「替換為」,然後選擇符號。您選擇的符號將調整大小以適應層的大小。
有兩種方法可以訪問和在sketch中插入符號。
1.通過單擊層列表頂部的組件,可以通過畫布左側的組件面板插入符號(圖層和組件之間切換)在組件庫中可以選擇查看「所有」可用的符號以及僅屬於文檔或特定庫的符號。
2.您可以使用「組件」面板底部的搜索欄快速找到要查找的符號,找到所需的符號後,只需將該符號直接拖放到畫布上。 快捷鍵(command +shift+ f)
或者,可以通過頂部工具欄中的「置入」或使用「置入」菜單插入符號。從這里您可以查看文檔符號或屬於任何已啟用庫的符號並從中進行選擇。
編輯控制項有兩種主要方法。可以編輯符號母版中的內容,也可以使用替代編輯單個實例。
找到你的母版或雙擊它的任何實例直接轉到它。對主控形狀所做的任何編輯都將同步到設計中主控形狀的任何實例。肆脊基完成更改後,選擇「返回到實例」返回到實例並查看更改是如何跨實例同步的。
選擇一個控制項實例,您將在檢查器中看到一個覆蓋層。通過在檢查器中編輯這些覆蓋層,可以更改單個符號實例中的內容,而不更改其主實例或影響其任何其他實例。
注意:您還可以直接在畫布中為符號實例設置文本覆蓋。
選擇符號實例並將滑鼠懸停在其上以高亮顯示任何可用的替代,單擊其中任何一個以快速找到它,並在檢查器中單獨顯示它。如果符號具有大量替代(或嵌套替代),則這很方便。
或者,在檢查器中單擊符號名稱旁邊的三角形,然後在那裡選擇。也可以控制單擊「圖層」列表中的替代以查看與其相關的選項。
注意:即使您已經專注於某個特定的覆蓋,移動或復制它之類的操作也將應用於整個實例,而不是特定的覆蓋層。您需要使用符號母版來更改覆蓋層本身。
可以通過幾種方式更改文本覆蓋的內容。您可以雙擊畫布上符號實例中的文本層,然後鍵入新內容,或鍵入檢查器中的覆蓋欄位。刪除該欄位中的任何內容都會將其更改回符號母版中的文本。也可以使用欄位上方的數據圖標填充覆蓋。
注意:如果替代文本比符號母版中原來的文本長,則sketch將在文本層擴展時移動文本層旁邊的任何層。如果要修復圖層並使文字在其上流動,則需要將其鎖定在符號母版中。
可以使用填充檢查器覆蓋任何圖像層或形狀。您可以將圖像拖到預覽中,或選擇「選擇圖像…」也可以通過單擊數據圖標使用數據填充圖像覆蓋。要刪除圖像,請單擊圖像預覽並按backspace。
如果在設計中設置了文字樣式或圖層樣式,則可以在檢查器的「替代」面板中找到這些樣式。
如果已將熱點作為原型的一部分添加到符號母版,則可以覆蓋其目標藝術板,或選擇「無」將其禁用。
選擇符號主控形狀,並使用檢查器中「管理替代」面板中每個可用替代旁邊的復選框來選擇在設計中的任意位置選擇該符號的實例時哪些替代可用。
選擇任意實例,然後單擊檢查器中「覆蓋」面板標題旁邊的「重置」圖標,以刪除和重置已應用於該實例的任何覆蓋。
若要在不使用覆蓋的情況下對單個符號實例進行編輯,您需要從菜單中選擇圖層›從控制項中分離,將其與其主實例分離。您也可以快捷方式控制單擊它,然後在那裡選擇「從控制項分離」。按住選項鍵可將命令更改為從控制項中分離所有內容,從而將控制項及其包含的任何嵌套控制項轉換為組。
可以使用檢查器中「控制項」面板中的「組件」彈出框交換符號。從列表中選擇控制項或搜索要查找的控制項,然後單擊將其與當前選定的符號控制項。
默認情況下, 交換控制項將調整所選實例的大小,以適合其新的控制項母版 。要在交換 控制項 時保持實例大小不變,請取消選中組件彈出窗口頂部的「按原始大小交換」選項。
使用「縮放」命令,可以像任何其他圖層或組一樣縮放和調整控制項的大小。從菜單中選擇Layer>Transform>Scale…( 或按⌘+K) 。邊框等樣式和屬性將與符號本身成比例增加或減少,而不會影響母版控制項形狀。
若要在「元件」面板和「插入」菜單中將符號組合在一起,請使用以下格式命名符號:控制項組名/控制項名。 例如,名為Button/Normal和Button/Pressed的兩個符號將成為名為Button的組的一部分。
注意:在一個組中出現兩個或多個控制項之前,它們必須出現在自己的子菜單中。
也可以通過「組件」面板組織控制項。只需雙擊任何控制項或組即可重命名它。您可以將控制項拖放到現有的組中,或者只需拖動一個控制項就可以創建一個新的組。
控制項的排列是按照字母表的順序排列的。
將控制項母版發送到「符號」頁可以幫助保持事物的組織,特別是在復雜的設計中。它也有助於減少使用控制項母版或實例之間的混淆。
若要手動移動控制項母版,請將其拖到「圖層」列表中的「控制項」頁標題上,或控制單擊它並選擇「發送到「控制項」頁。
若要創建嵌套控制項,請將符號實例插入「控制項」頁上的控制項母版。現在,編輯該控制項實例的主控形狀時,它將在任何位置更新,包括其他控制項主控形狀中的實例。
也可以通過選擇兩個或多個控制項實例並在工具欄中選擇「創建控制項」來創建嵌套控制項。
注意:可以在彼此之間嵌套多少個控制項是沒有限制的,但不能在其主控形狀中使用控制項的實例。
#如何使用嵌套控制項替代
若要使用嵌套控制項以使其顯示為替代, 需要有兩個或多個大小相同的控制項母版 ,並將其中一個用作嵌套控制項。
當您在設計中選擇控制項實例時,您將看到將嵌套控制項替換為任何其他相同大小的控制項的選項。這在菜單中很有用,例如,當菜單中的按鈕處於活動和非活動狀態時。
若要快速訪問某個嵌套替代的主控制項,請在檢查器中單擊嵌套替代控制項旁邊的箭頭圖標。
當覆蓋更改控制項的大小時,智能布局將保持控制項中各層之間的填充和間距。設置智能布局後,更改控制項實例中的替代將自動調整其大小。
要使用智能布局,只需創建一個控制項,並為其提供水平或垂直布局。創建該控制項的實例並編輯其替代時,智能布局將使用控制項主控形狀中各層之間的間距和填充作為藍圖,並在調整實例大小時保持它們的一致性。
可以在檢查器中設置智能布局屬性(當編輯現有的控制項母版)或創建新的符號時。
若要使用具有現有控制項的智能布局,請指向它的主控器(您可以通過選擇該控制項的任何實例並在鍵盤上按Enter鍵快速到達那裡),並選擇您希望智能布局如何在檢查器的布局面板下調整其大小。
除了選擇控制項是水平調整大小還是垂直調整大小外,還需要設置控制項的調整方向(請將其與文本對齊方式類似)。可以從以下布局屬性中進行選擇:
垂直:
自上而下
自下而上
從中間
水平:
從左到右
從右向左
從中間
創建新控制項時,可以使用「創建新控制項」工作表中「名稱」欄位下的下拉菜單設置這些屬性。
注意:將智能布局屬性應用於具有文本層的符號時, 需要確保將其設置為「自動高度」(對於垂直布局)或「自動寬度」(對於水平布局) 。智能布局將符號母版中文本層的尺寸與實例中文本層的尺寸進行比較,以確定符號中其他層應如何調整大小,因此固定大小的文本層不會工作,因為它們始終保持不變。
當您提供符號智能布局屬性時,您將在顯示其布局方向的圖層列表中,在其名稱旁邊看到一個新圖標。
如果在已設置智能布局屬性時更改控制項母版的布局,則該控制項的實例可能會出錯。 若要解決此問題,請嘗試單擊檢查器中「覆蓋」面板下顯示的「縮小實例以適應內容」按鈕。
注意:您仍然可以對具有智能布局特性的控制項中的圖層應用調整大小約束。如果你想讓一個特定的圖層忽略你給它一部分的布局設置,這很方便。例如,可以使用調整大小約束來固定圖層的大小,並使用具有水平或垂直布局的符號實例阻止其調整大小。
選擇符號的智能布局屬性時,將在檢查器的布局面板下看到最小高度(垂直布局)或最小寬度(水平布局)欄位。
將尺寸添加到這些欄位將阻止符號縮小到最小尺寸以下,而不管其替代內容如何。如果將這些欄位留空,則符號將縮小到任何大小以適合其內容。
#如何在符號中使用多個智能布局屬性
對於更復雜的UI組件,您可能希望在垂直布局中包含水平布局(反之亦然),如下例所示。為此,可以將智能布局特性應用於符號主控形狀中的組,以便在不同方向調整不同圖層集的大小。
為此,請打開控制項母版,選擇要在不同方向調整大小的對象,然後對它們進行分組。現在,您可以將一組單獨的智能布局屬性應用於檢查器布局面板下的該組。與符號本身一樣,您將在圖層列表中看到一個新的組圖標,顯示它們的布局方向。
如果您有一個控制項,其中一個圖層指示該符號的最小高度(如下面卡片示例中的圖像),則對其旁邊較短的文本圖層應用覆蓋將導致該符號使用不必要的填充調整大小。如果是這種情況,則需要在控制項母版中將文本層和指定符號最小高度的層組合在一起。完成後,您將能夠覆蓋文本層,並且智能布局將知道在文本超過其最小高度之前不會增加整個符號高度。
智能布局不僅在覆蓋更改符號實例的大小時有效,在隱藏符號時也有效。為此,您需要一組遵循符號母版布局方向的嵌套組件(例如,具有水平布局的菜單中的一行按鈕)。通過覆蓋面板隱藏其中一個控制項將導致其他控制項向上移動並填充空白點。這甚至適用於不同高度和寬度的符號。
㈣ sketch 新手入門(中文版)-1界面
畫布是我們的設計產生的地方,是無限的。所以我們不必擔心我們的設計在何處開始,因為畫布不會沒有空間。(類似無限平面)不過如果你一定更喜歡在一個固定的空間中開始設計的話,你可以在你的畫布上創建一個藝術畫板。(畫板在工具欄中可創建,快捷鍵A)
工具欄提供我們快速漸變的介面幫助我們去取得重要的工具和做一些你常做的事情。通常情況下軟體幫你在工具條中安排了一些默認值,但是你也可以根據你的使用習慣改變這些操作。 你可以通過自定義工具欄這個選項(視圖->自定義工漏伍雀具欄)來添加其他常用的工具。
在右邊這塊區域,你可以發現你可以在這邊改變任何你選中的層上的內容設置,或者是你正在使用的工具。
在層目錄中,橘孫你可以看到和選擇文檔中的所有頁面,也可以看到頁面上的藝術畫板和不同的層。
組件面板,在此你可以找到文檔中的所有你的控制項,文字樣式,層樣式,你也可以使用任何你允許的公共庫。你可以輕易的拖動組件進入畫布中。tips:如果你想要顯示你的全部設計,可以將sketch的ui全部隱藏(視圖->隱藏操作界面)
#如何放大和移動這個畫布
你可以通過摁住空格鍵+滑鼠點擊不放鬆拖拽的方式移動畫布,或者如果你沒有選中任何塗層的話,使用方向鍵。
如果要放大或者做小的話,你可以按住⌘ 鍵+滑鼠滾輪(兩只手上下移動 mac),或者直接使用觸摸板的放大縮小功能(即兩只手指的距離變大或者減少)或者直接使用快捷鍵Z。這里也有一些快捷方式:比如⌘+是放大,⌘-是縮小。
#如何使得畫布轉變為像素展示
sketch的默認畫布展示是矢量模式,即他的解析度是獨立的,可以無限放大。(如不理解可搜矢量圖的特點)
如果你從事的設計去看到每個像素是十分重要的,那麼你可以在視口->畫布 ->縮放時顯示像素,或者直接使用快捷鍵⌘p來顯示像素,當你縮放超過100%時,就會有獨立的像素點顯示。
#如何顯示像素網格
選擇視口->畫布 ->縮放時顯示像素網格或者直接使用快捷鍵⌘X來顯示,一旦你顯示超過600%的放大比例,那麼就可以在頁面上顯示尚未對其像素網格的內容,從而調試對齊。
#如何使用標尺和創建引導線
sketch一開始的展示是將標尺默認隱藏的,如果要打開的話可以在視口->畫布 ->顯示標尺或者使用快捷鍵⌘R
你可以通過拖拉和點擊你的標尺來設置基準點。如果要鎖定他們就在角落上點擊鎖住,重置這些標准點是可以通過視口->畫布 ->還原標尺
你也可以簡單的通過拉取標尺來設定引導線,當你不需要他們的時候可以在標尺上右擊刪除全部豎向/橫向參考線,或者摁住不需要的參考線離開畫布並松開。
#如何創建網格
Sketch提供兩種格式的網格,一種是普通的網格,一種是布局,如果需要的話兩者可同時呈現。
如果要設置普通網格的話,選擇視口->畫布 ->顯示網格或者通過快捷鍵⌘G,如果要改變網格的格子大小,或者是線的粗細和顏色的話,選擇視口->畫布 ->網格設置
如果要設置布局的話,選擇視口->畫布 ->布局設置,使用選項可以顯示橫縱的布局,包括顏色,寬度。
*需要注意的是,你只能在藝術板上應用網格,或者如果沒有任何藝術版的話可以在畫布上顯示。你可以同時為不同的藝術班設計不同的網格布局。
當你有一個網格布局時,組件會自動吸附到你所創立的網格系統上。
#測量
在一個畫布的不同層之間進行測量,你需要選中第一層,然後按住 option鍵 選中你要測量的其他層。如果是在同一個組之間測量,那麼需要按住 ⌘ 。
#吸附功能和智能輔助是如何工作的
當你移動或者插住圖層或者標記時,sketch會自動展示與附近層之間的距離,而智能輔助就會幫助你吸附到距離最近的層上的物體中心或者是邊緣。(此部分功能基本上同ppt的吸附)可對齊邊緣/中心,模仿臨近元素的寬度和高度。
你可以改變工具欄上的功能呈現,下面是默認的工具欄狀態。
置入: 可以添加不同的層級元素到畫布上,包括矩形,圓形,圖片,文字等
素材: 可以插入文字,圖像或者是自定義的素材
創建控制項 返早將一個你選擇的組件或者元素轉變為一個可以重復使用的控制項,你可以為它新建一個名字以及一些其他選項
前置一層/後置一層/編組/解組 幫助你組合你的元素以及移動他們的層級關系
編輯/旋轉/蒙版/縮放/展平 為編輯元素提供簡單的入口
聯結/減去/交集/差集 主要是布爾運算(boolean)的操作
放大/顯示 改變了你的設計是如何在畫布中展示的,以及你的重點在哪兒
預覽 展示了你的設計在原型機上是如何演示的
雲端 允許你分享你的文檔在sketch雲端
輸出 提供了一種快速導出文檔的方法
*你也可以將工具欄隱藏(視圖->隱藏工具欄)
可以找到所選圖層的設置或正在使用的工具。檢視欄根據選擇的或正在執行的操作隱藏或顯示這些設置。
對齊選項 這些按鈕會在你選擇2項以上時亮起。
圖層特性 這些選項可以更改圖層的位置、大小和旋轉,以及翻轉(左右/上下)圖層。
圓角設置 將滑鼠懸停在它們上方將顯示上下箭頭以更改值。還可以單擊標簽上的圓角/平滑圓角修改弧度。
調整約束大小 如果在組或藝術板中選擇了一個層,將看到這些控制項
樣式 使用樣式工具可以控制圖層的外觀。若要添加新樣式,請單擊要使用的樣式的標題旁邊的「添加」按鈕。添加樣式後,可以通過取消選中樣式旁邊的復選框來隱藏樣式。若要完全刪除樣式,請取消選中其復選框,然後單擊顯示的垃圾箱圖標
輸出
#如何隱藏和鎖定層
要隱藏一個層,只要將其標題旁邊的小眼睛,如果在你點擊前已經有了一個眼睛的標記,那麼說明他已經被隱藏了。
要鎖定一個層,按住option鍵在點擊鎖定,鎖定後你將無法編輯和移動,如果要解鎖,直接點擊鎖定的按鈕。
#如何使用頁面
你可以在草圖文檔中使用任意多的頁面。它們可以方便地組織您的工作,以及提高文檔的效率。
若要在草圖中創建新頁面,請單擊「層」列表頂部的加號箭頭,然後為新頁面命名。
如果你要切換他們,有兩種方式,一種是按住fn+上下方向鍵,還有一種方式是點擊下箭頭將他們折疊為一個列表,並使用下拉菜單在它們之間導航。
您可以拖動頁面以更改其順序,或者控制單擊頁面以復制或刪除它。
創建頁面後,可以在「頁面」面板中將「層」列表中的藝術板或層從一個頁面拖動到另一個頁面。
#如何使用藝術板
藝術板是完全可選擇的,不是每個人都需要。但它方便創建畫布上的固定框架,以創建您的工作。如果你是為一個特定的設備或屏幕尺寸而設計,它們是有用的。
若要創建藝術板,請從工具欄或菜單欄中選擇「插入->藝術板」,或按快捷鍵A。也可以在畫布上單擊並拖動以創建自定義大小的藝術板,或者在檢視器中選擇已有的模版。
你也可以自定義一個藝術板,為他命名且保存。在你創建了一個藝術板後,按住⌘D可以復制它。
#如何移動藝術板
如果要移動他,可以長按並拖動他的頭部標題,可以直接拖動或者使用方向鍵。也可以通過右側的檢視器設置position
#如何為藝術板重新設計尺寸
如果要重新為藝術板設計尺寸,選擇他然後點擊它周邊的上下左右的方向箭直接拖拽就可以改變大小,需要精確調整的話,可以使用右側的檢視器。
你也可以點擊檢視器中的自適應,為根據藝術班的大小自動調整其中的內容大小。
#如何刪除藝術板
如果要刪除藝術板的話,之間點擊delete就可以,但是如果你需要保留藝術板內的內容而只是刪除藝術板的話,將藝術板解組即可。
#過濾層
當你的層特別多的時候,可以通過左側底部的篩選,快速找到你需要的文件。
「組件」面板是搜索、查找和管理文檔和任何啟用的庫中的所有符號、圖層樣式和文字樣式的快捷方法 。
#如何訪問組件面板
要訪問「組件」面板,單擊「層」列表頂部的組件(也可以分別使用Ctrl+1和Ctrl+2在「組件」面板和「層」列表之間切換)。可以選擇查看「所有」組件,也可以只查看屬於文檔或特定庫的組件。
此列表下面的三個圖標允許您查看符號、文字樣式和圖層樣式。
#如何過濾組件面板
你可以使用面板底部的搜索欄篩選所選內容。單擊任何組件都會在面板底部顯示一個大的預覽,因此很容易區分具有微小差異的符號或樣式。
找到要使用的符號或樣式後,可以將該組件直接拖放到畫布上開始使用它。
#組織組件
「組件」面板使您可以輕松地組織庫。雙擊任何組件來重命名它,如果你想將它們組織到文件夾中,只需將一個拖到另一個上面。
<<--以上
㈤ sketch怎麼使用
1、實現創建界面流程圖操作如下
2、使用Sketch會隱藏掉artboard邊界以外的部分的操岩笑作如下
3、通過導出這個背景artboard來將全部界面放置在一個大的圖鄭畝片文件中--》而不是常規的那樣分頁導出。操作如下
4、使用sketch時經常需要插入一些元素操作如下
5、100%實喊棗森際大小:CMD + 0完整畫布預覽:CMD + 1
6、
㈥ 如何高效使用Sketch
自從知道xcode6支持使用矢量圖後就開始用sketch,順手記錄下使用中的一些能夠提高效率的方法
Sketch適用范圍
sketch主要是做圖標和界面的。如果是板繪或者處理照片還是用Photoshop之類的比較合適。和ps相比,sketch的優勢是開啟速度會快很多,是用來原生開發,支持退出後再開啟保持退出狀態等特點,這些都是ps所沒有的。
圖層操作
command+d復制圖層,或者按住option鍵拖動
按住shift鍵能夠選擇多個圖層
按住shift鍵能夠能夠嚴格按照垂直活水平移動
按住shift鍵改變圖層大小是按等比變化
按command加上方向鍵會精確到像素的調整
圖層透明度可以使用快捷鍵進行調節,選中一個圖層按1到9的數字快速將圖層透明度從10%到90%,按0調成100%
command+shift+l 鎖定圖層
繪制圖形
可以在Insert > Shape里找到預設的一些圖形,比如圓形,方形等基本圖形。按o添加圓,r添加矩形,l添加直線,u添加圓角矩形,t添加文本
按v可以自己繪制圖形
繪制時按住shift畫Sketch會自動按45度對齊前一個點適合繪制直線
善用布爾運算將簡單的圖形組合成復雜的圖形,布爾運算有四種,合並形狀(Union),減去頂層形狀(Substract),與形狀區域相交(Intersect),排除重疊形狀(Difference)
布爾運算後可以使用扁平化功能(Flattening),使用後會將其合並成一個圖形
復制旋轉是個比較有意思的功能,能夠很方便繪制出類似花瓣的效果,通過菜單進入 圖層 > 路徑 > 復制旋轉 (Layer > Paths > Rotate Copies)即可。如果希望讓復制的圖形獨立出來,可以分離路徑通過菜單 編輯 > 路徑 > 分離 (Layer > Paths > Split)即可。
畫出粗細不均效果的線條效果可以使用描邊寬度 通過菜單進入 圖層 > 路徑 > 描邊寬度 (Layer > Paths > Stroke width),然後點擊希望加寬的地方以添加錨點拖動使之變寬
填充可以按從下到上的順序疊加
選中圖層control+command+m創建蒙版
control+c會出現放大鏡,然後可以方便選擇顏色替換當前選擇對象的顏色
畫布的控制
使用空格進行抓手移動畫布
按command加滑鼠滾輪進行畫布放大和縮小
control+p能夠切換到像素模式查看,相當於輸出png後點開圖片查看的效果。
control+g開啟關閉網格
按住option鍵能夠看到各個對象之間的距離
command+1縮小至能看到所有對象,command+2放大到選中對象到屏幕適合的大小,command+0縮小至100%
Symbol共享元素,一次編輯所有地方都能夠生效。
什麼會影響Sketch的性能
模糊
陰影
多頁面
文本轉輪廓
㈦ Sketch基礎教程:蒙版(Mask)的使用詳解
我們來看看官方對蒙版(Mask)的定義:
看官方的解釋就能大致明白這個術語的意思,它相當於一個形狀遮罩,遮擋下方的內容後,下方的內容會按照它當前的形狀來展示。
Sketch中提供兩種Mask,一種是Outline Mask,即普通的Mask,讓遮罩的內容按照Mask的形狀來展示;另外一種是Alpha Mask,即透明的Mask,利用透明Mask的顏色透明度實現被遮罩內容的處理。下圖是官方給的兩種Mask對比圖。
普通Mask的應用場景主要是利用Mask處理圖像的形狀,典型的應用是處理社交網路的頭像,下面以圓形頭像為例看看在Sketch中是怎麼操作的。
方法步驟如下:
(1)首先在Sketch中導入想要處理的頭像圖片
(2)繪制一個圓形,位於頭像圖片上方,需要注意的亂行是,圓形的大小不可超過圖像的大小,因為超過遮罩內容後,超出的部分會顯示Mask的內容,失去遮罩的效果。
(3)選中頭像圖片和圓形,在圖像上右鍵點擊,在彈出的菜單中選擇「Mask」即可
(4)最後來看看效果吧,如圖所示,得到一枚圓形頭像,Sketch會把Mask自動編組嘩備嘩
細心的同學應該發現了,上文中普通Mask的圓形顏色填充和邊框都不用進行處理,只是使用了圓形的遮擋效果;而Alpha Mask實質是在普滾旅通Mask的基礎上,使用圓形的顏色透明度效果,所以Alpha Mask的應用場景是對圖像進行簡單的透明度處理。
方法步驟如下:
(1)按照普通Mask的方式先生成普通的mask,然後在組合中選中mask,再在功能菜單中依次選中「Layer」→「Mask Mode」→「Alpha Mask」。
(2)變更為Alpha Mask,我們就可以調整 Mask的透明度,對圖像進行進一步的處理,選中Mask,再在檢查器Fills中,點擊fill上方的顏色選擇器,再調整透明度即可。這里例子模擬了一下宇宙大爆炸產生的光芒效果,其他效果還有很多,例如透明漸變等等,需要童鞋們具體去摸索。