Project Parfait將Photoshop文件轉換為代碼

UI設計微課堂

關注將獲得一對一解答，設計、資源、分享

來自Adobe的新工具，目前處於測試階段，它允許您直接在瀏覽器中打開任何PSD以從中提取CSS，文本和圖像資源。目前它僅適用於Chrome，但Adobe計劃在開發過程中將其推廣到所有瀏覽器。

拖放到上傳

然後，使用Adobe ID登錄後，將PSD拖放到空白面板區域，然後它會上傳給您：

上傳完成後，您可以點擊PSD的縮略圖，它會在Project Parfait中為您打開：

CSS提取

要為設計中的任何元素生成CSS，只需點擊選擇它，相關代碼將顯示在右側邊欄的CSS檢查器欄位中。從這裡您可以突出顯示並複製所需代碼的元素，或者單擊「全部複製」按鈕：

另外，選中元素後，會出現一個藍色調出，您可以在其中單擊複製CSS鏈接直接獲取所有代碼：

文本提取

選中某個元素時出現的藍色標註也可以用於通過單擊「複製文本」鏈接輕鬆複製PSD中的文本內容：

圖像提取

保存圖像後，它將顯示在右側邊欄的「資產」選項卡中，您可以點擊圖像下載它：

方面仍在進行中

項目Parfait測試版剛出了大門，僅有一個月的時間，因此目前不支持CSS代的幾個方面。然而，根據Project Parfait論壇的成員，更新速度已經非常快，所以我猜測Adobe團隊已經在這些領域開展工作，並且我們可以假設很多增強功能正在開發中。

目前通過為背景顏色設置RGBA值來處理應用於圖層的不透明度設置。背景顏色的alpha通道用於設置不透明度，而不是為整個元素輸出實際的不透明度值，這意味著邊框，陰影等不受影響。

目前似乎還沒有可能檢測到多個陰影。如果您有陰影，它將被拾取，但插入/陰影被忽略。

未檢測到陰影上的不透明度設置。取代RGBA值，您將通過十六進位代碼獲得平坦的陰影顏色。

沒有真正的方法來提取平鋪背景圖像，但由於未檢測到圖案疊加層，因此無法選擇要作為圖像導出的特定區域。

未檢測到通過圖層樣式設置的邊框。但是通過實時形狀屬性設置的邊框被拾取。

生成漸變時，不會為不支持CSS漸變的瀏覽器設置屬性。

已經很好的方面

文本CSS生成

Parfait項目在為文本元素生成CSS方面已經做得很好。

它可以完美地生成數字字體重量設置，例如100,300,900，這意味著如果您在Photoshop中設置了諸如「細」，「輕」，「黑」等字體重量，則將以CSS輸出正確的值以反映這種重量。

它在估算線條高度方面也做得非常好，計算出的值是相對於所選文本元素的字體大小的值。

另外，如果在一行文本中存在多種類型的樣式，它將檢測它們並給你兩個CSS輸出，一個以注釋開頭。

圖層選擇

有時候，圖層堆疊在一起，或者彼此間隔很小的距離，難以通過可視界面進行選擇。因此，Project Parfait還提供了直接通過側欄中的「圖層」選項卡選擇圖層的功能：

提取調色板

只要導入PSD，Project Parfait將識別設計中使用的所有顏色，並在右側邊欄的「顏色」部分中輸出它們。此外，每當您選擇使用其中一種顏色的元素時，顏色將在側邊欄中突出顯示：

這對於使用預處理器的人來說可能非常有用，因為顏色值可以在編碼過程開始時很容易地定義為變數，然後在整個設計過程中根據需要應用。

識別可重複使用的漸變樣式

與Project Parfait檢測平面顏色的方式大致相同，它也將檢測已在設計中應用的漸變，並使其可從右側邊欄輕鬆複製和粘貼。與平面顏色一樣，任何使用漸變的選定元素都將在側邊欄中看到突出顯示的相應漸變：

對於預處理器用戶，這提供了一種方便的方法來獲取設計中使用的所有梯度，以便將它們定義為混合，以便在設計中重複使用。

概覽字體摘要

除了顏色和漸變信息外，Project Parfait還會為您提供設計中使用的所有字體以及使用的重量和尺寸的「概覽」摘要。

這意味著你打開PSD的那一刻你就會知道哪些字體以及哪些字體重量變體需要以網頁友好的格式進行集成。您也可以選擇將字體大小保存為預處理器變數。

獲取布局信息

當您直接在Photoshop中工作時，獲取有關元素寬度，高度，位置和距離的信息可能會是一種痛苦的體驗。對於Project Parfait來說不是這樣。

要獲得元素的寬度，高度和X / Y坐標，只需單擊它，然後看看藍色的調用：

要獲得兩個元素之間的距離，只需按住SHIFT並單擊它們兩個。將出現一個顯示屏，以像素為單位顯示水平和垂直距離：

項目Parfait是免費的

現在Project Parfait完全免費使用，只需使用您的Adobe ID登錄，即可開始使用。

如果您是一位正在尋找對您的製作工作流程進行增強的設計師，或者想要更簡單地從PSD轉向代碼的開發人員，那麼Project Parfait必須嘗試新的到達網站設計場景。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！