ウェブ学のすすめ

Study of Web Design & Programing

透過していない画像ファイルを透過pngにする方法


f:id:vinton:20130225000029p:plain

背景が白以外のときに透過pngを使用したくてもクライアントが透過していない画像しか用意できない場合どうしますか?実際そういうケースに遭遇したのでその解決方法を残しておきたいと思います。


まずPhotoshopが会社のPCに入っているのだったらPhotoshopの一択ですが、インストールしていなければ「手軽に透明png」というフリーソフトを使用します。

jpeg(白背景)を透過させたい

↓今回は例としてこのjpeg(白背景)をPhotoshop、「手軽に透明png」で透過させてみます。


f:id:vinton:20130224072144j:plain

Photoshopを使用する場合

↓(1)開いた画像のロックを削除します。
f:id:vinton:20130224235005p:plain

↓(2)自動選択ツールを使用
f:id:vinton:20130224235053p:plain

↓(3)透過させたい部分を選択
f:id:vinton:20130224235052p:plain

↓(4)「Deleteキー」で白背景を削除
f:id:vinton:20130224235051p:plain

↓(5)Web用に保存
f:id:vinton:20130224235050p:plain

↓(6)pngを選択し、「透明部分」にチェック
f:id:vinton:20130224235049p:plain


↓完成品。多少ガサガサしていますが画像サイズが小さければ実用に耐えられると思います。




↓ちなみに普通に透過pngで作成した場合。比べてしまうと...う~ん。



「手軽に透明png」を使用する場合


手軽に透明png 透過png簡単作成フリーソフト(透過gifは作れません)

↓(1)32bit、64bitのいずれかをダウンロードします。
f:id:vinton:20130224235047p:plain

↓(2)解凍したzipのexeを起動します。
f:id:vinton:20130224235046p:plain

↓(3)まず誤差許容度「0」で透過させたい部分を選択した場合。だいぶ白い部分が残っています。
f:id:vinton:20130224235045p:plain

↓(4)誤差許容度「100」で透過させたい部分を選択した場合。いい具合に透過されました。
f:id:vinton:20130224235044p:plain

↓(5)より調整したい場合は、拡大して白っぽいところを1つずつ透過させます。
f:id:vinton:20130224235043p:plain


↓誤差許容度「100」で透過させた場合(手動修正なし)



↓誤差許容度「100」で透過させた場合(手動修正あり)。若干滑らかになりました。