匯入 Adobe Photoshop 檔案

將 Adobe Photoshop 檔案匯入 Microsoft Expression Blend 專案後,您就可以將靜態圖案轉換成視覺效果令人驚豔的互動式體驗。

瞭解 [匯入 Adobe Photoshop 檔案] 對話方塊所提供的圖層選項,將可協助您更快、更有效率地將 Photoshop 檔案整合到 Expression Blend 專案中。

如需圖層選項及支援功能的詳細資訊,請參閱<相容性影像>、<圖層選項與工具>和<Photoshop 功能支援>等章節。

匯入 Photoshop 檔案

  1. 在 [檔案] 功能表中,按一下 [匯入 Adobe Photoshop 檔案]。

  2. 在 [匯入 Adobe Photoshop 檔案] 對話方塊中,瀏覽至要匯入的檔案,並按一下 [開啟]。。

    [匯入 Adobe Photoshop 檔案] 對話方塊的左側會顯示 PDF 檔案的預覽。右側則是檔案中個別圖層與各圖層重要資訊的清單,以及相容性影像。

    匯入 Adobe Photoshop 檔案對話方塊

  3. 在 [匯入 Adobe Photoshop 檔案] 對話方塊中,執行下列動作:

    • 選取要匯入的圖層。或者,您也可以選取 [相容性影像] 來匯入單一合併的影像。

      如需相容性影像的詳細資訊,請參閱<相容性影像>一節。

    • 如果圖層旁邊出現 [資訊] 圖示 資訊圖示,請將指標停留在 [資訊] 圖示 資訊圖示 上方以檢閱資訊,然後再執行下列其中一項動作:

      • 如果您要將圖層匯入成可編輯的內容,請不要合併圖層或將其平面化。[將圖層匯入為] 底下預設選取的選項是 [可編輯的內容]。

        important note重要訊息:

        如果您將圖層匯入成可編輯的內容,圖層在 Photoshop 與 Expression Blend 中顯示的外觀可能會有視覺上的差異。如需詳細資訊,請參閱<資訊圖示>一節中的<可編輯的內容>。

        Note注意:

        由於 Windows Phone 中某些功能的支援受限,因此當您將 PSD 檔案匯入到 Windows Phone 專案時,部分圖層選項會預設為 [平面化點陣圖]。

      • 如果您要保留圖層的外觀,請合併圖層或將其平面化。

        選取您要合併的圖層,按一下滑鼠右鍵,然後再選取 [要合併的群組],以合併圖層。

        在 [將圖層匯入為] 底下,選取 [平面化點陣圖],將圖層平面化。

        important note重要訊息:

        合併或平面化的圖層將會匯入成單一點陣化影像。合併或平面化的圖層不能在 Expression Blend 中編輯。如需詳細資訊,請參閱<資訊圖示>一節中的<平面化點陣圖>和<合併圖層>。

    • 檢視左面板中的影像預覽,確認影像是否顯示成您想要的外觀。

  4. 按一下 [確定]。

與所匯入之檔案同名的新 *Canvas* 物件將新增至文件中。在 [物件與時間軸] 面板中, Canvas 物件 (在此範例中的名稱為 Photoshop_Layout ) 底下將包含匯入成物件的所有圖層。如果尚未指定資料夾,[專案] 面板的根資料夾中將會建立一個新的資料夾 (在此範例中的名稱是 Photoshop_Layout_Images ),以包含所有相關的 PNG 檔案。

匯入 Adobe Photoshop 檔案專案面板

相容性影像

相容性影像是原始 PSD 檔案中所有可見圖層的快照。在 Photoshop 中,每當您在選取 [最大化相容性] 選項的情況下儲存 PSD 檔案時,系統都會建立相容性影像。儲存的 PSD 檔案中都會自動產生、儲存及參照包含所有可見圖層的平面化影像檔案。

您可以選取 [相容性影像],快速輕鬆地將 PSD 檔案匯入成單一合併的影像。這個選項特別適用於下列情況:您不需要可編輯的圖層,而且可以使用單一平面化點陣圖作為在 Expression Blend 中作業的基礎。

若要預覽相容性圖層,請將指標停留在右面板中的相容性圖層縮圖上。

