SALUDOBlog

Figmaでグラデーションマスクを使った切り抜き|徐々にファードアウトさせるテクニック

Figmaでグラデーションマスクを使った簡単な切り抜き

Figmaで画像のフェードアウト型の切り抜きを手軽に実現できるTipsです。グラデーションマスクを使った方法を紹介します。

Step01.画像をキャンバスに配置

まず画像レイヤーをキャンバスにドロップします。図形やフレームに画像を入れるのではダメです。

Step02.グラデーションの図形を作成

通常のグラデーションレイヤーを作成します。黒のカラーストップを2つ設置し、一方を0%の不透明度にします。

Step03.グラデーションレイヤーを画像の下に配置

2つのレイヤーを重ね合わせた上で、グラデーションレイヤーを下、画像を上にします。両レイヤーを選択後、右クリックメニューから「マスクとして使用」を選びます。

以上で簡単な切り抜き効果の完成です。

Figmaでグラデーションマスクを使った簡単な切り抜き効果の作成方法をまとめます。

  • 画像レイヤーを直接キャンバスに置く
  • グラデーションレイヤーを生成
  • グラデーションレイヤーを画像の下に配置しマスク化

以上の手順で、フェードアウト型の切り抜きが短時間で実現できます。

画像加工にグラデーションを使った演出はインパクトが大きいです。ぜひこの手軽なテクニックを使いこなしてください。