Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
Figmaのペンツールとマスクで、背景から切り抜く。
IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。
AIの普及などにより被写体の切り抜き精度が上がっている。それでもうまく切り抜けない時は、結局人の手によるペンツールに頼ることになる。
また、ペンツールはロゴやアイコンなど、図形やイラストを描くときに重宝する。いきなりペンツールを使うのはなかなか大変かもしれないが、切り抜きはその練習にもできる。
切り抜きがしやすい画像の例。
下記のような画像は背景がほぼ一色で、ワンちゃんニャンちゃんとの輪郭もはっきりしている。
いわゆる「選択ツール」の類は、画像内の「色」を基に選択範囲を決めているため、このような画像は切り抜きがしやすい。AIの機能でも認識しやすいだろう。
（※ただし、右のニャンちゃんの方は毛先が細かいので、一発では切り抜けられない可能性がある。）
切り抜きがしにくい画像の例。
対して下記のような画像は、背景がニャンちゃんワンちゃんと似たような色となっており、輪郭がよくわからない。
このような画像は切り抜きがしにくい。
ペンツールを使って手作業で切り抜く。
切り抜きがしにくい画像はペンツールを使って、ここに於いてはAIよりも精密な人間の手作業で切り抜く。
ペンツールで切り抜き。
ざっくりとした手順は下記の通り。
- 輪郭がわかりやすいように画像を調整する。
- 画面の拡大・縮小を活用する。
- ペンツールを使って、ベジェ曲線で被写体と背景の輪郭をなぞっていく。
- 輪郭のパスができたら、Fill（塗り）で色を塗る。
- 写真を上のレイヤーに配置する。
（下の画像を「Ctrl（Command）」 + 「x」で切り取り、上の画像をクリックして「Ctrl（Command）」 + 「v」でペーストする。） - 両方の画像を選択した上で、マスクをかけて切り抜く。
- 輪郭がわかりやすいように調整した場合は、基に戻す。
Figma上での実際の操作。
上記の手順で実際に切り抜いてみた。
（※動画時間の短縮のため、大雑把にしています。）
（※マウスオーバーでコントロールバー表示可。）
ベジェ曲線の扱い方。
ベジェ曲線は慣れないうちは苦労するかもしれないが、過度に恐れることはない。
使うのはだいたい、、、
- クリックでアンカーポイントを打つ。
- ドラッグでハンドル（方向線）を伸ばす。
- すると、セグメント（線、辺）ができる。
- 必要箇所によって「alt(option)」キーとドラッグでハンドル方向を切り替える。
- 最後はエンターキーでパスを閉じる。
が主なものとなる。
頭で考えるよりも、習うより慣れよでやってみると、逆に楽しくなってくる。
「remove.bg」 背景切り抜きのオンラインサービス。
「Remove BG」のオンラインサービス。無料かつ一瞬で背景を切り抜ける。
remove.bgの注意点。
- 商用利用や高解像度は無料プランでは不可。
- WebPはアップロード不可。（FigmaなどでJPGに変換すればOK。）
- 日本語対応済み。（一部例外あり。ブラウザの翻訳機能は可能。）
使い方は簡単で、切り抜きたい画像をブラウザ上にドラッグ&ドロップするだけで良い。
remove.bgで背景を切り抜いた猫ちゃん。
上記ではFigmaのペンツールを使用したが、意外とうまく切り抜けた。
remove.bgで背景を切り抜いた人物やデスク周り。
こちらもうまくいった人物の背景切り抜き。
remove.bgで背景を切り抜けなかった猫ちゃん。
こちらのにゃんちゃんはうまく切り抜けなかった。
remove.bgの利用規約。
英語になる場合はGoogle翻訳などで日本語に翻訳可能。
Figmaの「Remove BG」プラグインを使った切り抜き。
Remove BG。
remove.bgのプラグイン版。今回は試していないが、プラグインを使用しても背景の切り抜きができる。
アカウント登録が必要なようだが無料プランもあり、切り抜きがしやすい画像に対しては、良いかもしれない。
以上、参考になれば幸いです。
Figma 関連メモ。
- FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
- FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
- FigmaからWebPで書き出しす方法。Olive Pressの使い方
- Figma プラグインを削除する方法。追加も削除もシンプルに。
- Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
- Figma 削除したファイルを復元したいとき。復元の方法。
- Material SymbolsをFigmaへ。インストールしてすぐに使える。
- Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
- Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
- Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
- Figmaを日本語化。言語切り替えの使い方。再起動も不要。
- Figmaで検索・置換する方法。ショートカットからでOK。
- Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
- Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
- Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
- Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
- Figmaがダークモードに対応。背景色設定も簡単、目に優しい！
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
