Sketch 導(dǎo)出

導(dǎo)出

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

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

導(dǎo)出圖層

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

圖層 VS 切片

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

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

導(dǎo)出圖層

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

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

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

圖層列表

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

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

切片

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

圖層切片

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

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

添加切片

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

命名

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

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

多尺寸

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

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

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

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

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

修剪

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

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

文件格式

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

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

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

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

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

?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可以打開從 Sketch 里導(dǎo)出的 .PDF 或 .SVG 文件。

畫板

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

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

CSS 屬性

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

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

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

打印

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

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