匯入相容性影像

  • 在 [匯入 Adobe Photoshop 檔案] 對話方塊中,選取 [相容性影像] 核取方塊。按一下 [確定]。
Note注意:

當您匯入相容性圖層時,其他圖層都不會匯入。

圖層選項與工具

Expression Blend 會保留圖層名稱,並將圖層匯入成個別物件與版面配置容器以方便使用。匯入 Photoshop 檔案時,您可檢視圖層、重新命名圖層,以及選取要匯入的圖層。

選擇圖層

您可透過選取或清除顯示在每個圖層左邊的核取方塊,選擇您要匯入的圖層。

如果您要匯入所有圖層,請選取面板頂端的 [核取要匯入的所有圖層] 核取方塊。

若要取消選取所有圖層,請清除 [核取要匯入的所有圖層] 核取方塊。

您可以在右面板中選取或清除各個圖層的核取方塊,以便匯入一或多個個別圖層。

當您變更選擇的圖層時,左面板中的預覽也會更新。

圖層名稱

Photoshop 圖層名稱將會保留,而且會顯示在每個圖層縮圖的右邊。您可以變更圖層名稱,變更方法是在圖層上按一下滑鼠右鍵並按一下 [重新命名],或是按兩下圖層名稱,然後直接在圖層名稱欄位中輸入名稱。

縮圖

您可以將指標停留在右面板的圖層縮圖上,以顯示放大版的 Photoshop 圖層。

匯入 Adobe Photoshop 檔案縮圖預覽

圖層結構和群組

您在 Photoshop 中建立的圖層結構和群組將會保留。群組可由 [展開] Hh134795.6375953d-074c-421a-bbb3-6f5055b67b64(zh-tw,Expression.40).png 和 [摺疊] 摺疊 箭號輕鬆識別。若要檢視圖層結構,請按一下 [展開]。若要摺疊群組,請按一下 [摺疊]。

圖層類型

每個圖層都包含一個類型圖示,用來識別該圖層是下列其中一種類型:影像、向量或文字。當您將指標停留在類型圖示上時,圖層類型便會顯示。

匯入 Adobe Photoshop 檔案影像圖層

文字和向量物件可以匯入成可編輯的內容或平面化點陣圖。您可以按一下圖層,然後在 [將圖層匯入為] 底下,按一下 [可編輯的內容] 或 [平面化點陣圖],以變更文字和向量物件的匯入選項。

如需將物件匯入成可編輯內容的詳細資訊,請參閱<資訊圖示>一節中的<可編輯的內容>。

如需將物件匯入成平面化點陣圖的詳細資訊,請參閱<資訊圖示>一節中的<平面化點陣圖>。

Note注意:

當您選取的圖層包含能夠匯入成可編輯內容或平面化點陣圖的內容時,相容性影像下方便會出現匯入選項。

影像圖層也可以匯入成可編輯的內容或平面化點陣圖。

例如,影像圖層可能具有不透明度遮罩、向量遮罩和陰影圖層樣式。當您將這個圖層以可編輯內容的形式匯入到 Expression Blend 時,專案中將會新增下列內容:

  • PNG 格式的影像檔案

  • PNG 格式的不透明度遮罩

  • 向量遮罩的 Clip 屬性

  • 陰影圖層樣式的 DropShadowEffect

如果影像圖層是匯入成平面化點陣圖,則會從圖層建立單一點陣化影像,並將產生的 PNG 匯入到 Expression Blend 中。

資訊圖示

如果出現 [資訊] 圖示 資訊圖示,請將指標停留在圖示上,以顯示更多資訊。此工具提示提供額外資訊,說明 PSD 檔案中使用但 Expression Blend 不支援的功能。

匯入 Adobe Photoshop 檔案 InformationTooltip

Note注意:

如果群組包含的圖層中有 Expression Blend 不支援的功能,[資訊] 圖示將會出現在該群組的容器圖層中。如需詳細資訊,請展開群組清單,檢視顯示 [資訊] 圖示的個別圖層。

可編輯的內容

如果您將圖層匯入成可編輯的內容,圖層在 Photoshop 與 Expression Blend 中顯示的外觀可能會有視覺上的差異。您可透過修改物件屬性的方式,修改這些內容在 Expression Blend 中的外觀。

