PNGは背景が透明にも対応しているフォーマットです。テクニカルな話ですが、ジャヴァスクリプトで切り抜き画像を合成するような場合はPNGを利用するとハンドリングしやすいです。
PNGとは?
現在ウェブでポピュラーに利用されているファイルフォーマットです。
Portable Network Graphicsの略で、読み方は「ピング」「ピン」です。
うちはピング派です。
JPEGと並び、画像を圧縮して軽量化するため、多くのウェブサイトでもPNGで画像を使っています。
メリットの1つは、アルファチャンネルをサポートです。
背景を透明に設定できる点でもウェブサイトで利用されている理由の1つでしょう。
従来はGIFでやっていましたが、現在はPNGが主流ではないでしょうか。
PNGを見るには?
サファリ、クロームなどのブラウザソフトでみることができます。
ファイルエクスプローラーでも特に機能拡張を入れなくてもファイルプレビューが表示されます。
特に追加ソフトなくても利用できる便利なフォーマットといえるでしょう。
作成ツール
Boxy SVG
Boxy SVGは、ベクター系のSVG作成ツールです。ベクター系の場合、背景が透明な画像を作画しやすいです。
FileメニューからExportを選びます。
PNGで出力で、背景を透明に設定できます。
初期設定でPNG、背景透明となっていますので変更しなくても大丈夫だと思います。
レビューは以下参照ください。
Inkscape
無料ながら豊富な機能を誇るドローツールです。
ファイルメニュー>ドキュメントのプロパティで背景を透明にします。
アルファ(A)の値が0であれば透明となります。
そのうえでファイルメニュー>PNG画像にエクスポートを実行。
ファイルを指定してから「エクスポート」を実行すればオッケーです。
使い方全般はこちら。
フォトショップ、フォトショップエレメンツ
画像編集ソフトの定番です。
フォトショ、あるいはフォトショップエレメンツでは、新しくレイヤーを作りそこへ描画。背景レイヤーの表示をオフにしてから保存したほうがいいです。
ファイルメニューで「Web用に保存」を実行。
PNG形式で、透明部分がチェックされていることを確認してから保存を実行しましょう。
使い方全般はこちら。
Paint.net
昔のフォトショップのような画像編集ソフトです。
こちらもレイヤーをサポートしており、一度レイヤー上に作画して背景を非表示にすることで透明のままの状態を維持します。
SaveAsでPngを選び保存すればオッケー。
使い方全般はこちら。
CorelPainter Essential
CorelPainterでもレイヤーを使って作画し、背景を非表示のままPNGとして保存すると透明背景として保存されました。
使い方全般はこちら。
透過の不具合・疑問点
PNGが透過しない?
グラフィックソフトではPNG出力に対応しているものの、書き出し時にレイヤーを統合したり、処理の過程で透過を無効にするケースがあります。
なぜか透過できない!という場合には、別のグラフィックソフトで透過を試してみるのがいいと思います。
また、フォトショやペイントネットなど、背景を一度オフにしてから保存する必要があります。作業しているキャンバスの背景にチェッカーボードの模様が出ていれば透過されることがわかります。
「ペイント」で透明背景は作れる?
試してみましたが、たぶんできないと思います。