Figma：画像の加工とクリッピングマスク

目次

0_ 新規プロジェクトを用意しよう

1_ 画像の配置

2_ 画像の加工

3_ クリッピングマスク / トリミング

制作

0_ 新規プロジェクトを用意しよう

1_ 画像の配置

figmaは画像を配置する時、普通にドラッグする方法と、図形ツールの中にある「 画像/動画…（⇧⌘ K） 」を使う方法の二つがあります。もしかしたら他にもあるかもなんですけどこの二つが一番簡単かなって思います。個人的には普通にドラッグする方が好きです。

※D.Gray-manおすすめです。ずっと欲しくて最近マギ全巻買いました。誰か知ってる人いたらコメントください。

2_ 画像の加工

画像の加工と少しお袈裟に言いましたが、スマホのカメラアプリと似たような感じのことができます。
まずサメの方は「 外観 」と「 エフェクト 」をいじりました。
外観には「 除外 」で画像のイメージをつけ、エフェクトを使い「 ドロップシャドウ 」と「 テクスチャー 」で奥行きや質感をつけました。

次にペンギンの方は「 塗り 」と「 外観 」をいじりました。
塗りは「 画像 」のコントラストなど、外観は「 角丸 」と「 不透明度 」を変えました。私はこっちの方が多く使うかなと言った感じです。

3_ クリッピングマスク / トリミング

サメの画像にマスクをかけていきます。
まずオブジェクトを用意しマスクしたい画像の下に持っていきます。次にその二つを選択したまま二本指でクリックし「 マスクとして使用（ control ⌘ M 」でマスクをかけます。ついでに線と影をつけました。

ペンギンの画像にはトリミングをかけます。
さっき開いたカスタムパネルの「 塗り → トリミング 」から好きなサイズに変えます。ついでに角を丸くして線をつけしました。ギザギザ線今回初めて使いました。可愛くできて嬉しいです。

---