連載：sketch中文教程（四）

sketch中文教程

圖片

Sketch 不是一個位圖編輯器，所以位圖編輯功能比較有限。但 Sketch 3 改進了這一點，現在能更好的處理文檔中的位圖。

值得注意的是，你可將任何圖層轉換成一個扁平的位圖，執行 菜單命令圖層（Layer）gt; 將選區變成位圖 （Flatten Selection to Bitmap）。

位圖編輯

Sketch 的位圖編輯已有很大的提升，現在也有一個得體的 UI 界面來專門呈現它。

選中一個位圖，雙擊它進入編輯模式，你會看見屬性檢查器里出現了一組特殊的工具，但你需要先在位圖上設立一個選區，然后再使用編輯工具。

・選區（Selection）：在位圖上選擇一個矩形區域。

・魔棒（Magic Wand）：點擊位圖上任一點開始拖拽以選擇一個區域，拖拽的范圍越大，容差就會越大。

值得注意的是，你可按 shift⇧鍵來同時添加多個選區，或按 option⌥鍵從已有選區中取差集。一旦確立好選區，你可以剪切 / 復制選區來創建一個新的位圖，

或用以下 4 種工具再來編輯。

・反選（Invert）：當前未被選中的區域會被選中，反之亦然。

・裁切（Crop）：減去選區之外的區域，只保留選中部分。

・填色（Fill）：為選區填充特定顏色。會出現拾色器供你選擇顏色。

・矢量化（Vectorize）：將選區轉變為的形狀圖層，與魔棒工具結合能發揮強大功能。

當你要結束對位圖的編輯，只需點擊位圖外任一點，或按return/esc鍵即可退出編輯模式。

色彩調整

如果想微調一張現有位圖的色彩，可使用屬性檢查器中的色彩調整面板來實現，在這，你可調整位圖的色相、飽和度、亮度和對比度。

需要注意的是，此項調節不會破壞原圖，你隨后可再次更改這些數值。

文本

Sketch 使用操作系統原生的字體渲染模式，因此字體顯示看起來很不錯。使用原生字體渲染的好處就是當你進行網頁設計時，你可確定設計稿中的字體效果和真實網頁中效果一致。Sketch 同時支持文本樣式，所以可以讓多個文本圖層使用共同的字體、大小、和字間距等。

添加文本

你可以從工具欄中選擇文本（Text）工具。當光標變成文本輸入樣式時，在畫布中任何區域點擊以添加文本圖層。你會看見新的文本圖層已被選定，直接開始打字吧。

你也可以點擊并拖拽鼠標以創造一個固定尺寸的文本框，當文本內容大于文本框時，會自動向下擴展文本框高度。而普通的不固定尺寸的文本框則會增加寬度以適應文本內容。

調整文本大小

當你直接拖拽文本框，文本框內文字本身的大小并不會相應改變，但你可拉動文本框底部的縮放手柄來一起控制文本框和文字大小。

文本檢查器

當選中一段文本，你會發現屬性檢查器隨之變成了編輯文本所需的屬性。

在基本的圖層屬性下面是共享樣式區域。

緊接著是選擇字體和字重，點擊齒輪按鈕（Options），可選擇一些列表樣式和文字修飾樣式，比如下劃線和刪除線。再往下區域可選擇字間距、分別可以調整字間距（Kerning）、行間距和段落間距（段間距以是否輸入回車來區分）。

文本顏色

編輯文本時，你可以通過字號和齒輪中間的顏色按鈕為文本設置單獨的顏色。

你也可為文本圖層應用一個通用的填充式樣，例如漸變，但任何填充都將針對整個文本圖層，這將覆蓋之前對文本的顏色設置。

值得注意的是，要在文本上渲染漸變效果，必須先將文本轉化為矢量圖形。

自動和固定大小文本框

文本框的寬度屬性（位于對齊選項的下面）可設置為自動或固定。自動大小文本框意味著它會自動擴展以容納你輸入的一切文本。固定大小文本框則會在你輸入更多內容時保持現有寬度不變，而增加文本框的高度。

行高

Sketch 在調整行高時，總會保持一致的基線對齊方式。如果修改了字體或字號，這個文本圖層會改變自身的位置，但是基線的位置是不會變動的。

只要文本圖層有固定行高，一致的基線位置邊緣同樣會保持一致，不管你是否更換字體。這種方式會產生良好的排版效果。當不設定固定的行高時，Sketch 會使用字體默認的行高。

當創建一個新的文本圖層時，它會使用自動行高而非之前設置的數值。文本圖層的自動行高和設定相同數值的自動行高是有區別的，屬性檢查器中默認使用自動行高數值作為占位。

共享樣式

你會經常想將多個文本設置為同一樣式，共享樣式能實現這一點，它們會將你分散在不同圖層中的文本都保持同步。

值得注意的是，文本樣式只能在單獨的文檔中共享，同個文檔中的不同頁面不同畫板都能夠共用。

創建樣式

想要創建新的文本樣式，你需要先選中一個文本框，然后執行菜單命令 圖層（Layer）gt; 創建共享樣式（Create Shared Style），此時你會發現屬性檢查器立即顯示出了當前圖層的文本樣式，你也可以在這里給樣式重命名。

如果文本屬性發生任何改變，都會自動與其它使用同一樣式的文本保持同步。

新的文本圖層

你可和通常一樣的添加方式添加第二個文本圖層，然后在屬性檢查器中給這個文本使用之前創建好的樣式。另一個直接添加特定樣式文本圖層的方法是，執行菜單命令（Insert）gt; 樣式文本（Styled Text），然后選擇你想要的樣式，接下來的步驟和添加普通的文本圖層一樣的了。

文本路徑

Sketch 支持文本渲染路徑，例如下面的例子：

只需兩塊內容來實現這個效果：一個矢量圖形和一個文本圖層。執行菜單命令文本（Type）gt; 文本路徑（Text on Path），Sketch 就會將文本圖層貼合的放在它下一層的矢量圖形上面。值得注意的是，兩者的順序必須是矢量圖形在文本圖層的下面，才可得到這樣的效果。

放置文本圖層時你只需將文本橫向拖至矢量圖形，這點很難用文字表述，但你可以在創作中非常直觀的看到它們如何實現。

轉化為輪廓

文本可以被轉換成矢量圖形，執行菜單命令文本（Type）gt; 轉換為輪廓（Covert Text to Outlines）來實現。這會將文本中的每個字母都轉成圖形，你可向編輯任何其它圖形一樣單獨編輯每一個路徑和節點。

警告

但是，請額外留心這個操作。不要將很長一段文字都轉化為矢量圖形，這會大大降低文檔的運行速度。

將一小段文字轉化為大量包含布爾運算的子路徑是非常消耗系統內存的，如果不得不轉換一段文字，那么你可以先將一段文字盡可能分成多個短文本，再轉化為矢量圖形。不過現在可直接在文本上運用漸變等效果，大多數時候都不需要將文本轉化為輪廓。