Sketch 轉(zhuǎn) PSD

最近做了一個(gè)平面設(shè)計(jì)的外包項(xiàng)目，品牌是我寫(xiě)“女神本”京東商品詳情頁(yè)?？蛻?hù)的需求是列在一個(gè)將近30頁(yè)的PPT里，內(nèi)容比較多。

在開(kāi)始設(shè)計(jì)之前，我先列好了需求的版塊，頁(yè)面很長(zhǎng)，為了看到整頁(yè)滑下來(lái)的效果，所以用 Sketch 來(lái)做就會(huì)很方便。

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

比如說(shuō)做個(gè)示范，在 Sketch 里為 Mobile 端設(shè)計(jì)的項(xiàng)目，一般是畫(huà)布寬設(shè)為 375px，然后 jpg 或者 png 的時(shí)候，選擇 2x 或者 3x 導(dǎo)出就可以了。

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

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

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

鏈接：photopea.com

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

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

我們?cè)冱c(diǎn)開(kāi) File - Save As PSD，把文件下載保存到本地。

要注意一個(gè)小問(wèn)題，這個(gè)工具只能在每個(gè)小時(shí)的上半個(gè)小時(shí)可以使用，比如說(shuō)2點(diǎn)-2點(diǎn)半之間可以用，然后2點(diǎn)半到3點(diǎn)之間不能使用。

如果你希望沒(méi)有限制的話(huà)，就需要購(gòu)買(mǎi)一下 Unlimited 版本。但其實(shí)正常不需要，注意好時(shí)間就可以了。

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

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

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

PSD 轉(zhuǎn) Sketch

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

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

然后在線(xiàn)有一個(gè)特別的小工具，就是可以讓我們 PSD 轉(zhuǎn) Sketch。我們打開(kāi)這個(gè)界面，看它的標(biāo)志，它還是個(gè) Beta 版，但使用起來(lái)基本上沒(méi)有問(wèn)題。

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

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

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

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

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

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