2018.05.25

2018.06.01

Web制作

UIデザインツールFigmaのグラデーションマスクの作成方法

グラデーションマスクキービジュアル

昨今UIデザインのためのアプリが増えてきておますが、中々使い勝手が良いのが「Figma」です。

「Figma」と言ってもマッ◯スファ◯トリーのアレではないことはさんざん申し上げたのでもう大丈夫ですよね 笑

今回はFigmaでグラデーションを使用したマスク作成方法をご紹介したいと思います。

グラデーションマスクってなに?

という方もいるかもしれませんのでご説明を。

グラデーションを設定した矩形を利用し、だんだんと透明になる画像を作成できるものです。背景になじませたり、他の画像となじませコラージュ的なものを作成したりと非常に便利な機能です。

1.画像を配置する

画像挿入

任意の場所からドラッグ&ドロップで配置し大きさを整えます。

2.グラデーションの矩形を作成する

矩形作成

グラデーションを作成するための矩形を作成します。

グラデーション作成

その後右側の「FILL」メニューから配色アイコンをクリックし、ポップアップメニューの左上の「Solid」と書かれているメニューをクリックし「Liner」を選択。グラデーションが作成されました。

グラデーション調整

グラデーションは後から調整が可能です。

3.マスクをかける

マスクをかける

グラデーション設定した矩形を画像の背景に配置(Ctrl + Shift + {)し、画像と矩形両方を選択。

グラデーションマスク完了

右側が消えていくマスクが作成されました。

最後に

グラデーションマスクは色んな形のマスクでも作成することが可能です。またグラデーションの設定次第でも色んなマスクを作成することが可能です。色々触って試してみてください。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する