ポク太郎です。
本記事は静止画像一枚の背景を透明化した透過画像作成の話。透過GIF、透過PNG作成の原理・フォーマット・理由・キモ・手順のまとめ。
手順だけでなく、どこまでの作業をこの方法で、トラブルの際にはこのツールで、よりきれいに仕上げるにはこの手段で、と自由自在な透過画像作成が可能になるよう理解を促す内容。
真剣な面持ちでまとめた堅苦しい構成ですが、一文一文は非常に短いので簡単に読めると思います。
本記事の話題は“透過画像”
本サイトで行う透過画像の作り方
本サイトで紹介する透過画像の作り方≒背景除去のやり方は3種類。
本記事内に万能型の手動のが2種類、別ページにAI使用した自動のが1種類。
うまく行けば一瞬で終わるので別ページの人工知能を試した上、ダメな場合に本記事記載の手動に挑戦するのがおススメ。
人工知能→手動で更にきれいに仕上げる合わせ技も当然OK。
“背景透明化”可能なフォーマットGIFとPNG
“画像”ファイルの一般的なフォーマット形式
背景を透明化した透過画像が作れるのは表内の“透過○”。PNG、webp、GIF。
| BMP | ビットマップ。一番一般的な非圧縮フォーマット。画像容量巨大。 |
| TIFF | ティフ。複数ページ、多形式を一ファイルにまとめられる非圧縮、可逆圧縮フォーマット。拡張子は短く「.tif」とすること多し。 |
| JPEG | ジェイペグ。最も一般的。画像容量を小さくできる非可逆圧縮フォーマット。デジカメ、スマホなどの写真はほぼこれ。拡張子は短く「.jpg」とすること多し。 |
| PNG 透過○ |
ピンッ。劣化の少ない可逆圧縮フォーマット。インデックスカラー化も可能で色数の少ない図表等は特に有利。背景がほとんど白、単色の線しかない図表・グラフなどではJPEGより画像容量が小さくなる場合も。 |
| webp 透過○ |
ウェッピー。Googleが提唱するネット向けフォーマット。JPEG、PNG置き換え目的の、アルファチャンネルも使える形式。まだ非対応の環境があるため普及十分とは言えず。 ※下段のHEIFと同様、これからの普及がどうなるかに注目。 |
| HEIF HEIC 透過○ |
ヒーフまたはヒーク。動画技術を画像に適用した新世代画像フォーマット。画質劣化もJPEG程酷くなく、更には画像容量もJPEG以下となる。拡張子は「.heif」やエンコード名「.heic」。非常に優秀なフォーマットなのに名称統一しないと普及の足かせになりそうな。いっそのこと.heiにしてしまえ。 ※ライセンスの問題かすべての環境で完全無料標準サポートって状況にはなく今後に期待。 |
| GIF 透過○ |
ギフと呼んでるが設計者曰くジフ。インデックスカラー化し画像容量を絞れる可逆圧縮フォーマット。PNGに取って代わられた一昔前の形式。複数枚連結したアニメも可能。 |
複数ページ記録、アニメ作れるなど、TIFF、GIF、webp、HEIFはちょっと特殊。
“透過画像”の主流がGIF→PNGとなった理由・経緯
元々はGIF形式が“透過画像”として主流でした。が、現在使用されるとすれば、過去との互換性目的か簡易的なGIFアニメーション位。一般的には。
その昔、権利所有者が最終ユーザーまでも含めて使用料を要求すると突然発表。サブマリン的な騙し討ちで世界中を激怒させたのが主流から格下げされた主な理由。
上記経緯、また、webpが普及不十分なので、現在は、
本サイトでは「まずPNG形式で作成し、必要ならその後GIF形式に変換」て手順で紹介。ほとんど手間なく変換可能。
もう主流でないGIF形式ができること
主流からズリ落ちたにもかかわらず、今も尚よく検索されるGIF形式で作成できるもの詳細。
| 画像 静止画 |
①通常の非透過GIFと②背景を透過する透過GIFが存在。 選択した256色だけ使える形式。同色の連続が多いアイコン画像などで非常に圧縮率が高いのでインターネット黎明期の主流。 「写真はJPEG、アイコンや単色系イラストはGIF」的な。当時の電話回線通信では“画像の情報量”は大障壁でした。 |
| アニメーション | ③通常の非透過GIFアニメと④背景を透過させた透過GIFアニメが存在。 “動画”てより、画像数枚が連結されたパラパラ漫画的なのが一般的。
レディー・ガガ
 |
