まじか!VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ

Visual Studio Codeでついに、画像から背景を切り抜けるようになりました!

remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは!

VS Codeで、画像から背景を1クリックで切り抜けます

VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます

VS Codeで画像から背景だけを切り抜く

VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。
まずは、ぱくたそ画像を用意し、VS Codeで開きます。

VS Codeのキャプチャ

画像を用意し、VS Codeで開く

サイドバーから画像のファイルを右クリックし、「Remove background」を選択。

VS Codeのキャプチャ

「Remove background」を選択

これだけで、完了です!
切り抜いた画像は、同階層に「-no-bg」を加えたファイルが生成されます。

VS Codeのキャプチャ

背景だけの切り抜き、完了!

生成された画像をPhotoshopで開くと、この通りです。

生成された画像

生成された画像

VS Codeにremove.bgをインストールする手順

インストールは通常の機能拡張と同じですが、設定を1つする必要があります。
まずは、Visual Studio Marketplaceから機能拡張をインストールします。
※remove.bg公式ではなく有志による機能拡張ですが、公式のツールページでお勧めされています。

サイトのキャプチャ

remove-bg -Visual Studio Marketplace

「Install」をクリックすると、「Visual Studio Codeで開くことを許可しますか?」と表示されるので、「許可」をクリック。

サイトのキャプチャ

「許可」をクリック

VS Codeで開いたら、「インストール」をクリックでひとまず完了です。

サイトのキャプチャ

「インストール」をクリック

続いて、設定をします。
remove.bgを動作させるにはAPI Keyが必要なので、remove.bgで取得します(無料)。

サイトのキャプチャ

remove.bg

remove.bgに登録したら、My DashboardからAPI Keyを生成します。

サイトのキャプチャ

My Dashboard(※要ログイン)

取得したAPI KeyをVS Codeのremove.bgの機能拡張の設定に記述します。もちろん、コピペでOKです。

サイトのキャプチャ

remove.bgのAPI Keyを記述したら完了

remove.bgについては、以前の記事をご覧ください。
VS Codeだけでなく、Photoshopなどにも対応しています。

切り抜きのビフォーアフター切り抜きのビフォーアフター

「Remove.bg」が便利すぎる!1クリックで画像から背景だけを切り抜く、ついにPhotoshopに対応

sponsors

top of page

©2021 coliss