最新消息:智慧動畫 — 為您的原型帶來動態效果。 深入瞭解

略過導覽

遮罩形狀

最後更新日期:2023 年 9 月 1 日
閱讀時間:4 分鐘

遮罩是形狀圖層,您可以使用它來隱藏或顯示其他形狀的某些部分。

建立遮罩的方法有很多種,但它們都遵循相同的規則:我們將使用圖層列表中最底部的形狀作為遮罩。Sketch 支援兩種特定類型的遮罩模式:輪廓和 Alpha,您可以使用它們來遮罩影像或形狀圖層。

建立簡單的遮罩

輪廓模式的遮罩只會顯示在其形狀範圍內的一個或多個圖層的部分。您可以將輪廓遮罩模式應用於影像和形狀圖層。

建立輪廓遮罩

觀看課程

在畫布上選取一個形狀,然後選擇「圖層」>「遮罩」>「使用為遮罩」。或者,按住 Control 鍵並點選該形狀,然後選取「使用為遮罩」,或使用 M 快捷鍵。

由於遮罩會影響位於其上方的*所有*圖層,因此我們建議將遮罩圖層與您要遮罩的圖層分組。

如何使用橢圓形狀建立簡單的遮罩

建立遮罩時,您會在遮罩影響的任何圖層或群組旁邊看到一個已遮罩 圖示。圖層列表中的遮罩圖層圖示不會顯示填色。

請記住,除非遮罩已分組,否則遮罩會影響您在其上方建立的任何新圖層或群組。

An image showing the Layer List with a mask layer and the layer that’s affected above it

在圖層列表中,遮罩圖層始終會影響其上方的圖層

要移除圖層上的遮罩,您可以將其關閉。在圖層列表中(或直接在畫布上)選取遮罩圖層,按住 Control 鍵並點擊,然後從關聯選單中選擇使用作為遮罩。您也可以取消勾選選單列中的圖層 > 遮罩 > 使用作為遮罩來關閉遮罩。

雖然在您調整遮罩位置或大小時,讓遮罩帶有填色會很有用,但您之後可以在檢查器中關閉填色。即使沒有可見的填色,遮罩仍然會照常影響其他圖層。

如果您想將圖層放置在遮罩圖層上方,但不希望它們被包含在遮罩中,請選取該圖層並選擇圖層 > 遮罩 > 忽略底層遮罩。您也可以將被遮罩的圖層和遮罩本身群組,這樣群組外的任何內容都不會受到影響。

使用多個選取範圍進行遮罩

如果您選取多個圖層,您可以透過選擇圖層 > 遮罩 > 遮罩選取範圍來一次遮罩所有圖層。這將自動將您選取的最後一個圖層變更為遮罩,並將它們全部群組。

您可以將多個圖層群組,最後一個圖層作為遮罩

如果您想使用特定形狀遮罩影像,則是一個例外。在這種情況下,您可以繪製一個形狀並將其放置在圖層列表中影像的上方,然後選取形狀和影像,並使用圖層 > 遮罩 > 遮罩選取範圍。Sketch 將使用該形狀遮罩影像,並自動建立一個遮罩圖層位於影像下方的群組。

如果影像包含任何 Alpha(透明度)值且是最低圖層,Sketch 將假設您要使用該影像作為遮罩。

您也可以選取多個圖層並按住 Control 鍵點擊以顯示關聯選單中的遮罩選取範圍選項。

在遮罩群組中選取圖層並選擇圖層 > 遮罩 > 忽略底層遮罩將使圖層保留在群組內,但使其不受遮罩影響。

使用影像遮罩

您也可以僅為影像建立遮罩。選取影像(不包含任何 Alpha 透明度),然後從選單列或關聯選單中使用圖層 > 遮罩 > 遮罩影像。這會新增一個遮罩圖層,並將影像與遮罩群組在一起,如果您想快速裁剪影像,這會很方便。

建立 Alpha 遮罩

建立 Alpha 遮罩

觀看課程

Alpha 遮罩會隱藏落在其形狀外部的任何內容,並且還會根據遮罩圖層的不透明度來控制其遮罩的任何圖層的不透明度。

要建立 Alpha 遮罩,請照常建立遮罩,然後選取它並選擇圖層 > 遮罩 > 遮罩模式 > Alpha 遮罩

在檢查器中,確認遮罩圖層的填色具有不透明度/ Alpha 值,或包含 Alpha 的漸層填色。Sketch 將這些值套用到任何被遮罩的圖層。您也可以新增模糊以獲得更平滑的外觀。

如何使用模糊 Alpha 遮罩

Alpha 與輪廓遮罩模式

了解遮罩的最佳方法是試驗輪廓和 Alpha 遮罩,並調整遮罩圖層的樣式設定。

An image comparing outline and alpha masks

輪廓和 Alpha 遮罩的比較

您可以使用任何圖層作為遮罩,包括影像。如果您使用具有透明度的 PNG 影像並將其用作 Alpha 遮罩,則該透明度也將延續到遮罩影響的圖層。