WordPress 5.8 版本 釋出了一個針對 「圖片」和「影片」色彩混合的新功能,就是借助 CSS 達成的雙色調濾鏡 (Duotone Filter) 效果,可能對部分新手會感到十分好奇,但其實在平面和網站設計界是非常通用和常見的技法。這次和 Adobe Photoshop 的多色混合作比較測試,即使勝負很明顯,但也樂見網站的技術發展一日千里。
✅ 溫馨提醒和注意:
下方介紹的功能和服務,並不受限於 WordPress 佈景主題 和 WordPress 外掛,可以獨立運作。
Youtube 教學影片:
影片長度: | 5 分鐘 |
語言: | 國語 |
字幕: | 繁體中文 |
傳統 Adobe Photoshop 技巧普及化
使用雙色調並不是十麼新鮮的事情,最早可以追溯到 60 年代,傳統的單色印刷或之後隨著數碼技術日漸流行,因為生產成本關係,使用愈少色彩愈省錢,也不需要太多技術,是早期各類工業和印刷行業的常見技法。隨著 Adobe Photoshop 慢慢普及,能夠製作雙色調的方法有高達十多種,每位設計師和印刷師傅都有自己喜愛的一套方式,能達到「目的」即可,在黑白攝影和各類藝術也非常容易看到它的蹤影。
選取圖片後出現新屬性「雙色調濾鏡」
使用雙色調濾鏡為圖片及 [封面] 區塊上色!雙色調可以為網站設計增添流行色彩,並為圖片 (或 [封面] 區塊中的影片) 進行風格化,以便與網站目前使用的佈景主題進行密切的整合。以黑白濾鏡為例,雙色調效果會將陰影部分取代為黑色、亮部取代為白色,而使用者可以自訂雙色調的專屬陰影及亮部色彩。
步驟一:
步驟二:
自訂義「陰影色」和「亮部色」
步驟一:
步驟二:
步驟三:
步驟四:
雙色調濾鏡 (Duotone Filter) 基礎原理
其實 WordPress 近來新推出的功能,介面都非常直觀易用,大量圖像化的元素,新手應該很難「卡關」才對?不過如果沒有美術底子和對色彩不敏感,可能會出現「選擇困難症」的情況。
步驟一:
步驟二:
步驟三:
雙色調濾鏡有待改善之處
由於雙色調濾鏡的限制,建議選取一些構圖簡單和對比明確的圖片,可以在只有兩種色彩的情況下發揮不錯的本領。但總知還是建議站長多作嚐試,找出自己最合適的方式。
步驟一:
步驟二:
黑白雙色線條藝術效果最良好
經過大量的測試,在愈多種色彩的環境下,CSS 很困難去判斷如何最佳化顯示,往往效果不如預期,反之如果圖片和影片的色彩愈少,像「黑白」或「雙色」圖片,效果出奇地不錯。新手也較容易控制最終呈現的成果,大家可以善用 Google 或其他 免費可商用圖庫 去找出合法使用的 CC0 素材加以調整,祝願大家能好好享受這個好玩的功能 ^___<
常見問題 FAQ
雙色調濾鏡 (Duotone Filter) 可以取代 Adobe Photoshop 嗎?
不可以,暫時功能和能夠設定的選項不多,不竟是由 CSS 模擬出來的效果。
雙色調濾鏡 (Duotone Filter) 會影響原始圖片嗎?
如果是透過「區塊編輯器」來套用雙色調,並不會破壞原始圖片的質量,這技巧類似套上一層包含不同色彩的外衣。
參考資料和引用文獻:
- WordPress 官方更新:Version 5.8
- WordPress 5.8 Development Cycle
- Pressable:WordPress 5.8: The New WordPress Update and Why It’s Awesome
- GitHub:Add duotone block supports #26752
- Kinst:What’s New in WordPress 5.8 (Full Site Editing, WebP Images, Global Styles and Settings, and Much More)
- WPFloor:How to Color Images with Duotone Filters in WordPress
- WPBeginner:What’s New in WordPress 5.8 (Features and Screenshots)
- CodeinWP:New Jetpack, Duotone Filters Are Coming, WordPress’ 18th Birthday!
- 網站迷谷:如何寫一篇文章?
- 圖片來源:網站迷谷免費圖庫介紹
- 圖片來源:Adobe 免費和免安裝去背景軟體,不限使用次數和零技術要求
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
學員人數:9,200+ 人 (持續增加之中)