アイコンやロゴの縮小にはコレ PNG画像の透過設定を残したままリサイズする方法

0705_00.jpg

サイトのロゴやスマホアプリのアイコンには、透過処理されたPNG画像が使われていることが多い。このアイコン画像をリサイズして使おうとしたら、透過処理が無効になったり色が変わったりして、頭を悩ましている人もいるはずだ。

PNG画像の透過処理に対応している画像ソフトといえば、定番のIrfanViewが挙げられる。しかし、IrfanViewで画像をリサイズして保存しようとすると、透過処理を行う色を指定しなければなない。透過部分が黒になっているので、黒色を指定せざるをえないのだが、アイコン全体の黒色が透明になってしまい、全体の色が薄くなってしまうという問題がある。
フリーでPNGの透過処理画像を加工したいなら、GIMPを利用したい。リサイズなどの画像処理を行なっても、透過部分はそのままだ。ウェブサイトやブログの素材として、PNG画像を使う機会のある人は、ぜひ覚えておきたいテクニックだ。

■ 透過PNG画像はリサイズすると色がおかしくなる

png_01-thum.jpg
アイコン画像などによく使われている透過PNG。このPNG画像を普通の画像ソフトでリサイズしてみよう。アイコンのサイズをIrfanViewで変更

png_02-thum.jpg
リサイズした画像をPNG形式のまま保存しようとすると、設定画面が表示される。IrfanViewは透過PNGに対応じている。「透過色を保存」にチェックを入れればいいと思われがちだが……

png_03-thum.jpg
次に、透過色を選択するように指示される。元の画像で透過処理になっていた黒色の部分をマウスで選択する

png_04-thum.jpg
すると、アイコン画像内の黒色の要素がすべて透過処理されてしまう。アイコン画像を実際にウェブにアップしてみると一目瞭然。リサイズ後の画像(右側)は黒色がすべて透過になっているため、全体の色が薄くなっている

■ GIMPなら透過処理はそのままで画像のりサイズが可能

png_05-thum.jpg
PNG画像のリサイズにはGIMPを利用する。メニューの「画像」の「画像の拡大・縮小」をクリックしよう

png_06-thum.jpg
リサイズ後の画像サイズを入力。その他の設定はそのままで「拡大・縮小」をクリック

png_07-thum.jpg
あとはファイル名を指定してそのままPNG形式で保存すればよい。ここまで特別な設定は不要だ

png_08-thum.jpg
保存の際にダイアログが表示される。ここで「透明ピクセルの色の値を保存」にチェックが入っているのを確認。「保存」をクリックしよう

png_09-thum.jpg
こうして保存された透過PNG画像は、サイズが変わっても透過部分は変わらない。右端がリサイズ後のアイコン画像。オリジナルの色合いそのままにサイズだけが変わっている

2013年07月05日 20時45分
©教えて君.net All Rights Reserved.