本書講了什么

Sketch3基本操作介紹。

作者什么來頭

鄭成云，社會化媒體營銷實踐者，專注網絡社交領域。從業6年，涉及社區管理、網絡營銷,以及移動產品設計工作。曾就職于金山、新浪、海爾、巧貝科技等公司，后加入微博，任高級產品經理。

第1章Sketch介紹（Introduction）

Sketch是一款天量繪圖應用。對于大多數的互聯網產品設計工作，Sketch能替代Adobe Photoshop，Illustrato:以及Fireworks.

第2章界面（The Interface）

Sketch的界面組成：

畫布（Canvas）位于界面中間，快捷鍵A在畫布上創建畫板。

畫板(Artboards)在畫布中的白色背景區域便是畫板，一個畫板不能被嵌入到另一個畫板。

檢查器（Inspector）位于界面右側，顯示正在編輯圖層的屬性。

圖層列表（Layer List）位于界面左側，列出了當前畫布中畫板的所有圖層。可以通過拖動操作改變頁面的順序，也可以從一個頁面拖動圖層至另外一個頁面。

工具欄（Toolbar）位于界面頂部，共60多個工具。右擊工具欄，進入“定制工具欄”(Customize toolbar)對話框來添加工具和快捷鍵。

第3章圖層（Layers）

在Sketch里，每個對象—包括圖形、圖片、文本等，有自己的圖層。圖層和對象是可以相互替換的。

添加圖層（Adding Layers）

直接從工具欄添加就好，拖動畫出圖形。按住shitf可以繪制等邊圖形；按住option可以從中心點向外繪制圖形；按住空格可以拖動圖層和畫板的起始點。

選擇圖層（Selecting Layers）

點擊圖形選擇或從圖層列表中選擇，選擇多個時按shift，或用鼠標拉虛線矩形框選，框選時按option則只能選中完全包含在矩形內的圖層。重疊的圖層，鼠標右鍵選擇Pick Layer即可。如果是一組圖層，單擊選中組，雙擊選組中圖層。按住command+點擊可以直接選擇組中圖層，雙擊可以進入更深層。

移動圖層（Moving Layers）

直接拖動就可移動圖層，拖動時按住shift可讓圖層按水平或垂直方向移動。按住option再拖動可以直接復制一個圖層，再按command+D，會重復剛才的操作。按option找到被覆蓋的圖層選種它，按command+鼠標移動該圖層。

調整大小（Resizing Layers）

按shift拖動手柄，等比變化。按住option拖動手柄，以中心點調整大小。Command+方向鍵調整1px寬或高，按住shift后，每次調整10px。

編輯圖層（Editing Layers）

雙擊進入或選種圖層點擊Edit進入編輯模式，按兩次ESC或一次Return退出編輯模式。

第4章圖形（Shapes）

點是組成每一個圖形的基本單位，它們會被直線或曲線連接成一條路徑。一個圖形可以包含一個或多個路徑。

4.1編輯圖形（Editing Shapes）

雙擊圖形進入編輯模式，可以拉動點，新增點，以及用delete刪除點。要將直線變成曲線，雙擊某一個點，拉動新出現的手柄即可。

不同的點模式(Different Modes)

直線角(Straight )當剛剛點擊畫布的時候，會添加一個直角，也就是說沒有任何錨點所得的便是一條直線。

鏡像(Mirrored)錨點會鏡像對應。兩個錨點將會與主點距離相同并且正好相對。當主點并非直角時，鏡像便是默認的點模式。

不對稱（Asymmetric）兩個錨點之間的距離是獨立的，但它們依然相互對應。

斷開連接(Disconnected)錨點間完全獨立，互不影響。

可以用1~4鍵來選中不同的模式，1直角，2鏡像角，3斷開連接，4不對稱。

繪制VS編輯(Drawing versus Editing )

除了用圖形工具添加圖形，還可以用矢量工具繪制圖形，點擊Insert>Vector，在畫布上單擊添加第一個錨點，繼續點擊別處添加第二個錨點。系統會自動繪制線條連接兩點，單擊別處不松開鼠標，拖動錨點可以繪制曲線，然后點擊第一個錨點，便能繪制出封閉的矢量圖。

封閉路徑VS開放路徑(Closed versus Open )

封閉圖形的最后一條邊會與第一條相連接，開放圖形則會在起點和終點間留出一個間隔。可以通過點擊Layer>Paths>Close Path，來切換封閉/開放路徑。

快捷鍵(Shortcuts)

