Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

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

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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

Illustratorや画像編集ソフトの代表格であるPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。

AIの導入などによりPhotoshopの被写体の切り抜き精度が上がっている。ただしうまく切り抜けない時は、今でも結局人の手によるペンツールに頼ることになる。

また、ペンツールはロゴやアイコンなど図形やイラストを描くときに重宝する。いきなりペンツールを使うのはなかなか大変かもしれないので、切り抜きはその練習にもできる。

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

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

いわゆる「選択ツール」の類は、画像内の「色」を基に選択範囲を決めているため、このような画像は切り抜きがしやすい。近年はAIの機能も進んできている。

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

Figmaで背景の切り抜きをする方法。プラグインで切り抜けやすいワンちゃんの画像。
Figmaで背景の切り抜きをする方法。プラグインで切り抜けやすい猫ちゃんの画像。

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

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

Figmaで背景の切り抜きをする方法。プラグインでは難しい猫ちゃんの画像。Figmaで背景の切り抜きをする方法。プラグインでは難しいワンちゃんの画像。

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

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

ペンツールで切り抜き。

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

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

Figma上での実際の操作。

上記の手順で実際に切り抜いてみた。動画時間の短縮のため、かなり大雑把にしている。

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

ベジェ曲線の扱い方。

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

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

が主なものとなる。

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


Figmaのプラグインを使った自動的な切り抜き。

Remove BG

今回は試していないが、Figmaの「Remove BG」というプラグインを使用しても背景の切り抜きができるらしい。

「Remove」は削除するという意味で、「BG」はBackground、背景の略に使われる。その名の通り、背景の削除に特化したプラグイン。

アカウント登録が必要なようだが無料プランもあり、上記のような、切り抜きがしやすい画像に対しては、ありかもしれない。

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

参考:Remove BG
By Aaron Iker

Figma プラグイン関連メモ。

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


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

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

お問い合わせ CONTACT..

    免責事項について

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

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。