fbpx
黑色星期五 (Black Friday) 優惠開始

什麼是 WordPress 雙色調濾鏡 (Duotone Filter) 功能?指定兩種色彩圖片風格

WordPress 5.8 版本 釋出了一個針對 「圖片」和「影片」色彩混合的新功能,就是借助 CSS 達成的雙色調濾鏡 (Duotone Filter) 效果,可能對部分新手會感到十分好奇,但其實在平面和網站設計界是非常通用和常見的技法。這次和 Adobe Photoshop 的多色混合作比較測試,即使勝負很明顯,但也樂見網站的技術發展一日千里。

Youtube 教學影片:

影片長度:5 分鐘
語言:國語
字幕:繁體中文

傳統 Adobe Photoshop 技巧普及化

傳統 Adobe Photoshop 技巧普及化
傳統 Adobe Photoshop 技巧普及化

使用雙色調並不是十麼新鮮的事情,最早可以追溯到 60 年代,傳統的單色印刷或之後隨著數碼技術日漸流行,因為生產成本關係,使用愈少色彩愈省錢,也不需要太多技術,是早期各類工業和印刷行業的常見技法。隨著 Adobe Photoshop 慢慢普及,能夠製作雙色調的方法有高達十多種,每位設計師和印刷師傅都有自己喜愛的一套方式,能達到「目的」即可,在黑白攝影和各類藝術也非常容易看到它的蹤影。

選取圖片後出現新屬性「雙色調濾鏡」

選取圖片後出現新屬性「雙色調濾鏡」
選取圖片後出現新屬性「雙色調濾鏡」

使用雙色調濾鏡為圖片及 [封面] 區塊上色!雙色調可以為網站設計增添流行色彩,並為圖片 (或 [封面] 區塊中的影片) 進行風格化,以便與網站目前使用的佈景主題進行密切的整合。以黑白濾鏡為例,雙色調效果會將陰影部分取代為黑色、亮部取代為白色,而使用者可以自訂雙色調的專屬陰影及亮部色彩。

步驟一:

在「新增圖片」後,點擊圖片在功能列表會出現一個「色環 icon」。

步驟二:

如果不善於色彩配塔,可以使用預設的「雙色調」預制方案,兩種色彩顯示在圓形的上下方。

自訂義「陰影色」和「亮部色」

自訂義「陰影色」和「亮部色」
自訂義「陰影色」和「亮部色」

步驟一:

選擇「自訂色彩」會展開專屬的設定色盤面板。

步驟二:

如果你有公司的 Logo 和專屬配色,請填上以統一色調。

步驟三:

如果不喜歡 (十六進位) 色彩值,可以選取其他像 RGB 色調。

步驟四:

在色盤面板選取和控制拉杆,去決定最終色彩。

雙色調濾鏡 (Duotone Filter) 基礎原理

雙色調濾鏡 (Duotone Filter) 基礎原理
雙色調濾鏡 (Duotone Filter) 基礎原理

其實 WordPress 近來新推出的功能,介面都非常直觀易用,大量圖像化的元素,新手應該很難「卡關」才對?不過如果沒有美術底子和對色彩不敏感,可能會出現「選擇困難症」的情況。

步驟一:

滑鼠左鍵雙擊兩種色彩,可以「直接編輯」色碼。

步驟二:

選取預設的「陰影色調」或選擇「自訂色彩」。

步驟三:

選取預設的「亮部色調」或選擇「自訂色彩」。

雙色調濾鏡有待改善之處

 雙色調濾鏡有待改善之處
雙色調濾鏡有待改善之處

由於雙色調濾鏡的限制,建議選取一些構圖簡單和對比明確的圖片,可以在只有兩種色彩的情況下發揮不錯的本領。但總知還是建議站長多作嚐試,找出自己最合適的方式。

步驟一:

以 WordPress 的情況,比較推薦亮部色選擇為「白色」比較容易得出滿意的效果。

步驟二:

由於 CSS 只能從兩種色彩模擬,過度色無法調整比重,略顯生硬和不和諧。

黑白雙色線條藝術效果最良好

黑白雙色線條藝術效果最良好
黑白雙色線條藝術效果最良好

經過大量的測試,在愈多種色彩的環境下,CSS 很困難去判斷如何最佳化顯示,往往效果不如預期,反之如果圖片和影片的色彩愈少,像「黑白」或「雙色」圖片,效果出奇地不錯。新手也較容易控制最終呈現的成果,大家可以善用 Google 或其他 免費可商用圖庫 去找出合法使用的 CC0 素材加以調整,祝願大家能好好享受這個好玩的功能 ^___<

常見問題 FAQ

雙色調濾鏡 (Duotone Filter) 可以取代 Adobe Photoshop 嗎?

不可以,暫時功能和能夠設定的選項不多,不竟是由 CSS 模擬出來的效果。

雙色調濾鏡 (Duotone Filter) 會影響原始圖片嗎?

如果是透過「區塊編輯器」來套用雙色調,並不會破壞原始圖片的質量,這技巧類似套上一層包含不同色彩的外衣。

參考資料和引用文獻:

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:7,800+ 人 (持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言