繪制矢量圖時，可以按住shift再畫之后的點，Sketch會自動對齊到前一點的45度角方向。如果在兩點之間添加新的錨點時按住shift，便會得到兩點間的錨點。如果按住command鍵，單擊兩點間的線條，則會在線條正中間添加錨點。

選中多個點(Multiple Selection)

選擇點的時候按住shift。

4.2布爾運算（Boolean Operations）

子路徑(Subpaths)

使用布爾運算，Sketch會通過布爾算法將最上層的圖形變成下一層圖形的子路徑。

布爾運算方式(Operations)

合并形狀(Union):結果會得到兩個矢量區域的總和。

減去頂層形狀(Subtract ):結果是頂層矢量的區域會從下一層的圖形上移。

與形狀區域相交(Intersect):結果是會保留原圖形重疊的部分。

排除重疊形狀(Difference ):結果是只保留原圖形不重疊的部分，是“與形狀區域相交”運算方式的反向。

圖層列表(LayerList)

對于一個含有多個子路徑的圖形，可以瀏覽左側的圖層列表。

扁平化(Flattening)

將一個圖形里的子路徑呈現為一個路徑，將層級變得更扁平。但有的圖形無法扁平為一個路徑。選擇需要扁平化已完成布爾運算的圖形，然后點擊工具欄中的Flatten。

4.3變形工具（Transform）

選中圖形，點擊Transform，可以拖動四角任意錨點來改變圖形形狀。拖動中間的錨點可以使圖形顯得傾斜。

4.4蒙版（Masking）

蒙版能夠讓設計師有選擇性地顯示出圖層的一部分。所有圖形都可以變成蒙版，選中圖形，然后點擊Layer>Use as Mask，所有在這個蒙版上的圖形都會被剪切成蒙版的內容并顯示出來。

限制蒙版(RestrictingMasks)

如果不想所有的圖層都被蒙版剪切，可以將蒙版和想要被剪切的圖層單獨編組，通過這種方式來限制蒙版的使用情景。一旦蒙版被編組，其他一切在組外的圖層就都不會被蒙版剪切了。

圖形蒙版(Maskwith Shape)

同時選中一個圖形和圖片，點擊Layer>Mask with Selected Shape，可以直接將這個圖形作為選中圖片的蒙版。

Alpha蒙版(Alpha Mask)

漸變圖片，選中蒙版，點擊Layer>Mask Mode>Alpha

Mask。

4.5剪刀工具（Scissors）

用來剪去矢量圖形的線條，先選中矢量圖形，然后點擊剪刀工具。然后點擊矢量圖形的邊來剪切圖形，完成后單擊圖形外的畫布，或按回車。

4.6復制旋轉（Rotate Copies）

Layer>Paths>Rotate Copies，它能復制選中的圖形并按特定的中心和角度旋轉。

分離路徑(Splitting)

所有的復制圖形都會被視為原圖形的子路徑，如果想讓它們成為完全獨立的圖層，點擊Layer>Paths>Split即可。

4.7鉛筆（Pencil）

可以使用鉛筆工具來自由地繪圖。當松開鼠標鍵之后，Sketch會簡化路徑，順滑曲線。

第5章文本（Text）

5.1文本檢查器（Text Inspector）

自動大小文本框VS固定大小文本框(Auto vs Fixed)

點擊Width后面的Auto自動或Fixed固定來設置。

5.2文本渲染（Rendering）

Sketch使用操作系統原生的字體渲染，好處就是當進行網頁設計時，可以肯定作品中的文本都是精準的。

子像素杭鋸齒技術(Sub-Pixel Anti-Aliasing)

一臺電腦顯示器是由網格狀的像素組成的。可是普通屏幕沒有足夠多的像素來精確地展現文字的曲線，這就要用到抗鋸齒技術，將那些被文字曲線遮住的像素稍稍變亮一些，并在視覺產生更平滑的效果。

子像素抗鋸齒更進一步，考慮到屏幕上的像素由紅色、綠色和藍色組成，子像素抗鋸齒并非是高亮全部像素，而是只高亮紅色或者藍色部分。

無法實現抗鋸齒時(When it Fails)

沒看懂，暫時也用不上，略。

為iOS設計(Designing for iOS)

Apple開始發布iPhone時，決定不用子像素抗鋸齒技術渲染手機上的文本，原因是顯示器上的像素都是由紅、綠、藍的光形成的。而iPhone是可以橫屏、豎屏切換的，也就是說本來垂直排列的紅、綠、藍像素會水平排列。這樣一來，整個子像素抗鋸齒技術就崩潰了。Apple原本可以保持豎屏時候文字渲染，而放棄橫屏情況，但Apple理智地決定保持豎屏與橫屏一致的體驗。

