跳過導覽
學習設計

所有混合模式詳解

一鍵讓您的設計更加精緻

好的設計通常講求流暢的過渡,而混合模式可以幫助您輕鬆實現這一點。事實上,使用混合模式可以讓您的設計更具動感和視覺吸引力。透過嘗試不同的混合模式,您可以創造新的顏色組合和紋理,為您的作品增添深度。

今天,我們將帶您逐步了解如何在 Sketch 中使用混合模式,並分享一些如何在設計中運用它們的見解。

如何在 Sketch 中使用混合模式

您可以將混合模式應用於填色、邊框、陰影和內陰影,並且可以獨立調整它們。例如,您可以將「柔光」混合模式應用於填色,將「乘法」混合模式應用於陰影。您只需點擊檢查器中的混合圖示,然後選擇您偏好的混合模式即可。

這些混合選項都會根據您的選擇影響填色、邊框或陰影的基底顏色。但您無需盲目嘗試!只需將滑鼠懸停在混合選單上的每個項目上,即可輕鬆預覽混合模式的效果。

您可以透過將滑鼠懸停在選單項目上來預覽每個混合模式的效果。

了解混合模式

我們根據主要結果將混合模式分為五類:**加深**、**加亮**、**對比**、**顏色** 和 **比較**。

加深

**加深**類別下的混合模式將幫助您強化設計中的暗色。以下快速瀏覽一下可用的選項:

  • **加深:**保留混合圖層和基底圖層之間最暗的顏色。
  • **乘法:**僅保留混合圖層中較暗的顏色,並降低淺色的不透明度。最終顏色始終較暗,除非是純白色。
  • **顏色加深:**使用混合圖層的顏色加深基底圖層,並增加兩者之間的對比度。與白色混合不會產生任何變化。
  • **正片疊底:**與**加深**類似,但對中間色調的影響更大。

**加深**混合模式非常適合處理陰影或暗色基底圖層。您可以使用它們來創造更逼真、更有層次的陰影效果,或為圖像增添深度和紋理。

Image showing how darker blend modes work in Sketch

加亮

**加亮**類別下的混合模式將幫助您強化設計中的淺色。讓我們來看看這個類別中的混合模式。

  • **加亮:**保留混合圖層和基底圖層之間最亮的顏色。僅當頂層比底層的亮度或明度更亮時,才會加亮。
  • 螢幕 (Screen):僅保留混合圖層的白色和淺色,並降低黑色或深色的不透明度。換句話說,它會將基底顏色和混合顏色的反相值相乘,產生較亮的效果,除非是純黑色。
  • 色彩增強 (Color Dodge):使用混合圖層的顏色來提亮基底圖層,減少兩者之間的對比。與黑色混合不會產生任何變化。
  • 加亮 (Plus Lighter):類似於**變亮 (Lighten)**,但對中間調的影響更強。

**變亮 (Lighter)** 混合模式非常適合營造閃耀效果或增加影像亮度。

Image showing how lighter blend modes work in Sketch

對比 (Contrast)

**對比 (Contrast)** 下的混合模式都是讓基底圖層和混合圖層互相作用。以下是您可以在此區塊中找到的混合模式

  • 疊加 (Overlay):如果基底圖層較暗,則類似於**色彩增值 (Multiply)**;如果基底圖層較亮,則類似於**螢幕 (Screen)**。
  • 強光 (Hard Light):結合**色彩增值 (Multiply)** 和**螢幕 (Screen)**,使用頂層的亮度值進行計算,而疊加則使用基底圖層。
  • 柔光 (Soft Light):類似於疊加,它會根據亮度值套用變暗或變亮效果,但更為細膩,沒有強烈的對比。

**對比 (Contrast)** 混合模式非常適合為影像增加深度和動態感。例如,您可以將它們與高斯模糊結合使用,為人像照片添加柔和的光暈。當然,它們也非常適合在不需透過 色彩調整 (Color Adjust) 設定的情況下增加影像的對比度。

Image showing how contrast blend modes work in Sketch

比較 (Comparative)

**比較 (Comparative)** 下的混合模式基本上會反轉白色或淺色。以下是此區塊中混合模式的快速瀏覽

  • 差異 (Difference):從基底顏色或混合顏色中減去另一個顏色,取決於哪個顏色更亮。當兩個像素相同時,結果將為黑色。
  • 排除 (Exclusion):與**差異 (Difference)** 的行為非常相似,但圖層之間的對比度較低,因為它不會反轉中間調。

**比較 (Comparative)** 混合模式可用於建立細微的圖層效果或反轉顏色。如果您對設計的科學面向感興趣,也可以使用它們來測試顏色之間的差異。

Image showing how comparative blend modes look in Sketch

色彩 (Color)

**色彩 (Color)** 下的混合模式會運用色相、飽和度和亮度,讓您的設計更加生動。以下是此區塊中混合模式的概述

  • 色相 (Hue):使用混合圖層的色相,同時保留基底圖層的飽和度和亮度。
  • 飽和度 (Saturation):使用混合圖層的飽和度級別,但保留基底圖層的色相和亮度。
  • 色彩 (Color):使用混合圖層的色相和飽和度,同時保留基底圖層的亮度。
  • 明度 (Luminosity):使用基底圖層的亮度,同時保留基底圖層的色相和飽和度,產生與**色彩 (Color)** 相反的效果。

**色彩 (Color)** 混合模式非常適合用於照片編輯。例如,您可以使用它為冷色調照片增添暖色,或透過降低飽和度來營造復古風格。

Image showing how color blends appear in Sketch

使用混合模式的最佳實務

好的,我們已經涵蓋了所有技術層面的內容。但是我們如何在設計中實際使用這些混合模式呢?以下是一些範例,展示如何有效利用每種混合模式類型 — 但歡迎您隨意嘗試其他選項!

Image showing how to use darker blend modes to work with shadows in Sketch

**色彩增值 (Multiply)** 將刺青無縫地融入背部的陰影中。

Image showing how to use lighter blend modes to illuminate  images.

**加亮 (Plus Lighter)** 讓燈看起來像打開的樣子,我們透過加入 高斯模糊 (Gaussian Blur) 讓它看起來更精緻。

Image showing how to use an overly blend mode in Sketch to change texture

**疊加 (Overlay)** 可以輕鬆地改變任何影像的整體紋理。

Image showing how to use color blend modes in Sketch to change the color of an object in an image

您可以像使用色調一樣使用色相。它可以改變任何顏色,同時保留其底層紋理。

Image showing how to use comparative blend mode to flip the colors in an x-ray in Sketch

使用比較切換您的圖像,將亮色變為暗色,將暗色變為亮色。

就是這樣!我們希望這能讓您更好地了解如何使用混合模式並釋放您的創造力。使用混合模式創造出令人驚嘆的作品了嗎?使用#MadeWithSketch 在社群媒體上與我們分享。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來看看有什麼新功能,我們都能讓您在幾分鐘內設置好並準備好做您最擅長的工作。

免費開始使用
免費開始使用