Creative Cloud 摘取是「Creative Cloud 資產」中的免費新功能,可協助您直接在瀏覽器中瀏覽 PSD,包括圖層和圖層構圖。它對於網頁設計人員和開發人員特別有用,因為他們可以共用 PSD、開啟設計資訊並且下載已完成製作的資產。您可以使用摘取,在瀏覽器中對 PSD 檔案執行下列動作:

  • 複製文字和 CSS
  • 取得顏色、漸層和字體資訊
  • 度量元素之間的距離
  • 儲存最佳影像資產,以供生產

如果您是使用 PSD 檔案的網頁設計人員或開發人員,Creative Cloud 摘取可徹底簡化設計轉程式碼的程序,減少繁瑣的步驟數並將不必要的來回溝通次數減到最少。

註解:

摘取是唯讀的,您不能用來編輯 PSD 檔案。

摘取樣式資訊

  1. 登入 Creative Cloud 網站。
  2. 移到 Creative Cloud 帳戶的「資產」區段。
  3. 透過拖放到「檔案」區域或使用「檔案選擇」選項,上傳 PSD 檔案。您也可以瀏覽到先前上傳的 PSD 檔案。
  4. 按一下 PSD 檔案的縮圖,在「摘取」檢視中開啟檔案。
檔案會在摘取檢視中開啟

在這個「摘取」檢視中,您可以直接在瀏覽器內瀏覽 PSD 設計。您可以瀏覽圖層階層、檢視不同的圖層構圖,並且將部分 PSD 摘取成新的影像檔案。如果您在 PSD 預覽中按一下任何元素,系統就會選取圖層並提供該圖層的相關資訊。一旦完成選取之後,您就可以:

檢視及複製元素座標和尺寸

按一下 PSD 檔案中的單一元素時,會出現資訊面板。此面板會顯示元素的寬度和高度尺寸,以及設計中元素圖層的 x 與 y 位置。

設計元素的座標和尺寸 (以像素 px 為單位)
設計元素的座標和尺寸 (以百分比 % 為單位)

註解:

按一下任何值 (例如 W、H、X 或 Y),將它複製到剪貼簿。

摘取中的度量會以像素或百分比單位顯示。如果您已選取元素,百分比寬度和高度度量會相對於 PSD 設計的總計寬度和高度。如果選取兩個元素,在一個元素完全由另一個元素括住的情況下,內側元素的寬度和高度會以相對於外側元素的尺寸來報告。

顯示內測元素的度量相對於括住的元素度量

註解:

按一下任何值,將它複製到剪貼簿。

檢視兩個元素之間的距離

若要檢視兩個元素間的距離,請使用 Shift 鍵並按一下元素。知道元素之間的距離,有助於判斷邊界或與儲存格間距資訊。

兩個元素之間的距離

複製 CSS 程式碼

選取 PSD 設計中的元素後,在藍色資訊面板中按一下「複製 CSS」,即可複製元素的 CSS。您也可以從「CSS 檢測器」中檢視及複製 CSS 程式碼。

檢視 CSS 程式碼

註解:

摘取支援前置處理器。在「樣式」索引標籤中按一下 CSS 旁邊的 (向下鍵),即可檢視使用 CSS 前置處理器的選項。

使用 CSS 前置處理器的選項

複製文字

如果您選取的元素包含文字,請按一下「複製文字」,將文字複製到剪貼簿。

將選取的文字複製到剪貼簿

檢視及複製字體、顏色和漸層資訊

您可以開啟「樣式」面板,檢視及複製與設計文件 (PSD) 中所使用字體、顏色和漸層相關的資訊。檢視資訊時,按一下字體大小、顏色或漸層色票即可將其值複製到剪貼簿。

顏色漸層值範例

當您選取元素時,所使用的文字和顏色樣式會在「樣式」面板中反白顯示。

註解:

透過與 Adobe Typekit 整合,摘取可讓您存取數千種高品質的字體。Typekit 圖示 () 會顯示在「樣式」面板 Typekit 中的字體旁邊。當您按一下這個 Typekit 圖示時,摘取會開啟對應至 Typekit 字體的頁面。

找到您要使用的網頁安全字體之後,將它加入 Typekit 中的套件並連結到您的生產程式碼。

所選元素的字體和顏色資訊

使用檢色器工具

檢色器工具 () 可讓您快速地在設計中找出元素的顏色。

  • 選取檢色器工具,然後在您設計中的任何位置按一下。檢色器工具會偵測出顏色,並以顏色色票形式加入「樣式」面板。您現在可以輕鬆地檢視及複製顏色的 CSS 資訊。
檢色器工具

摘取影像資產

透過使用 Creative Cloud 摘取,您可以選取 PSD 中的一個或多個圖層並摘取影像資產。資產會摘取成 8 位元 PNG、32 位元 PNG、JPG 和 SVG 影像。