所以在為iPhone或者iPad設計交互頁面時需要記住在畫布上，Sketch會對文字進行子像素抗鋸齒渲染，但在移動設備上，又字并不會被這樣處理。設計師需要告訴Sketch無需進行子像素抗鋸齒渲染，點擊Sketch>Preferences>General，取消選擇Sub-Pixel Anti-Aliasing。

5.3共享式樣（Shared Style）

將多個文本設置為同一式樣并且能夠重復利用、提高設計效率。

創建文本式樣(Creating Style)

書中方法已過時，選中文本直接點擊右側檢查器里的Create New Text Style。

新的文本圖層(New Layers)

選中新建的文本圖層，然后再指示器中選擇之前設置好的式樣即可。

5.4文本路徑（Text on Path）

將文字放在矢量圖上，點擊Type>Text on Path。

5.5文本轉化為輪廓（Convert To Outline）

把文本轉化為矢量圖形，點擊Type>Convert Text to Outline。（耗內存）

第6章圖片（Images）

6.1位圖編輯（Bitmap Editing）

任意圖層都能轉化成位圖，Layer>Flatten Selection to Bitmap。雙擊圖片進入編輯模式，

選區(Selection)在圖片上選擇一個矩形區域。

魔棒(Magic Wand )單擊畫布士任一點開始拖動以選擇一個區域，拖動的范圍越大，容差就會越大。

反向(Invert )當前未被選中的區域會被選中，反之亦然。

剪切(Crop )剪去選區之外的區域。

填色(Color )為選區填充特定顏色，出現拾色器供設計師選擇顏色。

矢量化(Vectorize ):將選區轉變為的圖形圖層。

6.2色彩校正（Color Adjust）

檢查器中的色彩校正板可以微調現有圖片的顏色。

色調(Hue )調整圖片色調。

飽和度(Saturation )調整圖片飽和度。

明亮度(Brightness )調整圖片明亮度。

對比度(Contrast )調整圖片對比度。

第7章符號（Symbols）

符號本身其實就是一種特殊的組，在圖層列表中也是以組的形式出現，符號會有一個紫色的圖標。

7.1創建符號（Creating Symbols）

選中幾個圖層，然后點擊工具欄的Creat Symbol或點擊Layer>Creat Symbol。如果選中多個圖層，Sketch會先編組，然后圖層列表里這個組的圖標變成紫色。再進入Insert>Symbol，在畫布中使用這個符號。可以復制粘貼這個符號，任何針對某一副本的編輯，都會同步到其他所有副本上。

7.2排除文本（Exclude Text）

這個功能貌似沒有了。

7.3管理符號（Organising Symbols）

雙擊任一符號，或點擊圖層列表左上角Page的向下箭頭，切換到Symbol來管理符號。

7.4交換符號（Swapping Symbols）

沒看懂。

第8章式樣（Styling）

檢查器中，會顯示出所選圖層的式樣選項。從共享式樣開始，接著是通用透明度、通用混合模式，然后是填充、邊框、陰影、模糊和鏡像。細節略過。

第9章編組（Grouping）

9.1編組（Groups）

選中多個圖層command+G或右鍵選擇Group Selection。雙擊組內圖形或按住command單擊組內圖層，可以直接選中組內圖層。也可以選中組后，在檢查器中勾選Click-through when selecting。

9.2畫板（Artboards）

Sketch里的畫板是在無限的畫布中的一塊固定大小的畫框，畫板是可選擇的。當設計師的文件中包含畫板的時候，畫板之外的部分會變暗，這樣設計師就可以清晰地看到什么在畫板中，什么不在畫板中。

添加畫板(AddingArtboards)

Insert>Artboard，或按A，點擊檢查器底部的“+”，可以創建自定義畫板。點擊Arrange>Make Grid可以創建固定行列的畫板，并能設置畫板的間距。

移動畫板(MovingArtboards)

如果畫板中有內容了，Sketh就不會讓設計師直接選中畫板。可以現在圖層列表中選中畫板，然后拖動或者在檢查器中改位置和大小。

網格和標尺(Grids and Rulers)

每一個畫板都是在畫布上相對獨立的創作空間，所以每個畫板都有自己的標尺和網格選項。點擊右上角View>Show Rulers，點擊標尺出現基準線。

模板(Templates)

File>New from Template，如果選擇Mac APP Icon，會看到每種常用尺寸的畫板。

9.3頁面（Pages）

