AssetExpress -PhotoShopの画像書き出し-
はじめに
この記事で紹介するのはAssetExpressという、PhotoShopスクリプトの紹介です。筆者がWEB制作経験を積む中で、どうも良い書き出しツールが無かったので自作しました。PhotoshpにはGeneratorという画像書き出しの機能が追加されていますが、これはGeneratorを使わない単体のスクリプトです。なので、細かくは確認していませんが、古いバージョンのPhotoShopでも利用することが出来ます。インストールは以下からお願いします。
https://github.com/Takepepe/AssetExpress
画像スライスの時間、無駄ですよね。
過去、画像書き出し作業はとても時間と労力がかかっていました。
- 画像名を書き出しの度に考える
- 置きたい場所に、既に同じ名前の画像があった。
- 既にある画像の更新はその画像名を調べる
- 書き出した画像を該当ディレクトリに移動させる
- 簡単なスプライト画像も位置を動かして微調整
- Retina用にサイズ違いを用意する
AssetExpressを利用するメリット
- どこに・どんな名前で保存するか考えるのは、最初だけ。
- 冗長な名前をレイヤー1つずつに着けなくて済む。
- 合理的な名前が自然と決まる。(考える必要がない)
- ショートカットを併用して1発書き出し。
- 移動して欲しい場所に直に飛んでいく。
- PSDがhtmlと整合性のある作りに自然となる。
- PSDが整頓され綺麗になる。
- 無料
機能紹介
GithubのリポジトリにPhotoshop用のショートカットを用意してあるので、そのショートカットを割り当てていることを前提に解説していきます。
レイヤーグループ名で画像書き出し
.jpg .png .gif の拡張子が付いたレイヤーグループを書き出しします。グループ内レイヤーの全ピクセルがぴったり収まったサイズで書き出されます。書き出し先は、デフォルトではPSDと同ディレクトリです。以降、拡張子の付いたレイヤーグループを対象グループと呼びます。※レイヤー単体の書き出しには対応してしていません。
Retina対応書き出し
対象グループと同名の画像を@2xサフィックス付きで書き出します。元のPSDは倍の解像度で作る必要があります。ここまでは普通の書き出しツールと機能は変わりません。
親グループ名の継承
親グループの名前を参照し、プレースホルダ「^」を置き換えます。「^」がある限り祖先の名前を参照します。cssプリプロセッサのネストからアイデアを得ているので、それと相性が良いです。上手くネストすると、一つ一つのレイヤーに長い名前をつける必要がなく、名前が競合する機会が減少します。
ファイル名の継承
PSDファイル名を参照します。デフォルトのプレースホルダは「@」です。サンプル画像では親グループを継承しつつPSDファイル名を継承しています。
書き出し先の指定
名前に「/」が入っていると、ディレクトリと見なします。ディレクトリが無い場合は新たにディレクトリを生成します。相対パス「../」で上の階層に書き出すことも出来ます。
書き出し先の指定
PSDと同階層に「psd-config.json」というものを用意すると、書き出しするディレクトリを保持出来ます。"images_dir"に相対パスで指定します。その画像が、何という名前で書き出され、どこに保存されているのか、都度気にしなくても修正出来る様になります。「⌥ ⌘,」のショートカットで該当ディレクトリに「psd-config.json」が新規作成されます。
{
"*.psd":{
"images_dir":"./img/"
}
}
2枚仕立てのスプライト画像書き出し
ボタンのon・offスプライト画像を、それぞれ「on」「off」というグループ名で対象グループ配下に入れると、上下にくっついた状態で書き出しされます。cssメタ言語でスプライトボタンのmixinを用意しておけば、スプライトボタンを作るのは一瞬で済みます。
子階層をまとめて書き出し
スクリプトを発火させた時に選択されているグループ配下の対象グループを全てを書き出します。今のところ、同時に複数枚書き出す方法はこれのみです。孫階層は参照しません。
ドキュメントサイズで書き出し
スクリプトを発火させた時に選択されている対象グループ名で、ドキュメントサイズのまま書き出しします。子階層まとめて書き出しには対応しておらず、PSDで見えている状態をそのまま書き出します。
子フォルダ操作
スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを移動させます。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。
子フォルダの複製
スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを複製します。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。
psd-config.json
AssetExpressの設定を記述するものです。
先に述べたbase_dirの設定の他に、デフォルトでは画像Qualityや色数が指定出来る様になっています。
プレースホルダを別の記号に変えることも出来ます。設定はワイルドカードの他、psdファイル名を指定し、個別に設定を上書きすることが出来ます。jsonを以下の様に記述すると、「img.psd」は「img」ディレクトリに保存され、jpegの書き出し品質は「60」pngは24ではなく8で書き出しされます。
{
"*.psd":{
"images_dir":"./",
"bg_color":null,
"resize_even":false,
"jpg":{ "quality":80 },
"gif":{ "colors":256 },
"png":{ "colors":256, "PNG8":0 }
},
"img.psd":{
"images_dir":"./img/",
"bg_color":null,
"resize_even":false,
"jpg":{ "quality":60 },
"gif":{ "colors":256 },
"png":{ "colors":256, "PNG8":1 }
}
}
Author And Source
この問題について(AssetExpress -PhotoShopの画像書き出し-), 我々は、より多くの情報をここで見つけました https://qiita.com/Takepepe/items/7d848c81d4fbf49a0b14著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .