fbpx
Bluehost 主機最新優惠

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

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

傳統 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) 會影響原始圖片嗎?

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

參考資料和引用文獻:

學員人數:5,500+ 人(持續增加之中)

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

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術