Sketch：也可為印刷品設計

寫在前面：這篇文章可不僅僅是教你如何用Sketch設計小卡片，更能讓你了解印刷設計和屏幕設計的前世今生，理清px、pt、pica和inch的複雜關係！

小彩蛋：超級乾貨在最後。

Sketch雖然不是生來為印刷設計的，但是我已經用它設計了超級多的印刷品啦！

Sketch是為屏幕設計而存在的

我們設計網頁，App界面，還有各種icon，這些都是基於像素、RGB顏色，和數字化屏幕的。與Adobe系的軟體有所不同，Sketch沒有那麼多冗餘的功能，而是目標明確地解決問題，更集中，更高效。

Sketch不是為印刷品設計而存在的

名片，小冊子，海報，這些都是基於英寸、厘米，CMYK和Pantone顏色的。Adobe illustrator和InDesign才是設計這類印刷品最受歡迎的工具。

但是如果你像我一樣，在Sketch上效率更高的話——那麼在設計印刷品時，你也一定非常渴望繼續用你熟悉的工具——Sketch。

其實，這是可以實現的。我也正是這樣做的。

關於神奇的數字72（72:1的起源）

這要追溯到鉛字印刷的工藝了。當時使用的主要單位是點和派卡（譯者註：1派卡=1/6英寸=12點）。鉛字印刷是以點為單位的，以派卡或半派卡為增量，如12，18，24，36和72點。這些數字聽起來有些熟悉，因為它們後來在Macintosh（譯者註：1984年由蘋果公司發布上市的個人電腦）中成為了標準的字型大小。第一台Mac使用的屏幕是每英寸有72個像素，從而產生了12pt的文字，使得屏幕上看起來和真實列印出來的幾乎相同。每英寸所含像素（PPI）後來的變化就太多了（特別是因為retina屏幕的出現），儘管如此，了解這個72:1的比例起源還是很重要。

本文主要使用英制單位。

Sketch使用像素單位，所以我們需要一種能將我們的設計轉變為英寸的方法。現在你可能已經猜到啦：Sketch中的72個像素在導出的PDF中為1英寸。

一張8.5 X 11的紙（US Letter）轉化為612px X 792px的畫板（artboard）。

標準的3.5 X 2的名片轉化為252px X 144px的畫板（artboard）。

現在Sketch3可以在添加新的畫板（artboard）時，進行「紙張尺寸」的預設。你可以添加一些常用的尺寸來增加效率哦。

72PPI的像素尺寸可能遠小於你用於網站或者是用戶界面設計的尺寸。請一定要記住，你設計的印刷品的清晰度是由你使用的列印方式決定的——Sketch中的「Show Pixels」功能在這裡是沒有用處的。

* 設計一些元素的時候，盡量去使用方便轉化成英寸的單位數值。比如我經常用1/8英寸（9px）或是1/16英寸（4.5px）作為增量。

•Sketch的Grid可以幫助你更方便地使用上一條Tip。我建議可以設置Grid為block size：

9px，thick lines every：8 blocks（如圖）。快捷鍵⌃G就可以展示和隱藏Grid布局啦！

•把「Pixel Fitting」關掉吧，這裡不需要你像在屏幕設計一樣像素對齊。

出血尺寸

列印店一般會要求你設置出血尺寸，出血尺寸可以補償一些微小卻不可避免的誤差等。我的印表機需要設置1/8英寸的出血，所以我經常把它算到我的Sketch布局中（在每個邊上都增加額外的9px）。如果你的設計需要設置出血尺寸，我建議你也這樣做。如果沒有的話，你也可以在illustrator保存為PDF的時候添加出血尺寸。列印時也可能會要求所有文字至少在裁剪線內1/8英寸，比如下面的這個名片。

準備需要列印的文件

99%的列印店會嚴格遵守你提交的文件規格。下面這些過程可以幫助你提供他們想要的文件。

如果你的布局有非常多的圖片、漸變或是投影，請直接跳到下一部分閱讀。

在Sketch中完成設計后，導出一份1x的PDF。許多程序，如Preview，或者Adobe Illustrator，都會自動將文件解析為72PPI。你可以用Preview（Tools > Show Inspector，⌘I）以英寸為單位查看文件尺寸，或者在Finder中的Get Info中以像素為單位查看文件尺寸。如果你通過Illustrator保存PDF，像素和英寸尺寸都會包含在文件中。

另外

1.需要將所有的文字轉化為形狀——「Converted to Outliners」。

2.需要將所有的顏色值從RGB格式變為CMYK格式。

3.嵌入的圖片也必須是CMYK格式的。

將文字轉化為形狀

為了保證你的設計能夠精確地列印出來，你必須要把PDF中的文字轉換為矢量形狀。這樣的話，無論你使用什麼字體，無論對方是否安裝了這些字體，在任何一台計算機上，你使用的文字看起來都完全相同。

