2017年11月3日金曜日

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

背景が透明な透過PNG画像を作成できるサイトの紹介と、実写の写真から外形を抽出する際のちょっとしたコツを書きました。
無料で、登録一切なし、簡単操作のサイトを使用します。
ポク太郎です。

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

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


透過色とは

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

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

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

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

また、外形抽出が難しい実写の写真でのちょっとしたコツも紹介します。


透過PNG作成サイト『ブログHPツール』

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

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

サイト上で
1 透過させる「色範囲」を繰り返し探す(※)

※微妙にグラデーションされてる部分を全部選択するために。↓で説明。
2 最終的な透過画像を完成させる
3 完成PNG画像をダウンロード

0.画像の準備は目的のものが既にあるかと。また23は瞬時に終わる操作です。

ですので、作業のほとんどは1.の色範囲の探索になります。上手くいく色範囲を繰り返し探す作業です。


まず触って基本操作を憶える

とりあえず、『ブログHPツール』さんの画像透過ツールのページへ入ります。

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

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


その下に↓のコントロールパネルが表示されます。
透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

まず憶えるボタンは、右の基本操作用4つのボタン。
進む”、“戻る” …作業を取り消したり、進む場合に使用。(アンドゥ機能)
初期化” …画像をドロップしたときの状態に戻します。
画像化” …完成後にダウンロードする画像を表示します。
また、別画像をドロップし直したい場合は、ブラウザのリロード更新をすると最初の画面に戻ります。


色範囲探索用のボタン憶える

↑で書いたように、色範囲探索作業がほぼ全て。

透過させる色を指定するのですが、画像は単色に見えても大抵は微妙に異なる色でグラデーションされています。(特に境界部分など)

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

この色範囲探索のため、↓のボタンを繰り返し操作することになります。なので、こちらも最初に憶えてしまいます。

透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

使用するコントロールは真ん中の4つ。
色モード”“ペンモード” …色範囲、または、マウス操作の選択。
色の許容値” …色範囲の値をスライドバーで指定。
隣接” …チェック外:画像上の全てを、チェック付:独立した部分のみを選択。
拡大鏡” …細部を見るための指定の倍率で拡大された別枠が出現。


さぁ色範囲探索の実践

それでは、色範囲の探索作業です。“色の許容値”を調整して最適値を探していきます。
権利の問題があるので、ここではポク太郎の顔を使用しております。

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

開始 透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

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

失敗 透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

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

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

いい感じ 透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

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

完成 透過PNG画像を作成できる便利サイトとちょっとしたコツ【フリーソフト不要】

出来上がったら、一番最初に憶えた“画像化”ボタンを押すと保存用の画像が表示されます。

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


でも写真の抽出が難しい

上のようなイラスト調の画像はほとんどが単色部位なのでよいのですが、難しいのは実写の写真。たくさんの色が入り込んでいるので。

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

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

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

このような凹みのない外形であれば、画像編集ソフトで抽出だけを行ってしまいます。画像編集ソフト…Windowsに標準添付のペイントで可。直線の描けるものならOK。

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

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

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

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

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

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

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

不要な部分を全て取り除いたら、一旦保存して、
→上で紹介したサイトにドラッグ&ドロップ。
→周辺(今は白)の部分をクリックして透過色指定。
→最初に憶えた“画像化”ボタンを押す。
→表示された画像を右クリック-名前をつけて保存でPCへダウンロード。
で、目的の透過PNG画像の入手完了です。


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

ちなみにこちらの商品↓、非常に安価でありながらギフトラッピングが使用できます。ちょっとした贈り物に最適です。

【関連記事】
アホ→トイレつまりを1分で直すための道具紹介
人気!トイレつまりを1分で直す!【業者不要】
人気!SketchUpで3Dの立体図形を描いてみる
人気!透過GIFアニメが作れる便利サイト【フリーソフト不要】









シェアされると小躍りして喜びます。

0 件のコメント:

コメントを投稿