ついでなので画像関連の用語説明
何言ってるか分からない画像関連の用語。
| 1 | 非圧縮 | “画像”とは情報量が膨大（当然“動画”は更に膨大）。「（Rの明るさ、Gの明るさ、Bの明るさ）ｘ点々の数」←全部ズラズラ羅列したのが“非圧縮画像”。BMPが代表例。 |
| 2 | 可逆圧縮 | 上記“非圧縮”のものを何らかの計算式を使い情報量を少なくしたものの内、逆計算することで“非圧縮画像”に戻せる形式。TIFFで使用可能な圧縮。 |
| 3 | 不可逆圧縮 非可逆圧縮 |
上記“非圧縮”のものを何らかの計算式を使い情報量を少なくしたものの内、情報欠落済で逆計算しても“非圧縮画像”に戻せない形式。非常に情報量少。JPEGが代表例。 |
| 4 | インデックスカラー | 現在の画像ファイルは1千万色以上の色表現が可能だが、その1千万色中で使用可能な色数を例えば256色だけと制限するもの。それにより情報量を少なくできる。PNG、GIFが代表例。 |
| 5 | アルファチャンネル | 画像内に別の“層”を持つような概念。仮想的な面を設定し指定部分に対し特殊な処理を加えることを目的としたもの。“背景透明化”がまさにこれ。透明化する部位をアルファチャンネル内に記録することで透明化を実現。 |
透過画像作成のキモは“背景除去”“外形抽出”
デジタル“画像”とは
デジタル“画像”は必ず横が水平、縦が垂直な四角形。例えばハイビジョン2Kのテレビは水平1920コｘ垂直1080コの点々の集合←大量。点々1コのことを画素、ピクセル、ドット。
例えばお天気お姉さん
ニュースの天気予報。
テレビは1秒間に30枚の画像が移り変わるパラパラ漫画。お天気キャスターがブルーシートの前に立ち、1/30秒の間に次々コンピュータで日本地図と合成→放送。
お姉さんが自分の腕の位置を目前のモニターで確認して調整するのはそのため。
また、青色を使う理由は人間の肌色と真逆の色だから。影や光に当たっても青に変化しにくいので。
青いドレス着るとコンピュータが勘違い→ドレス部分に背後の日本地図を表示することに。ドラえもんがお天気お姉さんになると、
下の動画では黄緑を使ってるようです。“くろまきー？”と呼んでるものです。
このようなやり方を行ってた理由は、以下の条件でコンピュータに簡単命令できるから。
●[条件パターン2]青に近い部分なら日本地図、違うならカメラの映像。
今は動画の例ですが、1/30秒間だけ考えれば静止画像と同じ。「日本地図の合成」と書きましたが早い話が「透明化」。着目すべきは“簡単命令のための簡単条件”。
人間が“簡単”に条件示すための“背景除去”≒透過画像作成
●背景透明化画像＝透過画像、背景透明化の作業＝透過画像作成作業
↓作業が↑のほぼすべてだよと本項で言ってます。
●背景除去＝外形抽出＝輪郭抽出
“背景除去”とは、大量にある画素1コ1コ指し示してられないので、「この色全部」または「これに近い色全部」と条件提示できるようにする作業。
そのために画像中で使用してない1色を利用します。
現在、コンピュータで使える色数は1600万色。少ない環境もあるが膨大な色数であることには変わらないので、画像中で使用されてない色は何色も存在。
除去したい背景部分を使用されてない1色に塗り潰し。この塗り潰し作業が“背景除去”“外形抽出”。
そこまで終わったら、後は「この色透明化してね」とコンピュータに指し示すための1クリック。
つまり、
邪魔な部分を“使用してない1色で塗り潰す作業”＝“背景除去”が透過画像作成作業のほぼすべて。
早い話が、
★透過PNG画像作り方～実写の写真編
作成作業全体の流れ～実写の写真編
こちらは、上記天気予報の項で述べた[条件パターン1]特定の1色を指定する方法。作業全体の流れは、
| PC上で | 0 | 透過させたい画像を準備。 JPG（JPEG）、BMPなど一般的なフォーマット。 |
| 1 | （この作業がほぼすべて） 「背景除去」作業。 画像編集ソフトの“直線ツール”使用して背景を塗り潰し。 |
|
| ↑ サイト上 ↓ |
2 | 1色にした背景色をクリックで指定し、完成した透過PNG画像をダウンロード。
サイトA：PEKO STEPさんの「透過PNG画像作成ツール」使用。 |
| ↑ サイト上 ↓ |
3 | 必要なら透過GIF形式に変換。
サイトB：SphereToolBoxさんの透過画像オンライン作成ツール使用。 （上記が動かない場合）
サイトBも透過PNGを作れるので2番を省略してもOKだが、説明が煩雑になるのでこの手順で。
|
①-1 画像編集ソフト：手動で背景を塗り潰す
たくさんの色が入り込む難易度の高い実写写真の背景除去、外形抽出、輪郭抽出。
ブログの看板とするため、真剣な面持ちで撮影した冒頭の写真を例に説明。
このような実写写真の背景を塗り潰すには画像編集ソフト。
“直線ツール”の太い直線を使って曲線の接線を描いていきます。
遠くでクリックし一点を固定した後、直線が接するようにもう一点をクリック。簡単にきれいになります。接線をたくさん描けば描くほど綺麗に抽出。
これらの接線を真剣な面持ちで描き続け、範囲選択→削除で不要な部分を全て削除していきます。
不要な部分を全て取り除いたら一旦“PNG”形式で保存。
注意点は、透明化したくない部分に背景色（周辺色）と同色が存在しないこと。存在するとそこも透明化するので、バケツツールで背景色側を使用されてない色に変更。
①-2 サイトAで透過PNG形式入手
サイトA：PEKO STEPさんの「透過PNG画像作成ツール」へ移動し、保存したPNG画像を加工します。
これが「この色透明化してね」とコンピュータに指令する場面。
- 上で背景を塗り潰した画像をドラッグ＆ドロップ。
- 透明化させたい背景をクリック。
- ファイル－保存でダイアログが出るのでダウンロード。
ここで目的の“透過PNG画像”入手完了。
“透過GIF画像”が必要なら、この後入手した透過PNG→GIF形式に変換。
★透過PNG画像作り方～図・イラスト編
作成作業全体の流れ～図表・イラスト
こちらは、上記天気予報の項で述べた[条件パターン2]近い色を指定する方法。こちらは“塗り潰す”概念でなく“色範囲を探し当てる”概念。作業全体の流れは、
| PC上で | 0 | 透過させたい画像を準備。 JPG（JPEG）、BMPなど一般的なフォーマット。 |
| ↑ サイト上 ↓ |
1、2 | （この作業がほぼすべて） 「色範囲」の探索作業…※グラデーションによりジャギーっぽくなる輪郭部分をきれいに全部選択するために。下で説明。 サイトC：ブログHPツールさんの「画像透過ツール」使用。 |
| ↑ サイト上 ↓ |
3 | 必要なら透過GIF形式に変換。
サイトB：SphereToolBoxさんの透過画像オンライン作成ツール使用。 （上記が動かない場合） |
②-1 サイトC操作のため覚えるボタン
サイトC：ブログHPツールさんの「画像透過ツール」。
見ればすぐ分かる操作系。
ドラッグ＆ドロップで目的の画像を開きます。画像の準備がまだの場合は練習用画像が用意されております→キャラクターボタン押すとサンプル表示。
また、別画像をドロップし直したい場合はブラウザのリロード更新→最初の画面へ。
その下にコントロールパネル。
探索作業を繰り返すためのA初期化ボタン、最後に保存するためのB画像化ボタン、C色の許容値バーを覚えてしまいます。
Cについて。目的は色範囲探索で、その作業がほぼ全て。
透過させる色を指定しますが、単色に見えても大抵は微妙に異なる色でグラデーション。なので、色範囲なるものを指定し近い色全てを選択します。
その色範囲探索のため、繰り返し操作するのがC色の許容値バー。色範囲の値をスライドバーで指定します。
②-1 サイトC具体的な“色範囲”探索作業
具体的な作業フロチャートは、
| 1 | A“初期化”して、C“色の許容値”変更。 |
| 2 | クリックして境界が綺麗に選択できたか確認。 →（選択できない）1へ戻る。 →（選択できた）B“画像化”で保存し完了。 |
色範囲探索作業とは、上記操作を繰り返し最適なC“色の許容値”を探す作業。
抜きたい色が複数ある場合は、一色完成毎にC“色の許容値”をメモり、次の色で同じ作業→最後に一色づつその許容値で選択し透明化→最後にB“画像化”。
②-1 サイトC“色範囲”探索作業実践
それでは色範囲探索作業です。権利の問題によりここではポク太郎の顔使用。
下の赤矢印C“色の許容値”をスライドバーで適当に動かし、顔の一部分をクリックします。※“拡大鏡”も表示。
| 開始 |
 |
