PNG画像をより美しく、より軽量に最適化するPhotoshopの機能拡張 -PNG Hat
Post on:2014年2月24日
sponsors
Photoshopで作成したものをCSS3に書き出す「CSS Hat」、Subtle Patternsのパターン素材を簡単に利用できる「Subtle Patterns」、各ソーシャルメディアのテンプレートを1クリックで作成できる「Social Kit」などをリリースしているmadeby sourceから、これもまた便利なPhotoshopの機能拡張がリリースされたので紹介します。
PNG Hatは有料の機能拡張で、機能はそのお値段以上の価値がある優れものですよ！
PNG HatはWin/Mac対応、Photoshop CS5以降で利用できます。
PNG Hatの主な特長
PNG Hatは、PhotoshopでのPNG, JPEGの書き出しを強力に最適化する機能拡張で、標準機能と比べ、より美しく、より軽量に書き出すことができます。
当方の環境でもさっそく試してみました。
左から、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にインストールしたので、そのやり方を簡単に。
- ダウンロードした「pnghat-1.0.1.dmg」をダブルクリックします。
- PNG Hatのインストーラーが起動するので、ダブルクリックします。
- あとは、Photoshopを再起動して、完了です。
Photoshopのメニューから[ウインドウ - エクステンション]から、「PNG Hat」を起動します。
左が操作パネル、右が設定パネルです
PNG Hatの他のレビュー記事
PNG Hatのプレゼントを実施し、その当選者さま達のレビュー記事です。
インストール方法や使用感など、参考にしてください！
sponsors
