Sketch 轉(zhuǎn) PSD

最近做了一個平面設(shè)計的外包項目，品牌是我寫“女神本”京東商品詳情頁?？蛻舻男枨笫橇性谝粋€將近30頁的PPT里，內(nèi)容比較多。

在開始設(shè)計之前，我先列好了需求的版塊，頁面很長，為了看到整頁滑下來的效果，所以用 Sketch 來做就會很方便。

但最后源文件的交付需要是 PSD，所以我在完成設(shè)計后，按照不同的版塊在 Sketch 里，創(chuàng)建了不同的單個的文件，以備做 PSD 轉(zhuǎn)化使用。

比如說做個示范，在 Sketch 里為 Mobile 端設(shè)計的項目，一般是畫布寬設(shè)為 375px，然后 jpg 或者 png 的時候，選擇 2x 或者 3x 導出就可以了。

但一般在 PSD 里面，畫布就會直接設(shè)置的大一點，比如說寬設(shè)為 900px，所以我先在 Sketch 里把畫布的大小等比例放大，然后把這個文件存起來。

要注意一點，我們做設(shè)計的時候，要把圖層整理命名好，讓它一目了然，養(yǎng)成良好的習慣。像 Sketch 里的這些圖層和命名，之后也會完全被保留到轉(zhuǎn)換好的 PSD 文件里。

接著我們打開這個網(wǎng)站 Photopea，初次打開的時候，頂部應(yīng)該有一些說明文字，可以把叉叉關(guān)掉。

鏈接：photopea.com

然后就是這個特別像 Photoshop 的界面了，我們點開 File - Open，找到我們需要轉(zhuǎn)化的 Sketch 文件。

然后文件就被加載到界面上了，這時可以看到我們的中文字體會有一點問題，但沒有關(guān)系我們先操作下去，后面再解決。

我們再點開 File - Save As PSD，把文件下載保存到本地。

要注意一個小問題，這個工具只能在每個小時的上半個小時可以使用，比如說2點-2點半之間可以用，然后2點半到3點之間不能使用。

如果你希望沒有限制的話，就需要購買一下 Unlimited 版本。但其實正常不需要，注意好時間就可以了。

接著我們打開這個 PSD 文件看一下，跟剛才在界面上預覽看到的一樣，然后圖層也和我們 Sketch 里看到的一樣，都被保留了。

下面我們需要解決一下字體的問題，非常簡單，我們只要點擊這段文字，把圖層變?yōu)榫庉嬆Ｊ?，然后中文字體就顯示了。目前英文字體好像沒有這個問題。

我們保存一下，一個 Sketch 文件就這么被轉(zhuǎn)化為了 PSD。

PSD 轉(zhuǎn) Sketch

我們除了 Sketch 轉(zhuǎn) PSD，有時也會有 PSD 轉(zhuǎn) Sketch 的需求。這個我們使用另外一個產(chǎn)品，叫 Avocode。

它其實是類似于 Zeplin 的一個工具，可以幫助我們識別 Sketch 或者 PSD 的設(shè)計稿標注以及 CSS 等信息。

然后在線有一個特別的小工具，就是可以讓我們 PSD 轉(zhuǎn) Sketch。我們打開這個界面，看它的標志，它還是個 Beta 版，但使用起來基本上沒有問題。

鏈接：https://avocode.com/convert-psd-to-sketch

我們點擊這個 Browse PSD Files，然后輸入自己的郵箱，它這個是會把轉(zhuǎn)換好的文件發(fā)到你的郵箱里，然后你需要打開郵箱去下載。先等待傳完。

這里郵箱我已經(jīng)打開了，大概需要 1~2 分鐘，這個郵件就會出現(xiàn)了。點進去，找到下載鏈接，點擊下載。

我們打開這個文件看一下，圖層都被保留了，字段都是可以編輯的。完美。

好，介紹就到這里，祝大家工作愉快。

文章作者：西瓜設(shè)計研究所