下表說明可在 Expression Blend 中編輯的 Photoshop 元素。請使用 [描述] 欄找出物件的屬性,以便在 Expression Blend 中修改這些屬性。

Photoshop 元素

Expression Blend 元素 (XAML)

描述

文字圖層

TextBlock

Photoshop 文字圖層會匯入成 TextBlockHh134795.343296b4-5c7d-4145-84cc-91b08ba67a1b(zh-tw,Expression.40).png,而其原始 Photoshop Text 屬性對應於 Expression Blend 的 Text 屬性。 Text 屬性位於 [屬性] 面板的 [文字] 類別中。

Note注意:
如需在 WPF 和 Silverlight 專案中使用 TextBlock 物件的詳細資訊,請參閱將物件新增至文字流向

圖形圖層

Path

Photoshop 圖形圖層會匯入成 Path ,而其原始向量遮罩屬性對應於 Expression Blend 的 Data 屬性。 Data 屬性位於 [屬性] 面板中 [外觀] 類別的 [資料] 欄位。

單色填滿

Path

Photoshop 單色填滿會匯入成 Path ,而其原始 Fill 屬性對應於套用至 Solid color brush (單色筆刷) Hh134795.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-tw,Expression.40).png 屬性的 Expression Blend ColorOpacityMask 屬性。 Solid color brush 屬性位於 [屬性] 面板的 [筆刷] 類別中。

線性漸層填滿

Path

Photoshop 線性漸層填滿會匯入成 Path ,而其原始 Fill 屬性對應於套用至 [漸層筆刷] Hh134795.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(zh-tw,Expression.40).png 的 Expression Blend [線性漸層] Hh134795.bd5eefed-9628-4363-be5d-29bfb5962175(zh-tw,Expression.40).png 筆刷屬性。[線性漸層] 筆刷屬性位於 [屬性] 面板的 [筆刷] 類別中。

放射漸層填滿

Path

Photoshop 放射漸層填滿會匯入成 Path ,而其原始 Fill 屬性對應於套用至 [漸層筆刷] Hh134795.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(zh-tw,Expression.40).png 的 Expression Blend [放射漸層] Hh134795.4279aa9a-15c2-4435-9937-6848afc38618(zh-tw,Expression.40).png 筆刷屬性。[放射漸層] 筆刷屬性位於 [屬性] 面板的 [筆刷] 類別中。

圖樣填滿或不支援的漸層填滿 (菱形、角度、反射)

Path

Photoshop 圖樣填滿或不支援的漸層填滿會匯入成 Path ,而其原始 Fill 屬性對應於套用至 [ImageBrush] 的 Expression Blend Fill 屬性。[ImageBrush] 屬性位於 [屬性] 面板的 [筆刷] 類別中。

群組

Canvas

Photoshop 群組會匯入成 CanvasHh134795.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(zh-tw,Expression.40).png,而其個別圖層則會匯入成該 Canvas 的子項。

影像圖層

Image

Photoshop 圖層會匯入成 Image 物件。此外,專案中也會新增一個 PNG 檔案。這個 PNG 檔案是 Image 物件的來源。每個圖層都會匯入成具有對應 PNG 檔案的 Image 物件。

陰影圖層樣式

DropShadowEffect

當您匯入陰影圖層樣式時,匯入的物件將會套用 DropShadowEffect 。您可以在 [物件與時間軸] 面板中選取套用的 [DropShadowEffect],並直接在 [屬性] 面板中編輯屬性,以編輯陰影圖層效果。

Note注意:
Windows Phone 專案不支援 DropShadowEffect

圖層遮罩

套用至 ImageBrushOpacityMask

Photoshop 圖層遮罩會匯入成套用至 ImageBrushOpacityMask 。[OpacityMask] 屬性位於 [屬性] 面板的 [筆刷] 類別中。此外,專案中也會新增一個 PNG 檔案。這個 PNG 檔案是 ImageBrush 的來源。

Note注意:
Windows Phone 專案可支援圖層遮罩,但建議您不要使用。

影像或文字圖層上的向量遮罩

ImageTextBlockClip 屬性

