註解:

Photoshop CC 的目前版本中不再提供此功能。本章節中的資訊套用至先前版本的 Photoshop。

重要: 「設計空間」(預視) 需使用 Mac OS X 10.10 或 Windows 8.1 64 位元作業系統或更新版本。

開始使用

「設計空間」(預視) 是專為網頁和應用程式設計師提供的 Photoshop 附屬體驗。從技術面來說,「設計空間」(預視) 是建置於 Photoshop 之上的 HMTL5/CSS/JS 層。以此方式將這種全新體驗與標準版 Photoshop 區隔,不僅能呈現令人耳目一新的 UI、更聰明的互動方式,更能加快慣用功能的提供速度。

「設計空間」目前是一種「技術預視」。若要協助我們調整「設計空間」(預視) 的開發方向,以符合您的切身需求,請不吝將您的意見提供給我們: @psdesign

如需此版本的已知問題清單,請參閱常見已知問題

註解:

您可以從 github 取得「設計空間」(預視) 的原始程式碼。

切換至設計空間 (預視)

在 Photoshop 中,執行下列其中一項作業:

  • 選取「視窗 > 設計空間 (預視)」。
  • 在螢幕畫面右上角的工作區選取快顯選單中,選擇「設計空間 (預視)」。

註解:

「設計空間」(預視) 預設為啟用。如果無法直接使用選項切換至「設計空間」(預視) 工作區,請確認您已選取「偏好設定 > 技術預視」底下的「啟用設計空間 (預視)」

Photoshop 啟用設計空間
選擇「設計空間 (預視)」工作區

註解:

切換至「設計空間」(預視) 工作區後,選取「說明 > 設計空間簡介」,即可快速瀏覽各項功能。首次切換至「設計空間 (預視)」時,程式會自動顯示簡介。

對設計空間 (預視) 的第一印象

Photoshop 設計空間使用者介面
設計空間 (預視)使用者介面

A. 工具列 B. 屬性 C. 圖層與資料庫 D. 收闔或展開欄 

註解:

按住 Cmd/Ctrl 鍵並按一下標示為 D的圖示,即可在「屬性」和「圖層與資料庫」之間快速切換。

Photoshop 設計空間面板
可用功能的詳細畫面

調整介面

  • 必要時,您可以將工作區放到最大,從單一欄中檢視屬性、圖層和資料庫。選取「視窗 > 單一欄模式」
Photoshop 視窗單一欄模式
單一欄模式

  • 如果您極度仰賴鍵盤快捷鍵,可以選擇隱藏工具列。取消選取「視窗 > 釘選工具列」

建立文件

使用「設計空間」(預視) 可透過多種方式建立文件。

  1. 選取「檔案 > 新增」或使用 Cmd/Ctrl+N 鍵盤快速鍵。「設計空間」(預視) 可透過一個使用 iPhone 6 範本的工作區域快速建立文件。
  2. 選擇「檔案 > 新增」,以開啟「新增」對話框。指定必要詳細資料,然後按一下「確定」。

    如需詳細資訊,請參閱建立影像建立工作區域文件
  3. 選擇「檔案 > 從範本新增」,然後選取下列其中一個範本:
Photoshop 可用範本

將工作區域新增至「設計空間」(預視) 檔案

  1. 請在「設計空間」(預視) 介面中執行以下任一項操作:
  • 選取「圖層 > 建立新工作區域」。「設計空間」(預視) 會將預設尺寸的工作區域新增至文件。
  • 若要在特定裝置新增工作區域,請選取「圖層 > 新工作區域」,然後選取預設集。例如,選取「圖層 > 新工作區域 > iPad Pro」
  1. 將您的設計元素新增至新工作區域。

註解:

您也可以按一下文件中目前顯示於工作區域旁的「+」圖示,將工作區域新增至文件。只要選取現有的工作區域,且畫布可容納其他工作區域,「+」圖示便會顯示。

工具

設計空間 (預視) 有下列工具可供使用:

Photoshop 設計空間工具
工具

註解:

