設計教程 ·

Sketch與PSD文件的互相轉換教程

Sketch 轉 PSD

最近做了一個平面設計的外包項目,品牌是我寫“女神本”京東商品詳情頁。客戶的需求是列在一個將近30頁的PPT里,內容比較多。

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

但最后源文件的交付需要是 PSD,所以我在完成設計后,按照不同的版塊在 Sketch 里,創建了不同的單個的文件,以備做 PSD 轉化使用。

 

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

 

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

 

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

 

接著我們打開這個網站 Photopea,初次打開的時候,頂部應該有一些說明文字,可以把叉叉關掉。

鏈接:photopea.com

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

 

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

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

 

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

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

 

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

下面我們需要解決一下字體的問題,非常簡單,我們只要點擊這段文字,把圖層變為編輯模式,然后中文字體就顯示了。目前英文字體好像沒有這個問題。

我們保存一下,一個 Sketch 文件就這么被轉化為了 PSD。

 

 

PSD 轉 Sketch

我們除了 Sketch 轉 PSD,有時也會有 PSD 轉 Sketch 的需求。這個我們使用另外一個產品,叫 Avocode

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

 

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

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

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

 

這里郵箱我已經打開了,大概需要 1~2 分鐘,這個郵件就會出現了。點進去,找到下載鏈接,點擊下載。

 

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

 

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

 

文章作者:西瓜設計研究所