影像或文字圖層上的 Photoshop 向量遮罩會匯入成套用至 ImageTextBlockClip 屬性。[Clip] 屬性位於 [屬性] 面板的 [雜項] 類別中。

Note注意:
Clip 屬性在 Windows Phone 專案中只有有限的支援。

將圖層匯入為可編輯的內容

  • 如果您要將圖層匯入成可編輯的內容,請不要合併圖層或將其平面化。[將圖層匯入為] 底下預設選取的選項是 [可編輯的內容]。

    Note注意:

    由於 Windows Phone 中某些功能的支援受限,因此當您操作 Windows Phone 專案時,部分圖層選項會在匯入時預設為 [平面化點陣圖]。

平面化點陣圖

將圖層匯入成平面化點陣圖時,系統會建立該圖層的點陣化影像 (PNG 格式)。將點陣圖平面化後,與該圖層相關的所有圖層樣式全都會點陣化。產生的 PNG 檔案會被當作 Image 物件的來源。

將圖層匯入為平面化點陣圖

  • 選取您要匯入成平面化點陣圖的圖層,然後在 [匯入 Adobe Photoshop 檔案] 對話方塊最下面的 [將圖層匯入為] 底下,選取 [平面化點陣圖]。

合併圖層

匯入兩個以上的合併圖層時,系統會建立 PNG 格式的單一點陣化影像。產生的 PNG 檔案會被當作 Image 物件的來源。

合併圖層

  • 按住 CTRL 鍵,然後按一下建議的圖層,以選取這些圖層。以滑鼠右鍵按一下選取項目,然後按一下 [要合併的群組]。
Note注意:

您可以選取合併的圖層,然後按一下 [取消群組圖層],以復原合併動作。

圖層樣式

如果圖層已經套用圖層樣式,圖層旁邊便會出現 [圖層效果] 圖示 效果圖示。您可以選取 [平面化點陣圖] 匯入選項,或是將圖層與其他圖層合併,以匯入圖層樣式。

如需平面化或合併圖層的詳細資訊,請參閱<資訊圖示>一節。

匯入 Adobe Photoshop 檔案圖層效果

tip note秘訣:

將指標停留在 [資訊] 圖示 資訊圖示 上方,即可顯示如何匯入圖層樣式的相關指引。

遮罩

圖層及向量遮罩在關聯的圖層中是顯示成個別縮圖。當您選取關聯的圖層時,圖層與向量兩種遮罩都會匯入。

圖層遮罩會匯入成不透明度遮罩,並放置在 [屬性] 面板的 [筆刷] 類別中。

向量遮罩則會匯入成路徑,或是以裁剪路徑的形式套用到已匯入的物件。例如,包含向量遮罩的單色填滿會匯入成使用遮罩幾何與填滿效果的向量物件。具有向量遮罩的影像則會匯入成包含使用向量遮罩幾何之裁剪遮罩的影像物件。

匯入 Adobe Photoshop 檔案向量遮罩

如需匯入圖層及向量遮罩的詳細資訊,請參閱<資訊圖示>一節中的<可編輯的內容>。

如果圖層已經套用裁剪遮罩,圖層旁邊便會出現 [裁剪遮罩] 圖示。您可透過下列方式來匯入裁剪遮罩:選取所有裁剪遮罩圖層及其指向的目標圖層,然後再合併這些圖層。

匯入 Adobe Photoshop 檔案裁剪遮罩

如需合併圖層的詳細資訊,請參閱<資訊圖示>一節。

將指標停留在 [資訊] 圖示 資訊圖示 上方,即可顯示如何匯入裁剪遮罩的相關指引。

Expression Blend 中的 Photoshop 功能支援

Expression Blend 可支援下列 Photoshop 功能。特別標示之處代表可以在 Expression Blend 中編輯功能。

文字樣式

Photoshop 文字樣式對應於 Expression Blend 中已套用到 TextBoxText 屬性。

下列文字樣式會從 Photoshop 匯入,而且可在 Expression Blend 中編輯:

  • FontFamily

  • FontSize

  • Foreground

  • Underline

  • Subscript (僅限 WPF)

  • Superscript (僅限 WPF)

  • StrikeThrough (僅限 WPF)

  • FauxBold

  • FauxItalic

  • Text

  • AllCaps

  • Left Align Text

  • Center Text

  • Right Align Text

  • AuthoHyphenate (僅限 WPF)

  • RenderTransform (僅限縮放)

