透過PNG|きれいな輪郭で作成できる簡単サイトと抽出のコツ|アプリ不要

背景が透明な透過PNG画像をきれいに作成する方法について書きました。
無料で、登録一切なし、簡単操作のサイトを使用します。

ポク太郎です。

ブログやホームページ上に写真が散りばめられていると、画面が華やかになります。が、完全な四角形ばかりだと高級感がありません。

今回は、背景を透明化した透過PNG画像を作れるサイトの紹介&外形抽出のちょっとしたコツです。


透過色とは

コンピュータで扱う画像ファイルは必ず横が水平、縦が垂直の四角形。完全な四角形なので不自然です。

そこで、目的の形状だけ表示する方法が透過色を利用した方法。周辺の色を透過色として定義し、背景を透明にします。

透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】-トイレ詰まりを1分で直すスッポン、ラバーカップの技

透過色を指定し、背景を透明にした透過PNG画像を作れるサイトを以下に紹介、作り方を説明します。

取り扱うのは、

  • 単色に近いイラスト調画像の背景透明化
  • 作業のほとんどは色範囲の探索作業になります。下で説明。
  • 実写の写真での背景透明化
  • 画像編集ソフト上で手動で背景を潰す方法です。
    髪の毛など細線が境界となるものは本ページの方法では無理と思われます。

透過PNG作成作業の流れと使用するサイト』

使用するのはこちらのサイト→『ブログHPツール』さんの画像透過ツールというページ。

作成作業の流れは、

透過PNG画像作成作業全体の流れ
PC上で0透過させたい画像を準備
JPGJPEG)、BMPなど一般的なフォーマット

サイト上で
1色範囲」の探索作業(※)

※グラデーションされてることでジャギーっぽくなる輪郭部分をきれいに全部選択するために。下で説明。

2最終的な透過画像を完成させる
3完成PNG画像をダウンロード

0番は目的の画像、23番は瞬時に終わる操作です。

なので、作業のほとんどは1.“色範囲の探索”。輪郭がきれいに切り出せる色範囲を繰り返し探す作業です。

基本操作用に覚えるボタン

見ればすぐ分かる操作ですが一応。

目的の画像をドラッグ&ドロップするとサイト内で開くことができます。

まだ画像が準備できてない場合は、練習用画像が用意されてるのでそれを。キャラクターボタンを押すとサンプルが表示されます。

また、別画像をドロップし直したい場合はブラウザのリロード更新で最初の画面に戻ります。

透過PNG画像を作成できる便利サイトと輪郭抽出のコツ【フリーソフト不要】

その下にコントロールパネル。

透過PNG画像を作成できる便利サイトと輪郭抽出のコツ【フリーソフト不要】

作業を繰り返すためのA初期化ボタン、最後に保存するためのB画像化ボタン2つを覚えてしまいます。

色範囲探索用のコントロール

上述のように色範囲探索作業がほぼ全て。

透過させる色を指定しますが、画像は単色に見えても大抵は微妙に異なる色でグラデーションされています。

特にjpgなどは境界付近でブロックノイズ→ジャギーのように。

そのため、色範囲なるものを指定して近い色全てを選択しないと、抜きたい点が残ってしまいます。

その色範囲探索のため、繰り返し操作するのがC色の許容値バー。色範囲の値をスライドバーで指定します。

透過PNG画像を作成できる便利サイトと輪郭抽出のコツ【フリーソフト不要】

具体的な操作は、

C色の許容値”変更→クリックして確認→A初期化”→C色の許容値”変更→クリックして確認→A初期化”→…→完成したらB画像化”し保存。

色範囲探索作業とは、上記操作を繰り返し最適な値を探す作業です。

イラスト調画像透明化のキモは“色範囲の選択”

それでは色範囲の探索作業です。

権利の問題があるのでここではポク太郎の顔を使用しております。

下の赤矢印C色の許容値”をスライドバーで適当に動かし、顔の一部分をクリックします。※“拡大鏡”も表示。

開始透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

こうなってしまいました。

失敗透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

ここで、→A初期化”→C色の許容値”を変更→顔をクリック…を繰り返していい感じになる値を探します。

この色の場合は、下の値(色の許容値=78)まで上げるといい感じになりました。

いい感じ透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

いい値が見つかったので、残りの部分を全部クリックすると、

完成透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

出来上がったら、上で憶えたB画像化ボタンを押すと保存用の画像が表示されます。

それを右クリック-名前を付けて画像を保存でPCへダウンロードできます。(完了)

輪郭抽出が難しい実写写真の透明化

透明化のキモは外形抽出。“透明化させるべき部分”を人間が簡単に指定できるよう単一の色に変えてしまうこと。

なので、たくさんの色が入り込む実写の写真は難易度が上がります。

輪郭抽出ソフトは色々ありますが、以下はポク太郎が行う方法です。

ブログの看板とするため、真剣な面持ちで撮影した冒頭の写真ですが、

透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

このような凹みのない外形であれば、画像編集ソフトで外形抽出を行ってしまいます。

画像編集ソフト…Windowsに標準添付のペイントで可。直線の描けるものならOK。

太い直線を使って曲線の接線を描いていきます。

透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

遠くでクリックし一点を固定した後、直線が接するようにもう一点をクリックすればよいので簡単です。

接線をたくさん描けば描くほど綺麗に抽出できます。

透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

これらの接線を真剣な面持ちで描き続け、範囲選択→削除で不要な部分を全て削除していきます。

透過PNG画像作成便利サイトときれいに輪郭抽出するコツ【フリーソフト不要】

不要な部分を全て取り除いたら、一旦保存して、

→上で紹介したサイトにドラッグ&ドロップ。
→周辺(今は白)の部分を透過色指定するためにクリック。

この場合は周辺色を完全に単色にしてしまってるので“色範囲の探索”作業は不要。

→上で覚えたB画像化ボタン。
→表示された画像を右クリック-名前をつけて保存でPCへダウンロード。

で、目的の透過画像入手完了です。

ふぅ。やはりこういう真面目な解説記事書くのは疲れます。

因みにこちらの商品、「幸せになれた」「感激!」「最高!」等、各々が各々の言葉でカスタマーレビュー中にその感動を伝えております。

相棒と呼ぶ方、見る度に「ありがとう…。」と語りかける方まで存在。ここまで大絶賛された商品が他にありますでしょうか。

文字化けはGoogleの仕様です。

コメント

タイトルとURLをコピーしました