註解:

網頁式 Extract 功能將會於 2019 年 3 月停止服務。但是,2019 年 3 月之後,Photoshop 和 Dreamweaver 桌面應用程式依舊會保留此項 Extract 功能。如需詳細資訊,請參閱 Creative Cloud Assets:網頁式 Extract 停止服務

extract_logo

使用 Creative Cloud Extract 可讓 Photoshop 設計轉程式碼工作流程更簡單。Extract 會為網頁設計人員和網頁開發人員簡化程序,並且大幅改善將網頁設計轉換成可用程式碼的效率。


Photoshop 構圖是一種與網頁開發人員共用設計規格時常用的方法,然後開發人員再將設計理念轉換成 HTML 和 CSS。在一般的工作流程中,設計人員會針對網頁或行動設計建立 Photoshop 構圖。然後,製作設計人員會為開發人員準備 PSD 檔案,讓他們分割資產並建立紅線規格。網頁開發人員必須負責取出這些設計元素和資產,然後轉變成程式碼。

Extract 徹底改變了這種工作流程,讓網頁設計人員在最短的時間內使用 Photoshop 匯出最佳化的資產,然後將 PSD 與在 Dreamweaver 中撰寫程式碼的開發人員共用。

Extract 工作流程

您可在 PSD 設計轉程式碼工作流程中的任何階段使用 Extract。

  • 設計人員可以在熟悉的 Photoshop 環境中工作,以便根據圖層或圖層群組定義及匯出影像資產。
  • 網頁設計人員和開發人員可以在 Dreamweaver 中使用 Extract,這個全套完整的解決方案直接在程式碼編寫環境中提供了內容程式碼提示、資產摘取和其他功能。
Adobe_Photoshop_CC_mnemonic_RGB_128px_no_shadow

在 Photoshop 中匯出資產

建立 Photoshop 構圖的設計人員可以使用簡易視覺效果介面,根據個別圖層或圖層群組快速定義並封裝影像資產。如此可大幅縮短製作時間,讓設計人員能夠將更多時間投入設計。


Adobe_Dreamweaver_CC_mnemonic_RGB_64px

Dreamweaver 中的 Extract

網頁設計人員和開發人員現在可以在 Dreamweaver 中檢視 PSD,並且使用內容程式碼提示,輕鬆地在 CSS 中定義字體、顏色和漸層。他們也可以將最佳化的影像拖放到「即時檢視」介面中、複製文字以及進行更多作業。



此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策