一個Sketch文件內可以包含多個頁面。與其一個頁面一個文件，不如將多個相關頁面放在一個Sketch又件中。這樣做的好處很多，比如說符號和共享式樣將在一個Sketch文件中的所有頁面內通用。另一個好處就是，雖然每個頁面都可以輕松地編輯12個畫板，但是取決于不同的內容、大小和數量，設計師會發現把過多的畫板分布在多個頁面中會更加高效。

第10章畫布（Canvas）

10.1像素縮放（Pixel Zoom）

在Sketch里，設計師可以用兩種萬式查看設計師的作品，這兩種r,式可以在View>Show/Hide pixel Grid中切換。按實際尺寸查看時，兩種方式沒區別，放大之后有區別。設計師所看到的，就相當于先把這張圖處理為PNG格式，再在MAC自帶的預覽中放大查看。

10.2標尺、參考線、網格（Rulers，Guides，Grids）

雙擊標尺可重設標尺原點。把參考線移出標尺外就能移除參考線。網格分為規則網格和布局網格兩種，規則網格control+G，不規則網格沒介紹。

10.3測量（Measuring）

距離(Distance)按住option鍵，會顯示已選中圖層與鼠標懸浮所在圖層之間的距離。

大小(Size)如果要調節圖層的大小，Sketch會顯示出具有相同長度或寬度的圖形數據。

第11章導出（Exporting）

11.1導出圖層（Exporting Layers）

單擊工具欄中的導出按鈕時，Sketch會列出畫布、畫板、切片中所有可導出的圖層，可以從中選擇導出。也可以事先選好圖層再點擊導出按鈕（工具欄）。如果只想導出一個圖層，可以選中圖層，點擊檢查器底部的Export。

導出圖層時畫布上其他的元素都不會被一起導出，如果它表面有其他圖層或者有背景圖層，也都不會被包含進導出的文件。這個方法適用于在畫板中導出圖標。單擊檢查器導出右邊的+按鈕，添加新的導出尺寸。

圖層列表(LayersList)

在圖層列表中，有的圖層多了一個小刀的圖標，說明這個圖層是可導出的。下次點擊導出按鈕，這個圖層也會和其他切片一起顯示在列表中。無需先建立切片也能直接從圖層列表中導出圖層。直接在列表中將圖層拖到Finder或者其他App里，Sketch會迅速地幫助設計師導出一張PNG圖片。如果按住option鍵，則會將它以PDF數據寫入剪貼板中。

11.2切片（Slices）

設計師能夠將畫布中的特定區域導出為一個文件。一個Sketch文件可以有無數個切片，每個切片都能導出不同文件。

圖層切片(Slicesas Layers)

切片被視為普通圖層 。設計師可以把想要導出的多個圖層編組，形成一整個切片。當設計師移動這個組的時候，切片也會跟著移動。當圖層顯示為切片狀態下的時候，在檢查器中能夠設置切片導出屬性，這和導出圖層是一樣的原理。但要確保該圖層為切片模式。

添加切片(AddingSlices)

Insert>Slice，在畫布上創建切片區域，也可點擊一個圖層，Sketch會立即圍繞所選圖層建立一個新的切片。

修剪(Trim)

選中修剪后，每一個被導出的切片中的透明外圍都會被剪去。

11.3文件格式（File Formats）

JPG:照片文件所常用的格式，但不支持透明度二

PNG:如果設計師畫的內容中有透明的像素，選擇NN(;將是最好的選擇。

TIFF:支持透明度，但這種格式的文件會更大、

PDF:EPS:保存矢量對象，目前基本支持。

SVG:能很好地保留圖形和文本的導出，但是不支持陰影使用這種格式，主要可以讓該文件在其他應用中導入。

11.4畫板導出（Artboards）

當畫布上己經有幾個畫板了，單擊導出，Sketch會推測想要導出的畫板，并自動把它們變為可導出的狀態。

11.5CSS式樣（CSS Attributes）

當設選中了任意數量的元素，選擇Edit>Copy CSS Attributes，Sketch便會為設計師選中的對象聲明CSS中的邊框、填充、漸變、陰影，以及文字樣式。

11.6打印（Printing）

Sketch由的畫板和切片都是可以打印的。進入File>Print,會得到一個畫板列表，果沒有畫板的話就會是切片列表。接著會出現一個標準的打印對話框讓設計師設置打印需求。

第12章導入（Importing）

Sketch支持導入JPG/PNG/TIFF/SVG/PDF/EPS格式的文件，可以將文件拖進Dock中的Sketch圖標，或直接拖進一個已經打開的畫布里。PSD和AI文件只能以位圖形式打開。

第13章設置（Preferences）

13.1通用設置（General）

略

13.2畫布設置（Canvas）

Retina

Mac和i0S的顯示器會用4個像素來顯示1個傳統的像素。新的Retina

Mac Book Pro上的像素是舊版本的4倍，只是用更多的像素來展現圖片。默認設置下，Sketch也會這么做，更多的像素會被用來展現細節，如果只想讓顯示器顯示實際的每個像素，那么可以關閉Retina Canvas的選項。

放大至選區(Zoom In on Selection)

通過View>Zoom In/Out，或command++/-，會放大/縮小至畫布的中心。

13.3圖層設置（Layers）

比例縮放(ResizeProportionally)

如果新建組的比例是被鎖住的，那么這個圖只會按照固定比例縮放。如果沒有鎖住，可以任意改變其大小。

剝去文本式樣（Strip Text Style）

對于粘貼進Sketch的文本，將除去所有的字體、段落、顏色信息。

第14章性能（Performance）

模糊（Blurs)

