困ったー

WIN10・アプリ・ゲームで困ったことを調べてみた

「こまったー」は困ったことを調べたブログです。

オキュラスクエスト2 |  ARK |  フォートナイト |  マイクラ |  サティスファクトリー | 

スポンサーリンク


【Windows 10】PNGを見るには?開くには?背景が透明のPNGを作るには?

◆Paypayならチャージだけでマイナポイント最大5000円還元( アイフォン(iOS) | アンドロイド)

PNGは背景が透明にも対応しているフォーマットです。テクニカルな話ですが、ジャヴァスクリプトで切り抜き画像を合成するような場合はPNGを利用するとハンドリングしやすいです。

PNGとは?

grid1.png

現在ウェブでポピュラーに利用されているファイルフォーマットです。

Portable Network Graphicsの略で、読み方は「ピング」「ピン」です。

うちはピング派です。

 

JPEGと並び、画像を圧縮して軽量化するため、多くのウェブサイトでもPNGで画像を使っています。

 

メリットの1つは、アルファチャンネルをサポートです。

背景を透明に設定できる点でもウェブサイトで利用されている理由の1つでしょう。

従来はGIFでやっていましたが、現在はPNGが主流ではないでしょうか。

 

PNGを見るには?

サファリ、クロームなどのブラウザソフトでみることができます。

 

ファイルエクスプローラーでも特に機能拡張を入れなくてもファイルプレビューが表示されます。

 

特に追加ソフトなくても利用できる便利なフォーマットといえるでしょう。

 

 

作成ツール

Boxy SVG

Boxy SVGは、ベクター系のSVG作成ツールです。ベクター系の場合、背景が透明な画像を作画しやすいです。

FileメニューからExportを選びます。

PNGで出力で、背景を透明に設定できます。

初期設定でPNG、背景透明となっていますので変更しなくても大丈夫だと思います。

f:id:apicode:20191211085316p:plain

 

レビューは以下参照ください。 

apicodes.hatenablog.com

 

Inkscape

無料ながら豊富な機能を誇るドローツールです。

ファイルメニュー>ドキュメントのプロパティで背景を透明にします。

アルファ(A)の値が0であれば透明となります。

f:id:apicode:20191215093814p:plain



そのうえでファイルメニュー>PNG画像にエクスポートを実行。

ファイルを指定してから「エクスポート」を実行すればオッケーです。 

f:id:apicode:20191211231530p:plain

使い方全般はこちら。 

apicodes.hatenablog.com

 

 

フォトショップ、フォトショップエレメンツ

画像編集ソフトの定番です。

フォトショ、あるいはフォトショップエレメンツでは、新しくレイヤーを作りそこへ描画。背景レイヤーの表示をオフにしてから保存したほうがいいです。

 

ファイルメニューで「Web用に保存」を実行。

PNG形式で、透明部分がチェックされていることを確認してから保存を実行しましょう。

f:id:apicode:20191211085721p:plain

使い方全般はこちら。  

apicodes.hatenablog.com

 

 

Paint.net

昔のフォトショップのような画像編集ソフトです。

こちらもレイヤーをサポートしており、一度レイヤー上に作画して背景を非表示にすることで透明のままの状態を維持します。

SaveAsでPngを選び保存すればオッケー。

f:id:apicode:20191211230844p:plain

使い方全般はこちら。  

apicodes.hatenablog.com

 

CorelPainter Essential

CorelPainterでもレイヤーを使って作画し、背景を非表示のままPNGとして保存すると透明背景として保存されました。

f:id:apicode:20191211231123p:plain

 

使い方全般はこちら。  

apicodes.hatenablog.com

 

 

透過の不具合・疑問点

PNGが透過しない?

グラフィックソフトではPNG出力に対応しているものの、書き出し時にレイヤーを統合したり、処理の過程で透過を無効にするケースがあります。

 

なぜか透過できない!という場合には、別のグラフィックソフトで透過を試してみるのがいいと思います。

また、フォトショやペイントネットなど、背景を一度オフにしてから保存する必要があります。作業しているキャンバスの背景にチェッカーボードの模様が出ていれば透過されることがわかります。 

 

「ペイント」で透明背景は作れる?

試してみましたが、たぶんできないと思います。

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