![](https://dicolt.com/wp-content/uploads/maruki-right.png)
画像を切り抜いて背景を削除&透明にしたい時、どうしていますか?
スマホでも自動で切り抜けるようになりましたが、自動の場合はうまくいかないこともしばしば。
画像を思う通りに切り抜けず、困っている方も多いと思います。
画像を自由に切り取って背景を透明化できるようになると「プロ感」が出て、周りと一歩差をつけることができます。
「そうは言っても、フォトショップは難しそうだし、そもそも有料で高いし…」
「わざわざツールをインストールするのも面倒くさい…」
と思っている方、ご安心ください。
今回は無料かつインストール不要のオンラインツール「Pixlr E」を使って、自由に画像を切り抜いて背景を透明にする方法を解説します。
一度覚えてしまえば色々と使えてとても便利。仕事の資料作成にも役立つスキルです。
なにより画像の切り抜きができるようになると、デザインが楽しい!
ぜひトライしてみてください。
Pixlr Eとは
Pixlr Eはオートデスク社が提供している無料で使える画像加工のオンラインサービス。
簡単に言うと「フォトショップ的なことがウェブブラウザ上で無料でできちゃうツール」です。
ちなみにオートデスク社は図面作成(CAD)のソフトウェア開発をしているアメリカの企業。
日本の設計事務所などでもよく使われている設計ソフト「AutoCAD」を開発しています。
![](https://dicolt.com/wp-content/uploads/maruki-right3.png)
![](https://dicolt.com/wp-content/uploads/maruki-right3.png)
![](https://dicolt.com/wp-content/uploads/maruki-right3.png)
設計事務所で働いていた時に、AutoCADを使っていました。
つまり、Pixlr Eは技術的にも信頼がおける企業の無料サービス。
使わなければもったいない!
Pixlr Eで写真を切り抜いて背景を透明に(透過)する方法
まずは、Pixlr Eにアクセス。
切り抜きたい画像をアップロードします。
1. 切り抜きたい画像をアップロードする
![pixlr editorのトップページ](https://dicolt.com/wp-content/uploads/f07cf0286f512218ea3879023964d947.jpg)
![pixlr editorのトップページ](https://dicolt.com/wp-content/uploads/f07cf0286f512218ea3879023964d947.jpg)
「コンピューターから画像を開く」を選択します。
※Safariだとうまく動かないので、ChromeかFirefoxをオススメします
切り抜きたい画像を選択しアップロードします。
![pixlr editorで切り抜きたい画像をアップロード](https://dicolt.com/wp-content/uploads/acde5966a972940b4c9d2b268999f6f5.jpg)
![pixlr editorで切り抜きたい画像をアップロード](https://dicolt.com/wp-content/uploads/acde5966a972940b4c9d2b268999f6f5.jpg)
今回は、息子が描いた魚の絵の「きんめだい」部分だけを切り抜いてみます。
2. 余分な部分をざっくり四角形で切り抜く
作業をしやすくするために、きんめだい以外の余分な部分を切り抜きます。
![pixlr editorで切り抜きたい画像の余分な部分をざっくり四角形で切り抜く](https://dicolt.com/wp-content/uploads/be905c388e7def7de99042343fcfd6b1.jpg)
![pixlr editorで切り抜きたい画像の余分な部分をざっくり四角形で切り抜く](https://dicolt.com/wp-content/uploads/be905c388e7def7de99042343fcfd6b1.jpg)
左上の切り抜きツールを選択し、切り抜く範囲を指定します。
「変更を適用しますか?」という画面が表示されるので、「はい」をクリックします。
![左上の切り抜きツールを選択し、切り抜く範囲を指定します。「変更を適用しますか?」という画面が表示されるので、「はい」をクリック](https://dicolt.com/wp-content/uploads/0869473b6ec900d14c8cfdd57ff41a7d.jpg)
![左上の切り抜きツールを選択し、切り抜く範囲を指定します。「変更を適用しますか?」という画面が表示されるので、「はい」をクリック](https://dicolt.com/wp-content/uploads/0869473b6ec900d14c8cfdd57ff41a7d.jpg)
これで余分な部分をざっくり四角く切り抜くことができました。
3. 余分な部分や背景を消す
ここからは余分な部分や背景を消していきます。
![pixlr editorで余分な部分や背景を消していきます](https://dicolt.com/wp-content/uploads/fbfb864cbe1921a181cf37d73703856f.jpg)
![pixlr editorで余分な部分や背景を消していきます](https://dicolt.com/wp-content/uploads/fbfb864cbe1921a181cf37d73703856f.jpg)
選択ツールを選択し、消したい背景部分を適当な場所でクリックします。
「変更を適用しますか?」という画面が表示されるので、「はい」をクリックします。
すると、選択範囲が点線で表示されます。
![pixlr editorで選択範囲が点線で表示されている状態で、キーボードの「delete」ボタンを押すと選択範囲が白くなります。](https://dicolt.com/wp-content/uploads/fddf1aaad8a4d3920f0426f0f1e48520.jpg)
![pixlr editorで選択範囲が点線で表示されている状態で、キーボードの「delete」ボタンを押すと選択範囲が白くなります。](https://dicolt.com/wp-content/uploads/fddf1aaad8a4d3920f0426f0f1e48520.jpg)
選択範囲が点線で表示されている状態で、キーボードの「delete」ボタンを押すと選択範囲が白くなります(一回押しただけでは削除しきれない場合があるので2、3回押しておきます)。
このままだと、上と下にまだ余分な部分があるので、それぞれ消していきます。
![pixlr editorで投げ縄ツールを選択し、さらに、多角形投げ縄ツールを選択](https://dicolt.com/wp-content/uploads/c6de87cfa928748e52d0ce9b1dc393cf.jpg)
![pixlr editorで投げ縄ツールを選択し、さらに、多角形投げ縄ツールを選択](https://dicolt.com/wp-content/uploads/c6de87cfa928748e52d0ce9b1dc393cf.jpg)
投げ縄ツールを選択し、さらに、多角形投げ縄ツールを選択します。
適当な場所からスタートし、ポチポチとクリックしながら、消したい範囲を指定していきます。
![pixlr editorで範囲を指定しながら、最後にスタート地点をクリックすると、囲まれた選択範囲が点線で表示されます](https://dicolt.com/wp-content/uploads/58c416143b5f3f969a71ba95ba25e519.jpg)
![pixlr editorで範囲を指定しながら、最後にスタート地点をクリックすると、囲まれた選択範囲が点線で表示されます](https://dicolt.com/wp-content/uploads/58c416143b5f3f969a71ba95ba25e519.jpg)
範囲を指定しながら、最後にスタート地点をクリックすると、囲まれた選択範囲が点線で表示されます。
先ほどと同様にキーボードの「delete」ボタンを押して選択範囲を消します。
![pixlr editorで上部分の切り抜き完了!](https://dicolt.com/wp-content/uploads/e893c016ae21f9ea74ad266388682fa3.jpg)
![pixlr editorで上部分の切り抜き完了!](https://dicolt.com/wp-content/uploads/e893c016ae21f9ea74ad266388682fa3.jpg)
上部分は完了!
下部分も同じ要領で消します。
![pixlr editorで線は表示されないのですが、画像の範囲外の黒い部分でクリックすると、その場所を選択してくれます](https://dicolt.com/wp-content/uploads/c655900c57f121f30dc322c141a5548e.jpg)
![pixlr editorで線は表示されないのですが、画像の範囲外の黒い部分でクリックすると、その場所を選択してくれます](https://dicolt.com/wp-content/uploads/c655900c57f121f30dc322c141a5548e.jpg)
線は表示されないのですが、画像の範囲外の黒い部分でクリックすると、その場所を選択してくれます。
実際は上の図のような画像の範囲外の場所をクリックしているのですが…
![pixlr editorで画像の範囲外の黒い部分でクリックすると、その場所を選択](https://dicolt.com/wp-content/uploads/1d891b3bc2dce627b70c544a2af2e984.jpg)
![pixlr editorで画像の範囲外の黒い部分でクリックすると、その場所を選択](https://dicolt.com/wp-content/uploads/1d891b3bc2dce627b70c544a2af2e984.jpg)
このような形で選択してくれます。
![pixlr editorで画像の余計な部分を削除](https://dicolt.com/wp-content/uploads/8ba90ded772a43b1bb11052a8491f824.jpg)
![pixlr editorで画像の余計な部分を削除](https://dicolt.com/wp-content/uploads/8ba90ded772a43b1bb11052a8491f824.jpg)
これでキレイに消すことができました!
4. 画像の背景を透明にする
作業完了までもう一息です!
画像の背景を透明にしていきます。
![pixlr editorで画像の背景を透明にしていきます](https://dicolt.com/wp-content/uploads/5061d269663ae3ff0970b169737ca201.jpg)
![pixlr editorで画像の背景を透明にしていきます](https://dicolt.com/wp-content/uploads/5061d269663ae3ff0970b169737ca201.jpg)
選択ツールを選択し、白い部分を適当な場所でクリックします。
![pixlr editorで選択範囲が点線で表示された状態で「編集」の「選択部分の階調を反転する」を選択](https://dicolt.com/wp-content/uploads/4536d42eda2f287d7d40d0f92028b527.jpg)
![pixlr editorで選択範囲が点線で表示された状態で「編集」の「選択部分の階調を反転する」を選択](https://dicolt.com/wp-content/uploads/4536d42eda2f287d7d40d0f92028b527.jpg)
選択範囲が点線で表示された状態で「編集」の「選択部分の階調を反転する」を選択します。
すると…
![pixlr editorで選択範囲が反転した状態で選択](https://dicolt.com/wp-content/uploads/1789fa0cd45844bf8c956542725fff04.jpg)
![pixlr editorで選択範囲が反転した状態で選択](https://dicolt.com/wp-content/uploads/1789fa0cd45844bf8c956542725fff04.jpg)
選択範囲が反転した状態で選択されます。
この状態でコピー(control+C)し、ペースト(control+V)します。
![[pixlr editor]先ほどのコピー&ペーストすると、「レイヤー1」が自動的に作られます](https://dicolt.com/wp-content/uploads/3b78fabb1954b711974f0832ccf3d4de.jpg)
![[pixlr editor]先ほどのコピー&ペーストすると、「レイヤー1」が自動的に作られます](https://dicolt.com/wp-content/uploads/3b78fabb1954b711974f0832ccf3d4de.jpg)
先ほどのコピー&ペーストすると、「レイヤー1」が自動的に作られます。
レイヤー「背景」のカギマークをダブルクリックします。
![[pixlr editor]「レイヤー0」を選択した状態で、ゴミ箱マークを押し、「レイヤー0」を削除](https://dicolt.com/wp-content/uploads/b3886df9cec77fd90456ccccf085e9a4.jpg)
![[pixlr editor]「レイヤー0」を選択した状態で、ゴミ箱マークを押し、「レイヤー0」を削除](https://dicolt.com/wp-content/uploads/b3886df9cec77fd90456ccccf085e9a4.jpg)
レイヤー「背景」の名前が「レイヤー0」に変わります。
「レイヤー0」を選択した状態で、ゴミ箱マークを押し、「レイヤー0」を削除します。
![[pixlr editor]背景が市松模様になった状態で「ファイル」の「保存」を選択](https://dicolt.com/wp-content/uploads/3cabe9e102595ba8ab9bab5f6e977cfb.jpg)
![[pixlr editor]背景が市松模様になった状態で「ファイル」の「保存」を選択](https://dicolt.com/wp-content/uploads/3cabe9e102595ba8ab9bab5f6e977cfb.jpg)
背景の白色が消え、絵の周りが白色と灰色の市松模様になっています。
この市松模様の部分が、背景が透明になっている範囲になります。
背景が市松模様になった状態で「ファイル」の「保存」を選択します。
5. 背景を透明にした画像を保存する
「ファイル」の「保存」を選択すると、小さいウインドウが開きます。
![[pixlr editor]「フォーマット」で「PNG」を選択し、OKボタンをクリック](https://dicolt.com/wp-content/uploads/7868cb2f783c1dcc7817b90f785428d0.jpg)
![[pixlr editor]「フォーマット」で「PNG」を選択し、OKボタンをクリック](https://dicolt.com/wp-content/uploads/7868cb2f783c1dcc7817b90f785428d0.jpg)
「フォーマット」で「PNG」を選択し、OKボタンをクリックします。
これで完成です!!
【Pixlr Eで写真を切り抜いて背景を透明に(透過)する方法】のおわりに
自由に画像の切り抜きができるようになると、自分でできるデザインの幅が広がります。
ちなみに、この「きんめだい」は2017年の年賀状でこんな風に使いました。
![[pixlr editor]自由に画像の切り抜きができるようになると、自分でできるデザインの幅が広がります](https://dicolt.com/wp-content/uploads/8c007c4ccb0ce862bdf91eac8b5a1f94.jpg)
![[pixlr editor]自由に画像の切り抜きができるようになると、自分でできるデザインの幅が広がります](https://dicolt.com/wp-content/uploads/8c007c4ccb0ce862bdf91eac8b5a1f94.jpg)
他の魚も、色々な紙に別々に描かれていたものを写真撮影し、線の部分だけ切り抜きました。
画像の切り抜き方、いかがでしたでしょうか。
長々と書いてしまいましたが、慣れてしまえば数分でできるようになります。
これからも無料で使える画像加工の方法を探しながら、ここでシェアしていきたいと思います。