Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。 / いがわ

.

Memo

Figmaのトリミングや切り抜き、消しゴムの使い方。

Figmaのペンツールとマスクで、背景から切り抜く。

ペンツールで切り抜き。

覚えると便利なペンツール。

IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。

AIの普及などにより被写体の切り抜き精度が上がっている。ただ、それでもうまく切り抜けない時は、結局人の手によるペンツールの方が速かったりする。

また、ペンツールはロゴやアイコン、図形やイラストなどを描くときに重宝する。

いきなりペンツールを使うのはなかなか大変かもしれないが、切り抜きはその練習にもできる。

切り抜きがしやすい画像の例。

色が分かれている画像の切り抜き。

下記のような画像は背景がほぼ一色で、ワンちゃんニャンちゃんとの輪郭もはっきりしている。

Photoshopの「選択ツール」の類は、画像内の「色」を基に選択範囲を決めているため、このような境界線がわかりやすい画像は切り抜きがしやすい。

ただし、右のニャンちゃんの方は毛先が細かいので、一発では切り抜けられない可能性がある。)

Figmaで背景の切り抜きをする方法。切り抜きやすいワンちゃんの画像。
Figmaでトリミングをする方法。切り抜きやすい猫ちゃんの画像。

切り抜きがしにくい画像の例。

色が分かれていない画像の切り抜き。

対して下記のような画像は、背景がニャンちゃんワンちゃんと似たような色となっており、輪郭がよくわからない。

このような画像は切り抜きがしにくい。

背景の切り抜きが難しい猫ちゃんの画像。背景の切り抜きが難しいワンちゃんの画像。

ペンツールを使って手作業で切り抜く。

ペンツールでの切り抜きの例。

人の手は精密。

切り抜きがしにくい画像はペンツールを使って、精密な人間の手作業で切り抜く。

ペンツールで切り抜き。

切り抜くときのざっくりとした手順は下記の通り。pets

  1. 輪郭がわかりやすいように、画像の色やコントラストなどを調整する。
  2. 画面の拡大・縮小を活用する。
  3. ペンツールを使って、ベジェ曲線で被写体と背景の輪郭をなぞっていく。
  4. 輪郭のパスができたら、Fill(塗り)で色を塗る。
  5. 写真を上のレイヤーに配置する。
    (下の画像を「Ctrl(Command)」 + 「x」で切り取り、上の画像をクリックして「Ctrl(Command)」 + 「v」でペーストする。)
  6. 両方の画像を選択した上で、マスクをかけて切り抜く。
  7. 輪郭がわかりやすいように調整した場合は、基に戻す。

Figmaでの切り抜きの例。

上記の手順で実際に切り抜いてみた。

動画時間の短縮のため、大雑把にしています。)

マウスオーバーでコントロールバー表示可。)

Photo by:Daniel Octavian

切り抜き前と切り抜き後の画像データ。

ベジェ曲線の扱い方。

ベジェ曲線は慣れないうちは苦労するかもしれないが、過度に恐れることはない。
使うのはだいたい…

  1. クリックでアンカーポイントを打つ。
  2. ドラッグでハンドル(方向線)を伸ばす。
  3. すると、セグメント(線、辺)ができる。
  4. 必要に応じて「alt(option)」キーとドラッグで、ハンドル方向を切り替える。
  5. 最後はエンターキーでパスを閉じる。

が主なものとなる。

頭で考えるよりも、習うより慣れよでやってみると、逆に楽しくなってくる。


「remove.bg」 背景切り抜きのオンラインサービス。

自動切り抜きサービスRemove BG。

AIによる切り抜き。

Remove BG」のオンラインサービス。無料かつ一瞬で背景を切り抜ける。

remove.bgの注意点。
  • 商用利用や高解像度は無料プランでは不可。
  • WebPはアップロード不可。(FigmaなどでJPGに変換すればOK。)
  • 日本語対応済み。(一部例外あり。ブラウザの翻訳機能は可能。)


remove.bgのサイト画像。

使い方は簡単で、切り抜きたい画像をブラウザ上にドラッグ&ドロップするだけで良い。

背景を切り抜いた猫ちゃん。

意外とうまく切り抜けた。

ただし、輪郭がアバウトになっているので、小さな画像には使えるが大きな画像には向かない。

remove bgで背景を切り抜いた猫ちゃんの画像。

remove.bgで背景を切り抜いた人物やデスク周り。

こちらもうまくいった人物の背景切り抜き。

右奥の男性の髪の切り抜きが甘いが、小さな画像には使えそう。

remove bgで背景を切り抜いた人物の画像。

remove.bgで背景を切り抜けなかった猫ちゃん。

こちらのにゃんちゃんは切り抜けなかった。

remove bgで背景を切り抜けなかった猫ちゃんの画像。

2024.08.20 追記)

機能が改善され、だいぶ切り抜けてきている。

remove.bgで背景を切り抜いた例。

remove.bgの利用規約。

英語になる場合はGoogle翻訳などで日本語に翻訳可能。

参照元:Terms of Service – 利用規約


Figmaの「Remove BG」プラグインを使った切り抜き。

Remove BG。

remove.bgのプラグイン版。

Remove BGのアカウント登録とAPIキーの作成が必要なので、別記事にまとめました。

関連:Remove BGのアカウント作成と、Figma用APIキーの作成方法。

Figmaで背景の切り抜きをする方法。ペンツールとRemove BGプラグイン。

Remove BG
By Aaron Iker


Figmaの「Cutout」プラグインを使った切り抜き。

Cutout。

月額2ドルのサブスク型プラグイン。 (7日間の無料トライアルあり。)

2024年3月中旬時点。)

今回は試していないが、プラグインのページでデモ動画が見られる。

Figmaで背景の切り抜きをする方法。Cutoutプラグイン。

Cutout
By Lichin


Figmaの「Photopea」プラグインを使った切り抜き。

Photopea。

Photopeaのプラグイン版。

Figmaには消しゴムツールがない。それを補ってくれるのが「Photopea」。

消しゴムで消す。

正確には「切り抜き」ではなく、「消しゴムツール」でなぞって消すので、簡単な反面、仕上がりは雑な感じとなる。

消した部分のタッチ感を見せるときなどには良いかもしれない。

FigmaのPhotopeaプラグインの消しゴムツールの画像。

また、Photopeaはオンラインでも使える。

関連:Photopeaの使い方や主な機能。Photoshopのような無料ツール。

FigmaのPhotopeaプラグインの消しゴムツールの画像。

Figmaの背景切り抜き方法。ペンツールの使い方とプラグインを学ぶ猫。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。