你可以將Sketch中的全部文字轉化為形狀，但文字太多會讓Sketch卡得很。一次選擇十幾個文本對象轉換為形狀，Sketch分分鐘掛給你看！還好Adobe Illustrator比較擅長這個，我們可以用它來代替。

•在Illustrator中打開PDF，在菜單欄中選擇Select > All（⌘A）。

•同樣在菜單欄中，選擇Type > Convert Text to Outlines（⌘⇧O）。

搞定！

將顏色轉換為CMYK格式

在Illustrator打開PDF文檔，點擊File > Document Color Mode > CMYK Color。這就將整個文件從RGB轉換為CMYK顏色域。非常簡單～現在呢，我們需要將設計中的顏色轉變為準確的CMYK色值。

如果你習慣了基於屏幕的設計，並且非常喜歡這些顏色，我覺得你可能要對CMYK失望了。因為墨水中組合的四種顏色（譯者註：C——cyan——青色，M——magenta——品紅，Y——yellow——黃色，K——black——黑色）的性質，許多明亮且飽和度高的顏色難以重現甚至不可能重現。如果你不了解色彩理論和各種列印方法的優缺點，我建議你可以從印表機上找到類似材質的精確顏色值。你可以在Pantone色卡（有點小貴，但是非常值）上找到一個接近的顏色，或者找到你要使用的印表機的不同顏色的列印樣品（列印店裡應該已經有這些了，

而且可以給你每個顏色的CMYK值）。

一旦你為你使用的顏色選擇了合適的CMYK值，就該把這些一一替換掉啦！聽起來很乏味，事實上——這真的很乏味。不過我發現了一些小方法～

•首先，選擇需要改顏色的元素。如果你對illustrator不熟，我要提醒你，只有點擊右側的小圓圈才會選擇圖層，只點擊圖層名稱是沒用的！

•如果你的設計中有很多顏色相同的元素（比如所有的綠色文字），你可以先選擇一個元素，然後點擊右側工具欄的「Select Similar Objects」，從而選擇全部。如果工具欄或者按鈕處於不可用狀態，那就選擇Select > Same。

•選定好元素后，按住Shift，點擊工具欄中的填充顏色（左邊填充顏色，右邊邊框顏色）。即使是純黑色的元素也需要轉化成CMYK的黑色，顏色滑塊下又一個小樣本。

最後一步！

現在你所有的文字已經轉化為形狀，所有的顏色也轉化為CMYK，可以保存PDF了。

選擇File > Save As，你可以自行設置參數。我通常選擇在周圍都添加一個1/8英寸的出血尺寸。在左側的Marks and Bleeds部分，取消選中Use Document Bleed Settings 即可，如下圖所示。

這就搞定啦！相信我，下次你再做的時候一定可以省一半的時間！

你的設計有很多圖嗎？

如果你的Sketch文件里有超多點陣圖圖像（非矢量），那麼在更改文檔顏色模式的時候，它們會自動從RGB變為CMYK。將PDF倒入Illustrator時，所有的投影都會變為點陣圖圖像，所有的漸變都將變為不可編輯的Non-Natice Art。所以，如果這些圖像，陰影或漸變非常重要，我非常非常建議你將整個Sketch保存為PNG，再按照以下步驟在Photoshop中轉化為CMYK。

•將Sketch的Artboard導出為4.166x（譯者註：300PPI/72PPI）的PNG，這樣在轉換為300PPI的文件時，像素就夠多了。在導出之前，確保你的Artboard中已有足夠的出血尺寸。

•在Photoshop中打開PNG，然後在菜單欄中打開Image > Image Size。取消選中Resample，然後輸入以英尺為單位的尺寸，或從Sketch中導出時候所使用的像素／英寸（通常為300PPI）。點擊確定。

•在菜單欄中，選擇Image > Mode > CMYK Color。此時，Photoshop正在將文件轉換為默認的CMYK文件。在這個步驟中，你設計的顏色可能會改變，因為你的計算機屏幕顏色並不能完全對應印刷中的顏色，所以你也不該期待CMYK和RGB有同樣明亮的顏色。前面也說過這點了。

•如果需要的話，稍微調整下顏色，然後保存為.psd或.tif文件。一定要告訴列印店你的出血尺寸！

最後，你可以將這個過程和前面所說的PDF+ Illustrator工作流程結合起來使用，將photoshop圖像嵌入到Illustrator中，不過一般我只使用一個。

這種工作流程是否適合你呢？

如果你非常熟悉Sketch，在Sketch中工作效率很高，或者是不大熟悉Illustrator／Indesign，這中方法應該比較適合你。如果你已經在Sketch中做好了設計（比如界面，圖標，標誌），需要把它們列印出來，這也非常有用。

本文譯者： 關睿敏（點融黑幫），對邏輯與藝術充滿崇敬，所以選擇交互設計。目前在主要在toB的項目里。

本文來源：