こうなってしまいました。
| 失敗 |
 |
ここで、→A“初期化”→C“色の許容値”を変更→顔をクリック…を繰り返していい感じになる値を探します。
この色の場合は、下の値（色の許容値＝78）まで上げるといい感じになりました。
| いい感じ |
 |
いい値が見つかったので、残りの部分を全部クリックすると、
| 完成 |
 |
出来上がったら、上で憶えたB画像化ボタンを押すと保存用の画像表示→それを右クリック－名前を付けて画像を保存でPCへダウンロード。
ここで目的の“透過PNG画像”入手完了。
“透過GIF画像”が必要なら、この後入手した透過PNG→GIF形式に変換。
★透過GIF画像得るためPNGから変換
（上記が動かない場合）サイトB’：aquapalさんの『Magical Converter』へ。使い方はほぼ同じです。
- 【出力フォーマット】：“GIF(8bit)”選択。
- 【透過色指定】：“手動入力”を選びffffff（fｘ6つ）入力。
- 「参照」ボタンを押し、サイトA、Cから入手した透過PNG画像を指定。
- 全部入力できたら「送信」ボタンを押すと保存ダイアログが表示されます。
保存したら透過GIF画像入手完了。
使う必要ない役立たずペイント3Dでの透過画像作成方法
透過GIF作成の説明ですが透過PNGも同じです。
ペイント3Dで透過GIFを作る
操作方法を説明した動画。“保存”した後、出来上がった透過画像をExcelに挿入して確認しております。
ペイント3Dでの操作。
Windowsってあり得ないトラブルが発生します…。
画面上部のマジック選択を押すとドラッグ可能な白〇が出るので、フォーカスする物体を囲みます。
できたら次へを押し、実際に認識された青緑の枠線を確認。
〇ダメなら上項で紹介した背景除去を手動で行いやり直し。
完了ボタンを押した場合は以下へ。
出現する切り取り（ハサミ）を押して目的の物体のみクリップボードにコピーします。
ここで現在の画像を破棄し、新規作成からファイルを作って貼り付け。操作はCtrl＋V。
キャンバスボタンを押し背景を表示。ここで、もしサイズの大小が合ってない場合は伸ばす縮める、トリミングで切り抜く等行い大きさ調整。
これで透過画像の元は完成。残るは保存作業のみ。
ペイント3Dで透過GIFを保存
上で画像は出来上がったので、次はGIF形式での保存。
選択画面が出るので、
〇透明度にチェック入れる。
これで右下保存ボタンを押せば保存ダイアログが出てきます。
好きな場所に保存して完了です。
学術的な論文投稿。やはりこういう真面目な解説記事書くのは疲れます。
因みにこちらの商品、「幸せになれた」「感激！」「最高！」等、各々が各々の言葉でカスタマーレビュー中にその感動を伝えております。
相棒と呼ぶ方、見る度に「ありがとう…。」と語りかける方まで存在。ここまで大絶賛された商品が他にありますでしょうか。
また、運が良ければ中古品の出品タイミングに遭遇することも。
コメント