Photoshopの拡張機能 png hatをつかってみました。

Photoshopの拡張機能PNG Hatを使ってみました。

colissさんがツイッターでプレゼント企画をされてたので駄目元で応募してみました。

プレゼント企画に応募してみました。

当選!

見事当選してしまいました。あわわわわ…。

ということでPNG Hatを使ってみた感想を。
インストール方法などはこちらのDesignColorさんのブログ記事に詳しく記載されてましたので参考にどうぞ。

私も実際にインストールして起動してみました。

pnghat設定パネル

すると設定パネルの表示がなんかスクロールバー表示に…。見えないし設定できない。

環境設定

Photoshopの環境設定>インターフェイス>テキストのUIのフォントサイズを「小」にする事で正常に表示できるみたいです。地味に悩んでしまった。

では早速使ってみます。
最近のブログ記事のアイキャッチ画像用に作ったPSDデータをPNGで書きだしてみました。

画像比較

上段:PNG Hat PNG8 300%拡大表示 容量232.6キロバイト
中段:PHOTOSHOP PNG8 300%拡大表示 容量232.6キロバイト
下段:PHOTOSHOP PNG24 300%拡大表示 容量697.9キロバイト

クリックして拡大してみたらわかりやすいと思います。(ちょっと重いですが)
PNG Hatで書きだしたpng8データのクオリティが高すぎる!本当に256色なんでしょうか。
ちょっと暗くはなってますが、Psで書きだしたpng8データと見比べてみても一目瞭然ですね。
Psで書きだしたpng24データと較べてみても、あまり見劣りしません。

次にボタンを作ってみました。
これ書き出しが非常に楽ちんです。

ボタン作成

テキストが違うだけで、ボタン(バナー)の形は一緒っていうよくあるパターン。
シェイプレイヤーと複数のテキストレイヤー用意します。

書き出し方法

シェイプレイヤーと書き出したいテキストのレイヤーを選択して、操作パネルの「Trim」にチェックをいれてボタンを押すだけ。

書き出したボタン

シェイプレイヤーでかたどったサイズに自動的にトリミングしてくれます。
あら簡単!

他のテキストのパターンがほしいならその都度選択してまたボタン押すだけです。
photoshopでweb用に書き出す方法と較べるとだいぶ手数減らせますねー。

写真のクオリティを下げないで軽量に。書き出しも楽ちん。
ECサイト運営されてる方とかにぴったりかもしれません。

どうぞお試しあれ。

コリスさん、ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。