第一個字母表示使用工具的快速鍵。例如,使用「矩形」工具的快速鍵是 R。

選取「

除了一般的選取工作,新的「選取」工具還能特別讓您快速瀏覽圖層和工作區域階層。

  • 若要向下切入至嵌套的群組或圖層階層,請在已啟用「選取」工具的狀況下對該階層按兩下。
  • 按 Esc 可在階層中往上一層。

矩形和橢圓

繪製形狀。這些工具的運作方式大多與標準 Photoshop 相同。

文字

建立文字圖層。

筆型

其運作方式大多與標準 Photoshop 中的「筆型」工具相同。

註解:

在修改物件的寬度、高度或其他數值屬性時,您可以輸入數學運算來取得精確值。例如,500/320*4

取樣器

進階取樣器工具。能讓您複製顏色、效果和其他屬性。請依照下列步驟進行:

  1. 選取您要複製屬性的物件。例如,選取矩形。
  2. 選取「取樣器」工具。
  3. 對您要複製屬性的物件執行以下動作:

    按一下: 複製顏色
    按住 Shift 鍵並按一下: 複製效果
    空格鍵: 叫用提示型顯示,提供您可取樣的屬性。只要適用的話,以上屬性一律包含「字體」

Photoshop 複製屬性
按一下您要複製的屬性

搜尋文件、指令和更多內容

「設計空間」(預視) 具有完整的搜尋功能,可讓您搜尋以下項目:

  • 選單指令
  • 開啟的文件
  • 最近使用的文件
  • 圖層、像素圖層、調整圖層、群組圖層、向量圖層和文字圖層
  • 工作區域
  • 資料庫—全部或特定資料庫
  • 智慧型物件
  • 樣式
  • 圖形
  • 預設集

您可以在搜尋時篩選搜尋結果,使結果只包含特定的項目類型。

請依照下列步驟執行:

  1. 選取「編輯 > 搜尋」,叫用搜尋功能。或者,按 Ctrl/Cmd+F 鍵,或是按一下標題列左邊的「搜尋」圖示。
Photoshop 搜尋功能
完整搜尋功能

Photoshop 篩選搜尋
篩選搜尋;此範例是在 Creative Cloud 資料庫中搜尋

快速建立圖層的向量圖遮色片

「設計空間」(預視) 讓建立專案影像的遮色片變得十分簡單。

  1. 「圖層」面板中選取圖層。
  2. 按一下「設計空間」頂端列的「遮色片模式」() 圖示。或者,按 M 鍵以使用鍵盤快捷鍵。「遮色片模式」啟用時,「選取」工具箭頭會變成空心 (),而「遮色片模式」圖示會變成藍色。
  3. 使用「筆型」「矩形」等工具,為您的影像繪製遮色片。
  4. 遮色片建立完成後,以下列任一方式結束「遮色片模式」:
  • 按一下「遮色片模式」圖示 ()。
  • 按 Esc 鍵。
  • 「遮色片模式」鍵盤快捷鍵—M

管理與排列物件

建立參考線

在「設計空間」(預視) 工作區建立參考線,更精準地使用設計元素。

  1. 確認已選取「檢視 > 顯示參考線」
  2. 按一下「選取」工具,並將滑鼠游標暫留在使用區域的邊緣上。注意藍色螢光標示,出現即表示可建立參考線。
  3. 按一下參考線並加以拖曳。

    如果已選取工作區域或工作區域中的圖層,便會建立工作區域專屬的參考線。只有選取工作區域或工作區域的次要圖層時,這類參考線才會顯示。如果未選取工作區域或工作區域中的圖層,便會建立文件專屬的參考線。

均分物件

  1. 選取三個或三個以上的圖層。
  2. 選擇「排列順序 > 均分物件」,然後選擇指令。或者,從「均分和對齊方式」面板中選取均分按鈕。
  • 水平    從每個圖層的水平居中位置開始,以平均的間距分隔圖層。
  • 垂直    從每個圖層的垂直居中位置開始,以平均的間距分隔圖層。

