導出

想要導出你的文件，你可以從菜單欄進入 文件 > 導出… (File > Export…) 或者直接單擊工具欄中的導出按鈕。Sketch的畫布是無限的，所以導出文件時，你要告訴 Sketch 你想導出具體哪個部分。

在Sketch 3 里，我們極大改進了導出文件的流程。當你點擊工具欄中的導出按鈕時，Sketch 會為你列出畫布、畫板、切片中所有可導出的圖層。你可以從中導出部分或全部的圖層。值得注意的是，如果你事先選好了圖層再點擊導出按鈕，那么 Sketch 會默認的只幫你導出那些圖層。

導出圖層

Sketch 3 里的新功能是可以無需建立切片而直接導出圖層。

圖層 VS 切片

導出圖層本事意味著畫布上其他的元素都不會被一起導出，如果它表面有一個圖層或者有一個背景圖層，他們也都不會被包含進導出的文件。

這個方法很適用于導出圖標或者一個大的設計當中的小元素，但并不適用于導出一整個設計。

導出圖層

如果你只想導出一個圖層，你可以直接在檢查器中實現(xiàn)。先選中圖層或組，然后單擊檢查器底端的 Make Exportable。你會發(fā)現(xiàn)檢查器立即顯示出你將要導出一張原尺寸的圖片，沒有前綴，并且默認為 PNG 格式。

你可以單擊那個小小的 + 按鈕，來添加新的導出尺寸，默認下會是有著 @2x 前綴的 2 倍大小的圖片，但這些都是可以隨你修改的。如果你本來就在創(chuàng)作一個 @px 的作品了，你也可以為它添加一個 @2x 的前綴，然后在添加一個 0.5 倍大小的導出方式。

值得注意的是， 我們現(xiàn)在支持任意大小的導出了，所以如果你在為 Android 設計，1.5 倍大小的導出也是能夠?qū)崿F(xiàn)的。

圖層列表

在圖層列表中，你會發(fā)現(xiàn)這些圖層多了一個小刀的圖標，說明這個圖層時可導出的。下次你再從工具欄中點擊導出按鈕，這個圖層也會和其他切片一起顯示在列表當中了。

需要注意，你無需先建立切片也能直接從圖層列表導出圖層，如果你直接列表中將圖層拖到 Finder 或者其他 App 里，Sketch 會迅速的幫你導出一張 PNG 圖片。如果按住 option 鍵，則會將它以 PDF 數(shù)據(jù)寫入剪貼板中。

切片

切片能讓你將畫布中的特定區(qū)域?qū)С鰹橐粋€文件。一個 Sketch 可以有無數(shù)個切片，每個切片都能導出不同的文件。

圖層切片

在 Sketch 3 當中，切片被視為普通圖層。這么做會有很多好處，比如說你可以把想要導出的多個圖層編組形成一整個切片，當你移動這個組的時候，切片也會跟著移動。

如果你暫時不想花心思整理畫布上的切片，你也可以在圖層列表最底下關閉小刀的按鈕

添加切片

你可以進入工具欄的 添加 > 切片（Insert > Slice），并在畫布上單擊拖動鼠標創(chuàng)建一個新的切片區(qū)域。在切片工具中，你也可以直接直接單擊一個圖層，Sketch 會立即圍繞那個圖層建立一個新的切片。

命名

你可以為每一個切片單獨命名，同時他們也會以這個名字保存進磁盤。

這里有一個很方便的小技巧：如果你在文件名中加入了一個斜杠 (一個"/")，那么Sketch就會自動新建一個文件夾，并把這個文件放入其中。舉個例子，如果你將切片命名為 foo/bar.png ，那么Sketch會先幫你創(chuàng)建一個叫做 foo 的文件夾，然后在里面創(chuàng)建一個叫 bar.png 的圖片。

多尺寸

Sketch 3 新增了一個功能是可以從一個切片中同時導出多個圖片。如果你在為iOS設備做設計，那你會常常想為圖標導出1倍或2倍大小的圖片，切片工具幫你大大簡化了這個步驟，你只需單擊檢查器中的 + 按鈕來添加新的導出命令即可。

