PNG画像をより美しく、より軽量に最適化するPhotoshopの機能拡張 -PNG Hat

Photoshopで作成したものをCSS3に書き出す「CSS Hat」、Subtle Patternsのパターン素材を簡単に利用できる「Subtle Patterns」、各ソーシャルメディアのテンプレートを1クリックで作成できる「Social Kit」などをリリースしているmadeby sourceから、これもまた便利なPhotoshopの機能拡張がリリースされたので紹介します。

PNG Hatは有料の機能拡張で、機能はそのお値段以上の価値がある優れものですよ!

サイトのキャプチャ

PNG Hat

PNG HatはWin/Mac対応、Photoshop CS5以降で利用できます。

PNG Hatの主な特長

PNG Hatは、PhotoshopでのPNG, JPEGの書き出しを強力に最適化する機能拡張で、標準機能と比べ、より美しく、より軽量に書き出すことができます。

サイトのキャプチャ

PhotoshopとPNG Hatの比較

当方の環境でもさっそく試してみました。

サイトのキャプチャ

左から、Photoshop PNG8(223KB), PNG24(829KB), PNG Hat(419KB)
画像:Rubia

これは書き出した画像をそれぞれ300%に拡大したもので、PNG Hatの画像はクオリティが高く、しかも軽量というのが分かると思います。

より美しく、より軽量の秘密は、使用している3つの圧縮プロセッサです。

PhotoshopではPNG8(インデックスカラー)、PNG24(Trueカラー)、PNG24透過の3種類しかサポートしていませんが、PNGには5種類のイメージタイプがあります。

  • グレースケール
  • Trueカラー
  • インデックスカラー
  • グレースケール(透過アリ)
  • Trueカラー(透過アリ)

このことは画質自体には大きな影響は与えませんが、ファイルサイズ自体に大きな影響を与えてしまいます。PNG Hatではこれらの最適なタイプを自動判別し、最も良いデルタ フィルターを適用し、最も良い圧縮を選択します。

PNG Hatを使うために難しい仕組みをマスターする必要はありません。画像の書き出しは、1クリックでOKです。

サイトのキャプチャ

書き出しの時間も短い!

対応フォーマットはPNG8, PNG24, JPEGだけでなく、Base64にも対応しています。

サイトのキャプチャ

文字列で画像になるBase64エンコードもPhotoshopから作成可能

画像を使用するHTML, CSS, Objective-Cなどのテンプレート用にスニペットを作成することもできます。

サイトのキャプチャ

テンプレートの作成も可

PNG Hatの利用シーン

書き出すだけでも、さまざまなバリエーションが用意されています。

サイトのキャプチャ

まずは、左上のクラウド。登録することで1024MBのクラウドを利用できます。

サイトのキャプチャ

クラウドが心配な人にはもちろん、ローカルも用意されています。

サイトのキャプチャ

対応フォーマットは、PNG8, PNG24, JPEG

サイトのキャプチャ

余白をカットするトリミング機能

サイトのキャプチャ

Retinaディスプレイ用の画像も同時に書き出せます

PNG Hatのインストール

Photoshop CS6 for OS Xにインストールしたので、そのやり方を簡単に。

  1. ダウンロードした「pnghat-1.0.1.dmg」をダブルクリックします。
  2. PNG Hatのインストーラーが起動するので、ダブルクリックします。
  3. あとは、Photoshopを再起動して、完了です。

Photoshopのメニューから[ウインドウ - エクステンション]から、「PNG Hat」を起動します。

PNG Hatのキャプチャ

左が操作パネル、右が設定パネルです

PNG Hatの他のレビュー記事

PNG Hatのプレゼントを実施し、その当選者さま達のレビュー記事です。
インストール方法や使用感など、参考にしてください!

top of page

©2017 coliss