Week 32 — Adobe Xd筆記 | 如何一個動作(Blend Mode)把彩色設計稿變成黑白稿

Max 麥克斯
Sep 5, 2021

--

在執行一個新專案時,我習慣先大致了解需求和功能後,然後在紙上畫出這些功能的粗略架構和草圖,再開啟Adobe Xd軟體,將紙上的草圖畫出來,接著在會議上確認這些功能的草圖和流程是否有符合需求、或是我對需求的理解是否有誤

而既然是「草圖」了,所以對距離、顏色、外觀都不會在意,不會畫太多時間在設計上,這階段代表是在確認需求階段,修改幅度可以很大,甚至整個打掉都沒關係,所以確認需求的草圖階段,我一律會用「黑白稿」來確認,因為一旦有了「顏色」,焦點會被顏色干擾,大家的注意力會飄散,也可能導致放錯重點在討論

而如果是使用一樣的UI元件,我就會從之前已彙整好的UI元件檔案去做複製,但貼上後,要再一一將每個物件改成黑白的灰階上,還真的是挺麻煩的,如下圖的操作↓

後來有次同事跟我說,Adobe Xd有一個很好用的功能「Blend Mode(混合模式)」,它其實是從Adobe Photoshop軟體來的功能,主要是針對影像的色彩去做變化

詳細Blend Mode混合模式說明可參考Adobe Photoshop官方的混合模式說明

而在Adobe Xd中,Blend Mode裡面的【Luminosity】就可以很輕鬆的直接把彩色設計稿變成黑白稿,雖說它本來的用途並不是這樣用(淺談Luminosity Mask),也不是正規的做法,但目前Adobe Xd好像是沒有一鍵按下就可以直接將圖片或物件變黑白灰階的功能,所以對我個人來說,這個功能就可以當代替用,比自己一個一個去改物件的顏色方便多了!

底下為操作步驟 ↓

1.先選取要變成灰階色彩的物件,再按右邊的「Blend Mode的下拉選單」

2.在Blend Mode的下拉選單中,選擇「Luminosity」

3.選擇Luminosity模式後,即完成囉!

即使是有用漸層、半透明、或是霧面毛玻璃效果一鍵輕鬆做到唷!

--

--

Max 麥克斯

UI設計師 | 相信閱讀 | 喜歡有溫度的文字 | 致力於介面設計 | 記錄自學設計的一隅