對齊物件

  1. 選取兩個或更多圖層。
  2. 選擇「排列順序 > 對齊物件」,然後選擇指令。或者,從「均分和對齊方式」面板中選取對齊方式按鈕。
  • 左    將所選圖層上的左像素,對齊最左側圖層上的左像素
  • 居中    將所選圖層上的水平居中像素,對齊所有選定圖層的水平居中像素
  • 右    將連結圖層上的右像素,對齊所有選定圖層上的最右側像素
  •     將所選圖層上的頂端像素,對齊所有選定圖層上的最上方像素
  •     將每個所選圖層上的垂直居中像素,對齊所有選定圖層的垂直居中像素
  •     將所選圖層上的底部像素,對齊所選圖層上的最下方像素

變形物件

您可以對單一圖層或多個圖層套用變形。若要建立變形,請先選取要變形的項目,然後選擇變形指令。在修改物件的寬度、高度或其他數值屬性時,您可以輸入數學運算來取得精確值。例如,500/320*4

旋轉

  1. 選擇「圖層 > 變形」,然後選擇指令。
  • 旋轉 180 度   將項目旋轉 180 度
  • 向右旋轉    將項目順時針旋轉 90 度
  • 向左旋轉    將項目逆時針旋轉 90 度
  1. 您也可以直接在畫布上旋轉物件。選取物件後,將滑鼠游標暫留在角落上,Widget 便可旋轉。
Photoshop 旋轉物件
在畫布上旋轉物件

翻轉

  • 選取「排列」選單中的翻轉指令。
    • 水平翻轉   將項目水平翻轉
    • 垂直翻轉    將項目垂直翻轉
    • 交換位置   將兩個選取的群組或圖層交換位置

變更物件外觀

您可以修改「外觀」面板中的可用選項,藉此變更物件。

不透明

圖層的總不透明度決定它遮住還是顯現下面圖層的程度。不透明度為 1% 的圖層幾近透明,而不透明度 100% 的圖層則完全不透明。

  1. 在「圖層」面板中,選取一或多個圖層。
  2. 「外觀」面板中,指定不透明度的值。

混合模式

圖層的混合模式會決定圖層中的像素如何與影像中的基本像素混合。您可以利用混合模式建立多種特殊效果。

  1. 「圖層」面板中,選取一或多個圖層。
  2. 在下列任一「外觀」面板中選擇混合模式:
  • 正常
  • 溶解
  • 變暗
  • 變亮
  • 濾色
  • 覆蓋
  • 色彩增值
  • 加深顏色
  • 線性加深
  • 顏色變暗

如果您在標準版 Photoshop 中使用任何其他混合模式,該混合模式在「設計空間」(預視) 中也將被接受。

如需每一個混合模式作用的詳細資訊,請參閱混合模式

文字

  1. 在「圖層」面板中,選取文字圖層。
  2. 「外觀」面板中指定以下設定:
  • 字樣   從下拉式清單中設定字體.
  • 寬度   根據您所選取的字體設定寬度.
  • 文字顏色 以下列其中一種方式選取文字顏色:
    • 從顏色挑選器中選取顏色。
    • 指定顏色值。請參閱 CSS Legal 顏色值以快速參考顏色值。
    • 指定顏色的一般名稱,例如番茄紅或洋紅。如需支援的名稱清單,請參閱延伸顏色關鍵字
  • 大小   設定所選文字的大小.
  • 字母    設定字母間距.
  • 行   設定行距.
  • 對齊   將文字靠左、居中、靠右對齊或齊行。

向量

在向量工具的協助下,您將可使用「增加」、「減去」、「相交」或「排除」選項修改圖層上的目前形狀,或組合一或多個選取的形狀圖層。

  1. 在「圖層」面板中,選取要組合的圖層。
  2. 選取「圖層 > 合併」,然後選擇下列任一選項:
  • 統一形狀    在現有的形狀或路徑中增加新的區域
  • 去除形狀    從現有的形狀或路徑中移除重疊區域
  • 形狀相交    將區域限制為新區域與現有形狀或路徑的相交部分
  • 差異形狀    排除新區域與現有區域合併後的重疊區域

