PNG画像の軽量化に活躍!Photoshop拡張機能「PNG Hat」をレビュー

当ページのリンクには一部広告が含まれています。
  • URLをコピーしました!

目次

「PNG Hat」導入まで

プロダクトの有効化

拡張機能の配布サイト「madeby source」から「プロダクトの有効化」を行います。「madeby source」のアカウントが必要なようですね。

「PNG Hat」プロダクトの有効化

新たにアカウントを作成することもできますが、「Facebook」「Twitter」「GitHub」のうちどれかのアカウントを持っていればそのままログイン出来ます。

「PNG Hat」プロダクトの有効化

その後、自分のメールアドレスを入力すると、プロダクトを有効化することができます。

「PNG Hat」プロダクトの有効化

ダウンロード・インストール

下記のボタンをクリックして拡張機能をダウンロードしたら、ダブルクリックしてインストーラを立ち上げます。

「PNG Hat」ダウンロード

インストーラが起動したら、もう一度ダブルクリックしてPhotoshopにプラグインをインストール。その後、Photoshopを再起動したら、準備完了です!

「PNG Hat」インストール

Photoshopで拡張機能「Png Hat」を使ってみよう!

Png Hatを使用するには、メニューバーの「ウィンドウ」→「エクステンション」→「Png Hat」を選びます。

Photoshopで「PNG Hat」を使用

パネルはこんな感じ。左が操作パネルで、右が設定パネルです。

「PNG Hat」パネル

今回は、この花の画像で試してみます!

花の画像

方法はカンタン。書き出す形式、保存先を設定し、レイヤーを選択した状態でパネルの「Export Select Layers」を押すだけ!

9

さっそくPhotoshopで書き出したPNG画像(PNG24)と比べてみます!

「PNG Hat」で軽量化

ガーン…変わらない…。
しかし!「PNG Hat」の威力はPNG24ではなく、PNG8の書き出し時にこそ発揮されるのです!

「PNG Hat」で軽量化

う、美しい…。並べてみると一目瞭然!PhotoshopのPNG8のほうは、サイズは軽いけれどもボックスシャドウのエフェクトがガタガタに…。対して、「PNG Hat」はサイズが小さくなったにも関わらずエフェクトの美しさはそのまま!

「PNG Hat」はPNG8形式でもPNG24のように綺麗に書き出してくれるんですね!
さて、これでさっきのPNG24と比べてみると…。

「PNG Hat」で軽量化

60%くらい小さくなっていることがわかります!見た目はほとんど変わりません。これは嬉しいですねー!

その他の使用感

個人的には画像書き出し時にhtmlやcssなどのコードも生成してくれるのが地味に便利だなと感じました。画像の「width」とか「height」をファイルやPhotoshopから調べるの、少し面倒くさい時ってあるんですよね。

「PNG Hat」でソースコード抽出

また、「scale」を変更すると、任意のサイズで書き出せます。例えば50にすると、1/2のサイズで書き出してくれるので、スマホ用に小さな画像を作成したりする時にも活躍してくれるのではないでしょうか!

「PNG Hat」でRetina対応など

対応フォーマットとしては、JPGも対応しています。画質も選べるみたいなので、こちらも大活躍してくれそうなのですが、私の拡張機能だと設定画面に横スクロールバーが出て選べませんでした…どうしたらいいのだろ。

「PNG Hat」設定パネル

実際には設定画面のスクロールバーの部分は以下の右の図のようになっているようです!

「PNG Hat」パネル

詳しくは、コリスさんの記事でどうぞ!

他にも、登録と同時に1024MBのクラウドが利用できたり、文字列を画像にするという「BASE64」形式で書き出すこともできますよ!

「PNG Hat」で出来ること

いかがでしたでしょうか?重いPNG画像の軽量化が、他のサービスを使うことなく全てPhotoshopだけで完結できたらかなりの制作時間の短縮になりますよね。

「PNG Hat」はPhotoshop CS5から対応しているのも嬉しいところ。私は職場ではCS5を使っているので、ぜひ仕事でも役立てたいと思います。

通常$39.99の有料プラグインですが、それに見合うだけの働きをしてくれるのではないでしょうか。気になった方はぜひ配布サイト「madeby source」でチェックしてみてください!

最後にキャペーンを開催してくださったコリスさん本当にありがとうございました!
以上、彩がお送りしました。

この記事が気に入ったら
いいね または フォローしてね!

この記事をシェアする!
  • URLをコピーしました!

この記事を書いた人

彩のアバター UIデザイナー

自社メディアサイトのUIデザイナーを経てフリーランスとして活動しています。デザイン・コーディングからサイト運営・改善、バナー作成など色々やってました。

4歳の娘がいます。ゴッホとコーヒーとスナフキンが大好き。

コメント

コメント一覧 (1件)

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次