Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Figmaのペンツールとマスクで、背景から切り抜く。
Illustratorや画像編集ソフトの代表格であるPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。
AIの導入などによりPhotoshopの被写体の切り抜き精度が上がっている。ただしうまく切り抜けない時は、今でも結局人の手によるペンツールに頼ることになる。
また、ペンツールはロゴやアイコンなど図形やイラストを描くときに重宝する。いきなりペンツールを使うのはなかなか大変かもしれないので、切り抜きはその練習にもできる。
切り抜きがしやすい画像例。
背景がほぼ一色で、ワンちゃんニャンちゃんとの輪郭もはっきりしている。
いわゆる「選択ツール」の類は、画像内の「色」を基に選択範囲を決めているため、このような画像は切り抜きがしやすい。近年はAIの機能も進んできている。
※ただし、右のニャンちゃんの方は毛先が細かいので、一発では切り抜けられない可能性がある。
切り抜きがしにくい画像例。
背景がニャンちゃんワンちゃんと似たような色となっており、輪郭がよくわからない。
このような画像は切り抜きがしにくい。
ペンツールを使って手作業で切り抜く。
切り抜きがしにくい画像はペンツールを使って、ここに於いてはAIよりも精密な人間の手作業で切り抜く。
ペンツールで切り抜き。
ざっくりとした手順は下記の通り。
- 輪郭がわかりやすいように画像を調整する。
- 画面の拡大・縮小を活用する。
- ペンツールを使って、ベジェ曲線で被写体と背景の輪郭をなぞっていく。
- 輪郭のパスができたら、Fill（塗り）で色を塗る。
- 写真を上のレイヤーに配置する。
（下の画像を「Ctrl（Command）」 + 「x」で切り取り、上の画像をクリックして「Ctrl（Command）」 + 「v」でペーストする。） - 両方の画像を選択した上で、マスクをかけて切り抜く。
- 輪郭がわかりやすいように調整した場合は、基に戻す。
Figma上での実際の操作。
上記の手順で実際に切り抜いてみた。動画時間の短縮のため、かなり大雑把にしている。
※マウスオーバーでコントロールバー表示可。
ベジェ曲線の扱い方。
ベジェ曲線は慣れないうちは苦労するかもしれないが、過度に恐れることはない。
使うのはだいたい、
- クリックでアンカーポイントを打つ。
- ドラッグでハンドル（方向線）を伸ばす。
- すると、セグメント（線、辺）ができる。
- 必要箇所によって「alt(option)」キーとドラッグでハンドル方向を切り替える。
- 最後はエンターキーでパスを閉じる。
が主なものとなる。
頭で考えるよりも、習うより慣れよでやってみると、逆に楽しくなってくる。
Figmaのプラグインを使った自動的な切り抜き。
Remove BG
今回は試していないが、Figmaの「Remove BG」というプラグインを使用しても背景の切り抜きができるらしい。
「Remove」は削除するという意味で、「BG」はBackground、背景の略に使われる。その名の通り、背景の削除に特化したプラグイン。
アカウント登録が必要なようだが無料プランもあり、上記のような、切り抜きがしやすい画像に対しては、ありかもしれない。
Figma プラグイン関連メモ。
- Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
- Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
- Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
- Material SymbolsをFigmaへ。インストールしてすぐに使える。
- Figma プラグインを削除する方法。追加も削除もシンプルに。
- FigmaからWebPで書き出しす方法。Olive Pressの使い方
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
