2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Figma で透過 PNG にカラーオーバーレイをかけるには

Last updated at Posted at 2019-12-09

例えばこんな透過 PNG のロゴがあったとして

Frame 13.png

暗い背景に置きたい場合、

Frame 13 (1).png

ロゴを単色にして配置したかったりします。

Photoshop ではレイヤーパネルからカラーオーバーレイを使って任意の単色にすることができますが、 Figma にはそういった機能は見当たりません。そんな時はマスクを使うと目的の操作ができます。

image 24.png

通常は画像の下にマスクしたい領域を配置するのですが、この場合は逆で、画像の上に塗りつぶしたい色の矩形を配置します。それぞれレイヤーを選択した上で、[control + M]か、

Mask Group.png

中央上に表示されるマスクボタンを押下しましょう。

すると、

Frame 13 (2).png

目的の色に塗りつぶされました。

(ロゴを塗りつぶす際はレギュレーションをキチンと確認し、問題ないかクライアントの確認を取った上で対応しましょう)

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?