摘取影像資產

在元素的藍色資訊面板中,按一下 圖示,然後執行下列動作:

  1. 檢閱影像資產設定。必要時選取不同的支援影像格式 (PNG、JPG 或 SVG)。
  2. 如果是產生 JPG 資產,請調整影像資產品質。
  3. 必要時選取縮放選項。例如,選取「縮放比例 2×」。資產可以縮放的範圍從 0.1× 到 5×。
  4. 按一下「儲存」。
  5. 在「資產」面板中尋找已產生的資產。資產也可以在您 Creative Cloud「資產」檢視中 PSD 檔案旁邊的新建檔案夾中取得。建立的檔案夾名為 <檔案名稱>-assets。例如,如果檔案是 adventure.psd,資產檔案夾將名為 adventure-assets

    當您按一下「資產」面板中的影像縮圖時,資產會下載到您的本機電腦。
資產面板

註解:

當您登入並且在 Creative Cloud「資產」中檢視 PSD 檔案時,您可以存取進階資產摘取功能。每次下載資產時,資產會新增至「資產」面板和「Creative Cloud 資產」中的 .psd_assets 檔案夾。您可以按一下資產面板中的影像縮圖,將資產下載至您的本機。

當檢視的 PSD 檔案是來自其他使用者的連結時,資產面板將無法使用。在這種情況下,您仍然可以正常使用摘取,但當您按一下  圖示時,資產會立即開始下載至您的電腦。請使用您瀏覽器的下載管理員來尋找在您本機磁碟機上的資產。

使用圖層

「圖層」面板會顯示 PSD 設計中的所有圖層和圖層群組。由於 Creative Cloud 摘取是唯讀功能,因此,對圖層所做的任何變更不會存回到 PSD 檔案。

「圖層」面板可讓您切換可見度、選取圖層元素,以及摘取資產。

摘取圖層或圖層群組為影像資產

您可以摘取 PSD 檔案中的一個圖層或圖層群組為影像資產。請執行下列動作:

  1. 按一下「圖層」面板,檢視 PSD 檔案中的圖層階層。
圖層階層

註解:

您可以在階層中選取多個圖層,並匯出結合所有已選取圖層的單一新影像資產。

  1. 檢查及瀏覽圖層階層。 
    • 若要展開圖層群組,請按一下旁邊的檔案夾圖示 ()。
    • 按一下元素,即可在「圖層」窗格中反白顯示相對應的圖層/圖層群組。
  2. 選取您要摘取為影像資產的圖層或圖層群組。按住 Command 鍵 (Mac OS) 或 Ctrl 鍵 (Windows) 以選取多個圖層。如果選取了多個物件,這些物件就會摘取成包含已選取圖層或群組的單一資產。
  3. 按一下圖層或圖層群組旁邊的 圖示。若已選取多個圖層/圖層群組,請按一下任何已選取圖層旁邊的 圖示。
  4. 輸入新影像資產的名稱。
  5. 選取影像資產格式 (PNG 8 Alpha、PNG 32、JPG 或 SVG)。
  6. (選擇性) 如果是產生 JPG 影像資產,您可以調整其品質。
  7. 按一下「儲存」。
  8. 在「資產」窗格中尋找已產生的資產。資產也可以在 Creative Cloud「資產」中 PSD 檔案旁邊的新建檔案夾中取得。

註解:

重設圖層」選項會將圖層可見度重設為設計中的原始狀態。

隱藏圖層或圖層群組

若要隱藏/取消隱藏圖層或圖層群組,請切換「圖層」面板中其旁邊的眼睛圖示 ()。

使用圖層構圖

Creative Cloud 摘取可讓您檢視不同 Photoshop 圖層構圖。如果您上傳給摘取的 PSD 檔案包含圖層構圖,將會在 PSD 上方看到彈出式選單。這個彈出式選單包含 PSD 中的所有圖層構圖,以及名為「前次文件狀態」的選項。「前次文件狀態」是檔案上傳到 Creative Cloud 之前,儲存在 Photoshop 中的最後狀態。這個狀態不一定是圖層構圖。

在摘取中使用圖層構圖

分享檔案

當在摘取索引標籤檢視 PSD 檔案時,您可以使用 Creative Cloud 的分享功能來分享檔案。與您分享檔案的使用者可以摘取檔案的資產和度量,即使他們沒有登入 Creative Cloud 也無妨。

如需詳細資料,請參閱分享檔案和檔案夾

給予意見回應

如有其他疑問、需要報告問題或有其他的意見,請張貼到我們適用於 PSD 的摘取論壇

常見問答集

摘取是否支援 Photoshop 產生器標籤?

