導(dǎo)出

想要導(dǎo)出你的文件，你可以從菜單欄進(jìn)入 文件 > 導(dǎo)出… (File > Export…) 或者直接單擊工具欄中的導(dǎo)出按鈕。Sketch的畫(huà)布是無(wú)限的，所以導(dǎo)出文件時(shí)，你要告訴 Sketch 你想導(dǎo)出具體哪個(gè)部分。

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

導(dǎo)出圖層

Sketch 3 里的新功能是可以無(wú)需建立切片而直接導(dǎo)出圖層。

圖層 VS 切片

導(dǎo)出圖層本事意味著畫(huà)布上其他的元素都不會(huì)被一起導(dǎo)出，如果它表面有一個(gè)圖層或者有一個(gè)背景圖層，他們也都不會(huì)被包含進(jìn)導(dǎo)出的文件。

這個(gè)方法很適用于導(dǎo)出圖標(biāo)或者一個(gè)大的設(shè)計(jì)當(dāng)中的小元素，但并不適用于導(dǎo)出一整個(gè)設(shè)計(jì)。

導(dǎo)出圖層

如果你只想導(dǎo)出一個(gè)圖層，你可以直接在檢查器中實(shí)現(xiàn)。先選中圖層或組，然后單擊檢查器底端的 Make Exportable。你會(huì)發(fā)現(xiàn)檢查器立即顯示出你將要導(dǎo)出一張?jiān)叽绲膱D片，沒(méi)有前綴，并且默認(rèn)為PNG格式。

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

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

圖層列表

在圖層列表中，你會(huì)發(fā)現(xiàn)這些圖層多了一個(gè)小刀的圖標(biāo)，說(shuō)明這個(gè)圖層時(shí)可導(dǎo)出的。下次你再?gòu)墓ぞ邫谥悬c(diǎn)擊導(dǎo)出按鈕，這個(gè)圖層也會(huì)和其他切片一起顯示在列表當(dāng)中了。

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

切片

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

圖層切片

在 Sketch 3當(dāng)中，切片被視為普通圖層。這么做會(huì)有很多好處，比如說(shuō)你可以把想要導(dǎo)出的多個(gè)圖層編組形成一整個(gè)切片，當(dāng)你移動(dòng)這個(gè)組的時(shí)候，切片也會(huì)跟著移動(dòng)。

如果你暫時(shí)不想花心思整理畫(huà)布上的切片，你也可以在圖層列表最底下關(guān)閉小刀的按鈕。

添加切片

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

命名

你可以為每一個(gè)切片單獨(dú)命名，同時(shí)他們也會(huì)以這個(gè)名字保存進(jìn)磁盤(pán)。

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

多尺寸

Sketch 3 新增了一個(gè)功能是可以從一個(gè)切片中同時(shí)導(dǎo)出多個(gè)圖片。如果你在為iOS設(shè)備做設(shè)計(jì)，那你會(huì)常常想為圖標(biāo)導(dǎo)出1倍或2倍大小的圖片，切片工具幫你大大簡(jiǎn)化了這個(gè)步驟，你只需單擊檢查器中的 + 按鈕來(lái)添加新的導(dǎo)出命令即可。

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

僅導(dǎo)組內(nèi)圖層

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

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

修剪

每一個(gè)切片中都還包含一個(gè) 修剪 選項(xiàng)。選中它之后，每一個(gè)被導(dǎo)出的切片中的透明外圍都會(huì)被剪去。

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

文件格式

支持導(dǎo)出的文件格式

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

?PNG: 如果你畫(huà)的內(nèi)容中有透明的像素，這將是最好的選擇。

?TIFF: 支持透明度，但這種格式的文件會(huì)更大。

?PDF or EPS:  保存矢量對(duì)象，目前基本支持。

?SVG: 能很好的保留圖形和文本的導(dǎo)出，但是并不支持陰影使用這種格式主要可以讓該文件在其他應(yīng)用中導(dǎo)入。

不支持導(dǎo)出的文件格式

?PSD: Photoshop 文件是封閉且不支持導(dǎo)出的，如果你有Adobe CC的套件，那么你可以將PS文件導(dǎo)出為 .PDF，并導(dǎo)入Illustrator。

?AI: Sketch目前不支持.AI文件，但是Illustrator可以打開(kāi)從 Sketch 里導(dǎo)出的 .PDF 或 .SVG 文件。

畫(huà)板

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

當(dāng)你的畫(huà)布上已經(jīng)有幾個(gè)畫(huà)板了，然后你第一次點(diǎn)擊導(dǎo)出，Sketch 會(huì)推測(cè)你是想導(dǎo)出這些畫(huà)板，并自動(dòng)的把他們變?yōu)榭蓪?dǎo)出的狀態(tài)。

CSS 屬性

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

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

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

打印

Sketch 中的畫(huà)板和切片都是可以打印的。進(jìn)入 文件 > 打印 （File > Print），你就會(huì)得到一個(gè)畫(huà)板列表——如果沒(méi)有畫(huà)板的花就會(huì)是切片列表。接著會(huì)出現(xiàn)一個(gè)標(biāo)準(zhǔn)的打印對(duì)話(huà)框讓你設(shè)置打印需求。

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