兩步學會用 Sketch 製作可以改變顏色和複寫內容的文字 symbol

大周末本來要去射箭的，可是颱風??????又來啦，出不了門，只好在家玩 Sketch ??????。

閱讀信息：

• 閱讀時間：3m 10s
• 流量預估：2.2MB
• 操作時間：8m
• 軟體版本：v46.1

相關下載：

• 軟體下載：[Sketch 官方試用下載]
• 教學材料：[百度網盤 - 教學材料]

效果預覽：

第一步，準備 symbol：

創建五個尺寸為「10 x 10」的不同顏色的 symbol。

創建一個尺寸任意的文字 symbol，取名為「?Content」。

在文字圖層上插入顏色 symbol，並拖拉覆蓋，取名為「?Color」。

這時候可以右鍵單擊選擇「Conver to Outlines」，然後再點擊「Mask」實現文字變色。但是，這樣操作會導致文字 symbol 在實際使用時無法複寫。筆者在下一步介紹可以複寫文字的方式。

第二步，更改混合方式：

在 symbol page，找到文字 symbol，設置背景顏色為純白，並如上圖勾選選項。

在文字 symbol 中的「?Content」，設置文字顏色為純黑。

最重要的一步，更改文字 symbol 中的「?Color」的「Blending」為「Screen」。這種混合模式中文叫做「濾色」，圖層合成後，會保留高灰階的顏色而隱去低灰階的顏色。

到這一步就做完了，我們來實際使用下「會變色的文字 symbol」。

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流，請註明知乎 ID，希望大家能帶著問題或意見來找我。

如果覺得教程具有可操作性，不妨抽出一盤王者榮耀的時間跟著做一遍，一定能學會的。??????

擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch
• Sketch 技巧：24種樣式的「開關」symbol
• Graffle 教程：繪製流程圖 | 搭建文檔

最後，多謝大家的時間，祝大家在颱風天也能點到暖和的外賣

推薦閱讀：