是。在可能範圍內,摘取影像資產時,設定會預設成相對應圖層名稱中指定的產生器標籤。

我可以使用摘取編輯 PSD 檔案嗎?

不可以。摘取僅供唯讀使用。

有任何字元是 PSD 或資產名稱不支援的嗎?

PSD 檔名或影像資產名稱不支援特殊字元 |、"、?、<、>、/、\、;、* 和 :。

誰能夠存取我上傳的 PSD 檔案?

您上傳到摘取的所有檔案都只能透過您的 Creative Cloud 帳戶存取。

如果您想要共用 PSD 檔案,可以將檔案設為公用並分享連結。如果共用時啟用摘取選項,則任何擁有連結的人員都可以在摘取中檢視您的 PSD,並從中摘取資產。

摘取是否能搭配使用 CMYK 色域的 PSD 檔案運作?

否。請先將 CMYK PSD 檔案轉換成 RGB 色域再上傳到摘取。

是否支援 PSD 之外的任何檔案格式?

否。目前僅支援 PSD 檔案。

摘取所處理的 PSD 檔案是否有限制?

摘取是為在 Photoshop 中建立的 PSD 檔案而設計。不建議對大於 2 GB 或是超過 1000 個圖層的 PSD 檔案使用摘取。

摘取與 Photoshop CC 的 Adobe 產生器有何不同?

產生器和摘取的目的都是為了協助設計人員和開發人員,移除從構圖到編碼程序中產生的摩擦。產生器可在 Photoshop CC 內摘取影像資產,摘取則能以 Creative Cloud 服務形式直接在您的瀏覽器中運作。使用摘取不一定要安裝或執行 Photoshop。

此外,在摘取中,您還可以從多個圖層建立單一資產。

我需要 Creative Cloud 訂閱才能使用摘取嗎?

任何擁有免費或付費 Creative Cloud 帳戶的人員,都可以將 PSD 檔案上傳到「Creative Cloud 資產」,以及使用摘取。

如果您分享摘取連結,則接收者不需要登入 Creative Cloud 帳戶,也能從您的 PSD 檔案摘取資產和度量。

為什麼有些顏色或漸層未包含在摘取樣式面板?

在大多數這類情況中,顏色或漸層屬於摘取不支援且以像素為基礎的填色。如果您的 PSD 檔案使用這類填色,請使用檢色器擷取顏色,並將顏色色票加入「樣式」面板。

摘取針對漸層提供的 CSS 是否有限制?

是,某些漸層類型需要一些技巧才能產生在 CSS 中。摘取目前並未針對漸層的「角度」、「反射性」、「菱形」或「形狀缺口」類型提供精確的 CSS。不過,已經支援「線性」和「放射」漸層類型。

為什麼在摘取中我的 PSD 預覽與我在 Photoshop 中看到的不符?

顯示差異可能存在「摘取」檢視中,不同於您在 Photoshop 看到的。如果您觀察到這類差異,請向我們反應。

請在我們的論壇張貼文章,描述您所發現的問題。如果可以張貼差異影像的話更好,我們會嘗試為您解決問題。

我可以在行動裝置上使用摘取嗎?

您可以在行動裝置上查看 PSD 的預覽並且檢視部分樣式,包括顏色、字體和漸層。但是,您無法像使用桌上型電腦一樣,與 PSD 進行互動。

我可以一次下載所有資產嗎?

目前,摘取不支援一次下載所有資產。您必須個別摘取並下載資產。

我可以一次下載設計的所有 CSS 程式碼嗎?

目前,摘取不支援一次下載一個設計的所有 CSS 程式碼。您必須選取個別項目,然後將其 CSS 複製到您的生產程式碼。

如果您對這個功能感興趣,請在我們的論壇貼文,描述您希望如何組織 CSS 輸出。

我共用了我的 PSD 檔案,但是收件者看不到摘取索引標籤。為什麼?

如果您在 2014 年 8 月底摘取發行前共用了 PSD 檔案,PSD 檔案將不會啟用摘取索引標籤。若要啟用,請執行下列步驟:

這個選項會啟用摘取,而不會變更您公開共用的 URL。

  1. 開啟「傳送連結」對話方塊中的「進階選項」。
  2. 確認已啟用「允許摘取」。

Project Parfait 與摘取有何不同?

Project Parfait 是 Adobe 以測試版形式推出的服務,其中引進的工作流程現在可在摘取中看到。摘取具有 Project Parfait 的所有相同功能,以及其他更多功能。現在,Project Parfait 已經正式引進 Creative Cloud,使用 Project Parfait 服務摘取 PSD 中的資訊和資產的能力即將終止。

我上傳到 Project Parfait 的 PSD 會如何?

如果您使用過 Project Parfait 且希望下載曾經處理過的檔案,在 2014 年結束之前,您都可以下載。

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

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