模糊是非常消耗系統資源的效果，需要先將圖層渲染成一個位圖(已經很消耗資原)，然后再在上面添加一個模糊(這將更加消耗資源)，模糊半徑越大。消耗的資源一也就越大。

陰影(Shadows)

在圖片上渲染陰影也是很耗費資源的，陰影越多(大)，延遲也越長。

多頁面(MultiplePages)

一個畫布/頁面能輕松負載12個畫板，但如果多個畫板上都有大面積的陰影和模糊效果，操作起來就會很慢，解決方法就是把一部分畫板移到新的畫布/頁面上去。

文本轉化為輪廓（Text to Outlines)

布爾運算是一種非常復雜的數學運算，如果一個陰影效果包含了數個做布爾運算的子路徑的話，那么文件就會遇到問題。如果執意要將文本轉化為輪廓，要將每個字母都單獨放在一個圖層當中。

第15章Sketch鏡像（Sketch Mirror）

IPhone（安裝Sketch）和Mac連接同一wifi，點擊右上角的Mirror，可在iPhone上查看

第16章Sketch工具箱（Sketch Toolbox）

Sketch Toolbox是下載和安裝Sketch插件的利器，并非是Sketch官方發布的，而是Shahruz在Github上提交了源代碼的一個插件編譯包。

使用Sketch工具箱(Use Sketch Toolbox)

直接在Sketch Toolbox里面安裝感興趣的插件，然后什么都不用做，再打開，就會在菜單中的Pluqins里找到剛才下載的所有插件。

自動生成內容插件(Content Generator Sketch Plugin)

可以自動隨機填充男性、女性或者自然風光的圖片、名稱、電話號、性別、郵箱等。

Sketch測量插件(Sketch Measure)

Sketch測量插件(SketchMeasure)超級智能地在作品上添加圖形尺寸、距離、顏色、坐標、設置和文本屬性的附注，方便快捷，而且成品整潔漂亮。憲全不用手寫標注，搞定后導出成PDF，直接發給技術小伙伴，大大提高溝通效率。Plugins>Sketch Measure。

Sketch導出插件(Sketch Export Assets)

Sketch導出插件用于導出符合iOS、Android需要的圖片元素。在畫板中選擇要導出的圖層.后，通過Plugins>Sketch Export Assets。

重命名插件(Rename It)

為了幫助設計師批量修改圖層名稱，使用control + command + R組合鍵。

第17章快捷鍵（Shortcuts）

17.1通用快捷鍵（General Shortcuts）

control+h:觸發選區手柄。

control +l:觸發f}動參考線。

control+g:觸發網格。

Space:抓手工具。

Enter:編輯所選圖層。

Command+3:滾動至所選圖層。

Command +2:放大所選圖層。

Z:放大工具。按住Z鍵，用鼠標單擊拖動出一個區域放大。縮小使用Z+alt組合鍵再鼠標單擊。

Escape:退出當前工具，取消選擇所有圖層或返回檢查器。

Tab/Shift—tab:在當前群組中切換不同圖層。

17.2插入圖層快捷鍵（Inserting Layers）

略，界面上寫的一清二楚。

17.3移動和編輯圖層（Moving and Resizing Layers）

option+拖拽鼠標:復制一個圖層。

option+鼠標懸停:顯示兩個圖層之間的距離。

option+更改圖形尺寸:兩邊對稱地更改圖形尺寸。

shift+更改圖形尺寸:等比更改圖形大小。

實戰篇略，看視頻更直觀。