如需 Expression Blend 中可編輯之內容的詳細資訊,請參閱<資訊圖示>一節中的<可編輯的內容>。

混合模式

若要維持混合模式的外觀與風格,請合併相關圖層。合併相關圖層之後,混合設定便會套用到針對該群組匯入的點陣化影像。

如需合併圖層的詳細資訊,請參閱本文前面<資訊圖示>一節中的<合併圖層>。

調整圖層

下列調整圖層會從 Photoshop 匯入:

  • 亮度/對比

  • 黑白

  • 色版混合器

  • 色彩平衡

  • 曲線

  • 曝光

  • 反轉

  • 色階

  • 色調分離

  • 相片濾鏡

  • 臨界值

  • 漸層對應

  • 色調/飽和度

  • 可選取的色彩

  • 振動

若要維持支援之調整圖層的外觀與風格,請合併相關圖層。合併相關圖層之後,調整圖層便會套用到針對該群組匯入的點陣化影像。

tip note秘訣:

您可以將指標停留在縮圖上,以顯示已套用調整圖層的放大版原始影像。您可以預覽影像匯入 Expression Blend 後的外觀,方法是選取或取消選取已套用相關調整圖層的圖層,然後在 [匯入 Adobe Photoshop 檔案] 對話方塊中檢視影像。

如需合併圖層的詳細資訊,請參閱本文前面<資訊圖示>一節中的<合併圖層>。

圖層樣式

Expression Blend 可支援匯入及編輯陰影圖層樣式。

當您匯入陰影圖層樣式時,匯入的物件將會套用 DropShadowEffect 。您可以在 [物件與時間軸] 面板中選取套用的 [DropShadowEffect],並直接在 [屬性] 面板中編輯屬性,以編輯陰影圖層效果。

Note注意:

將陰影圖層樣式匯入成可編輯的內容時,呈現的結果可能與 Photoshop 中的視覺顯示效果不符。當您平面化或合併陰影圖層樣式時,呈現的結果將會符合 Photoshop 中的視覺顯示效果,但已經不能編輯。

如需 Expression Blend 中陰影圖層樣式的詳細資訊,請參閱本文件前面<資訊圖示>一節中的<可編輯的內容>。

若要維持受支援但無法編輯之圖層樣式的外觀與風格,請合併相關圖層。合併相關圖層之後,圖層樣式便會套用到針對該群組匯入的點陣化影像。

Expression Blend 可支援下列圖層樣式,但無法對其進行編輯:

  • 內陰影

  • 外光暈

  • 內光暈

  • 斜角和浮雕

  • 緞面

  • 顏色覆蓋

  • 漸層覆蓋

如需合併圖層的詳細資訊,請參閱本文前面<資訊圖示>一節中的<合併圖層>。

下列圖層樣式不受支援:

  • 圖樣覆蓋

  • 筆觸

漸層

Expression Blend 可支援匯入及編輯線性與放射漸層效果。其他所有漸層類型都會在匯入時進行點陣化,而且無法在 Expression Blend 中編輯。色彩停駐點在 Expression Blend 中將匯入成結果物件之 *Fill* 屬性的漸層筆刷,而不透明度停駐點將匯入成 *OpacityMask* 屬性的漸層筆刷。

Note注意:

將線性或放射漸層匯入成可編輯的內容時,呈現的結果可能與 Photoshop 中的視覺顯示效果不符。當您平面化或合併線性或放射漸層時,呈現的結果將會符合 Photoshop 中的視覺顯示效果,但已經不能編輯。

圖樣

圖樣會匯入成 Path ,而其原始 Fill 屬性對應於套用至 ImageBrush 的 Expression Blend Fill 屬性。

如需圖樣的詳細資訊,請參閱<資訊圖示>一節中的<可編輯的內容>。

另請參閱

概念

插入影像與圖案
匯入 Adobe Photoshop 檔案

其他資源

繪製物件

Copyright © 2011 by Microsoft Corporation. All rights reserved.