みなさんこんにちは！
今回は、写真がふわっとグラデーション状に消えていくマスクの、Figmaでの作成方法をご紹介します！
私はFigmaを使い始めて3〜4年ほど経ちますが、最近この方法に気づきました…💦
今までわざわざPhotoshopで加工し、Figmaに持って帰ってきていた私のような人、必見です！
画像と四角形の配置
Figmaに画像を置きます。
そしてその画像の上に、画像と同じサイズの四角形を配置します。
四角形の「塗り」でグラデーションを作成
画像の上に置いた四角形の「塗り」から、グラデーションを選択します。
グラデーションの色は、マスクを作るにおいて関係ないので適当な色で大丈夫です。
そして、画像の右側をふわっと消したい場合は、グラデーションの右側のカラーの透明度を0%にします。
画像の下側を消したい場合は、グラデーションを縦方向にし、下側のカラーの透明度を0%にします。
マスクの作成
「塗り」をグラデーションにした四角形を、画像のレイヤーの直下に配置します。
グラデーション四角形が画像で覆い被さって見えなくなった状態で、四角形と画像のレイヤーを選択し、右クリック→「マスクとして使用」を選択します。
「マスクとして使用」のショートカットキーは、command+control+Mです。
グラデーションの調整
マスクをかけた状態で、先ほどのグラデーション四角形のレイヤーを選択し、グラデーションの各カラーの透明度を調整することによって、画像の消える度合いを調整することができます。
まとめ
今回は線形のグラデーションを使用しましたが、放射状や円錐型のグラデーションを使用することによって、より自由に画像の加工が可能になります。
ホームページのデザイン制作の際に役立ちますね！
以上、Figmaを使った写真がふわっと消えていくグラデーションマスクの作成方法でした！
■□■□■□■□■□■□■□■□■□■□
営業時間：平日9：00〜18：00
●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL：092-726-5550 FAX：092-726-5558
●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内
⇒ メールでのお問合せ
⇒ ホームページ制作実績
⇒ 会社案内
■□■□■□■□■□■□■□■□■□■□