每個尺寸的圖片都可以定制大小，文件格式和文件名前綴。當你同時導出兩個以上圖片時就必須要設定前綴，這樣才能區(qū)分開不同的文件。默認情況下，你添加的第二種導出將會像蘋果要求的那樣，是一個帶有 @2x 前綴的2倍大小圖片。但你并不會被限制與2倍大小，你可以以任何前綴名導出任何大小的圖片。

僅導組內(nèi)圖層

Sketch 2 當中有一個功能可以導出切片中的某些特定圖層，雖然這一開始是非常便于理解的概念，可是一旦你想改變一些元素或者替換一些內(nèi)容時，這個過程就會變得非常糟糕。

在Sketch 3當中，每個切片都只有一個選擇框——僅導出組內(nèi)圖層（Export Group Contents Only），選中這個，就只會到導出那些在組內(nèi)的涂層，而不會導出表面的或者背景圖層等等其他切片內(nèi)的東西。

修剪

每一個切片中都還包含一個修剪選項。選中它之后，每一個被導出的切片中的透明外圍都會被剪去。

舉個例子，你在文件中定義了一個 30 x 40 px 的切片選區(qū)，里面只包含了一個 15 x 15 px 的圓形，與其修改切片選區(qū)的大小來貼合這個圓形，不如打開修剪選項，Sketch 就會自動幫你減去 30 x 40 px 選區(qū)內(nèi)的所有透明部分，最后只留下 15 x 15 px的圖像。

文件格式

支持導出的文件格式

• JPG: 照片文件所常用的格式，但并不支持透明度。
• PNG: 如果你畫的內(nèi)容中有透明的像素，這將是最好的選擇。
• TIFF: 支持透明度，但這種格式的文件會更大。
• PDF or EPS: 保存矢量對象，目前基本支持。
• SVG: 能很好的保留圖形和文本的導出，但是并不支持陰影使用這種格式主要可以讓該文件在其他應用中導入。

不支持導出的文件格式

• PSD: Photoshop 文件是封閉且不支持導出的，如果你有 Adobe CC 的套件，那么你可以將PS文件導出為 .PDF，并導入Illustrator。
• AI: Sketch 目前不支持.AI文件，但是 Illustrator 可以打開從 Sketch 里導出的.PDF或.SVG文件。

畫板

Sketch 3 里的畫板無需先創(chuàng)建切片就可以直接導出，只需先添加一個畫板的導出尺寸，下次你單擊導出時，Sketch 就會幫你也導出畫板了。

當你的畫布上已經(jīng)有幾個畫板了，然后你第一次點擊導出，Sketch 會推測你是想導出這些畫板，并自動的把他們變?yōu)榭蓪С龅臓顟B(tài)。

CSS 屬性

Sketch有一個貼心的小功能，幫助網(wǎng)頁設計師將他們的靜態(tài)原型轉(zhuǎn)化成真實的 HTML 代碼。

當你在畫布中選中了任意數(shù)量的元素，你都可以進入菜單欄中選擇的 編輯 > 復制 CSS 屬性 (Edit > Copy CSS Attributes) ，Sketch 便會為你選中的對象聲明 CSS 中的邊框，填充，漸變，陰影以及文字樣式。

Sketch 也會自動將軟件當中的漸變轉(zhuǎn)化為 CSS 當中的漸變。由于 CSS 中的漸變語法非常糾結(jié)，所以這個功能可以幫你節(jié)省很多時間。將你的創(chuàng)作從 Sketch 轉(zhuǎn)化為 CSS 真的非常簡單。

打印

Sketch 中的畫板和切片都是可以打印的。進入 文件 > 打印 （File > Print），你就會得到一個畫板列表——如果沒有畫板的花就會是切片列表。接著會出現(xiàn)一個標準的打印對話框讓你設置打印需求。

值得注意的是，我們已經(jīng)為你設置好了默認的 A4、A5 和 A6 大小的畫板，供你直接選擇。