填色

  1. 在「圖層」面板中,選取一或多個圖層。
  2. 開啟「外觀」面板中的填色選取器,然後以下列任一方式指定顏色:
  • 按一下檢色器中的顏色。
  • 指定顏色值。請參閱 CSS Legal 顏色值以快速參考顏色值。
  • 指定顏色的一般名稱,例如番茄紅或洋紅。如需支援的名稱清單,請參閱延伸顏色關鍵字
  1. 指定 alpha 值以設定填色顏色的不透明度。

筆畫

  1. 在「圖層」面板中,選取一或多個圖層。
  2. 開啟「外觀」面板中的筆畫顏色選取器,然後以下列任一方式指定顏色:
  • 按一下檢色器中的顏色。
  • 指定顏色值。請參閱 CSS Legal 顏色值以快速參考顏色值。
  • 指定顏色的一般名稱,例如番茄紅或洋紅。如需支援的名稱清單,請參閱延伸顏色關鍵字
  1. 指定 alpha 值以設定筆畫顏色的不透明度。
  2. 指定筆畫的大小。
  3. 從蹦現式選單中,將筆畫的對齊方式指定為「內部」「居中」「外部」

套用圖層效果

  1. 「圖層」面板中,選取一或多個圖層。
  2. 按一下「效果」面板的「+」圖示,新增筆畫、顏色覆蓋、陰影或內陰影。

筆畫

將筆畫效果新增至選取的圖層。

顏色覆蓋

使用顏色填滿圖層內容。

陰影

增加落在圖層內容後面的陰影。

內陰影

增加恰好落在圖層內容邊緣內的陰影,使圖層產生凹陷的外觀。

  1. 指定該效果的必要設定。
  • 如需顏色覆蓋,您可以指定混合模式。如需每一個混合模式作用的相關資訊,請參閱混合模式
  • 如需內陰影和陰影,您可以指定下列設定:
    • 混合模式
    • 陰影的 X 和 Y 座標
    • 想要的陰影模糊程度
    • 陰影展開的範圍。「展開」設定會在模糊前拓展陰影邊界。

整合 Creative Cloud Libraries

您現在可以使用 Creative Cloud Libraries,直接在「設計空間」(預視) 介面中組織、存取與共用您的資產。「設計空間」(預視) 資料庫的使用方法與標準版 Photoshop 大致相同。如需詳細資訊,請參閱下列資源:

轉存資產

您可以直接在「設計空間」(預視) 介面中,將工作區域、圖層、圖層群組或所有文件轉存為 PNG、JPEG、SVG 或 PDF 資產。

  1. 按一下「轉存」面板的「+」,指定您所選取,準備產生資產之圖層的轉存設定。
  2. 指定您要轉存資產的「比率」「尾碼」「格式」
  3. 必要時,按一下「+」以指定更多資產的設定。
  4. 按一下 圖示,即可將產生的資產儲存至電腦。

註解:

按一下 圖示,可快速新增所有 iOS 裝置的相關可用資產類型。同樣地,按一下 圖示,即可快速新增所有 HiDPI 顯示器的相關資產類型。

註解:

為方便您使用,將多個物件轉存為資產時,「設計空間」會依照物件的畫布順序,而非「圖層」面板中的疊置順序。您也可以選擇其他圖層,指定多個轉存設定,並選取「檔案 > 轉存」或按一下頂端標題列的「轉存」圖示,同時轉存所有物件。

此版本的常見已知問題

  • 輸入負的「連結資料庫智慧型物件」變形值會導致錯誤。在「寬」或「高」欄位中輸入負數,會導致「設計空間」(預視) 出現內部錯誤,無法選取或在畫布上顯示圖層,控制項也沒有回應。

    解決方法/因應措施: 選取「視窗 > 返回標準版 Photoshop」「返回上一步」,直到圖層顯示在畫布上為止。
  • 第一次使用取樣器後執行「還原」動作,若再次將「取樣器」工具用於「連結資料庫智慧型物件」上會導致錯誤。

    解決方法/因應措施: 再次取樣前,先還原兩次。
  • 開啟 Illustrator 檔案 (讀入 PDF) 導致錯誤。

    解決方法/因應措施: 選取「視窗 > 返回標準版 Photoshop」。現在請返回「設計空間」(預視)。
  • 只選取一個圖層時,「連結資料庫智慧型物件」偶爾會啟用「調換」功能。

    解決方法/因應措施: 按一下「調換」圖示以修正此問題。
  • 進入「設計空間」(預視),在標準版 Photoshop 中建立形狀並加以選取後,形狀的「填滿」與「筆畫」設定會無故變更。

    解決方法/因應措施: 在進入「設計空間」(預視) 前取消選取形狀,或在進入「設計空間」後執行「還原」動作。
  • 嘗試在「文字」編輯模式中轉存會導致失敗,同時停用「轉存」面板圖示。

    解決方法/因應措施: 使用選單指令或文件頁首的轉存圖示。返回標準版 Photoshop 再回到「設計空間」(預視),即可重新啟用「轉存」面板圖示。
  • 未選取任何圖層時,使用「筆型」工具建立形狀,會將形狀置於「圖層」面板的工作區域外,而不是工作區域內的畫布中。

    解決方法/因應措施: 建立形狀後,按一下「選取」工具並加以微調 (按鍵盤方向鍵)。
  • 建立圖層遮色片後進行還原,會顯現所有套用至該圖層的遮色片。這會讓圖層看起來彷彿沒有套用遮色片一樣。然而,「圖層」面板圖示仍會顯示該圖層具有遮色片,造成誤導。

    解決方法/因應措施: 執行兩次「還原」操作。
  • 建立第一個路徑後,便不使用輔助按鍵建立路徑。移除繪製的第一個路徑時,產生類似相減的效果。

    解決方法/因應措施: 繪製前按住 Shift 鍵不放。
  • 圖層螢光標示問題。如未選取圖層,將滑鼠游標暫留在圖層上不會將圖層螢光標示。Cmd/Ctrl 輔助鍵也無效。如已選取圖層,Cmd/Ctrl 輔助鍵只會顯示智慧型參考線,而不會螢光標示 (藍)「設計空間」(預視)。
  • (僅限 Windows)您目前無法在 Windows 上使用軌跡板捲動,藉以平移畫布。
  • 移動畫布上的工作區域後,X 和 Y 座標有誤。
  • 將圖層移動至工作區域外,再將圖層移動到工作區域中,會損毀該圖層的 X-Y 座標。
  • 使用多個遮色片時,若刪除第一個遮色片,會產生遮色片反轉/減去的現象。
  • 數字未正確在地化。數字中的逗點顯示為點/句點。
  • 轉存模組工具的資產會導致錯誤。

提示和秘訣

  • 您可以快速變更使用區域的背景顏色。在工作區域外/使用區域中的其他內容上按一下右鍵,然後選取顏色。
要變更背景顏色的 Photoshop 環境選單
變更使用區域的背景顏色

  • 使用下列鍵盤快速鍵,在標準 Photoshop 介面與「設計空間」(預視) 之間進行切換:
    • Cmd+Ctrl+` (Mac)
    • Alt+Ctrl+` (Windows)
  • 按兩下「圖層」面板中的圖層名稱,將其重新命名。
  • 按兩下畫布,向下切入至您的圖層階層。按 Esc 退出您選取的圖層,並取消選取頂層的圖層。
  • 按兩下畫布上的單一圖層 (「文字」或「向量」),可讓您進入「編輯」模式。按 Esc 可退出「編輯」模式。
  • 使用中的圖層/群組周圍會有藍色亮部。
  • 按一下文件中選定工作區域旁的 + 圖示可新增工作區域。
  • 向量和像素圖層會顯示用來重新調整大小和旋轉的變形控制點,而文字圖層則不會顯示控制點。

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

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