Photoshopの最速の書出し方法って、レイヤーに基づくスライスと思っていたけど、画像アセットだったのか。

最近はWeb界隈はIllustratorを使うことが多いのかな、ずーっとPhotoshopを使うことがなかったのですが(なにかFlashが流行ってた頃がWebでは最盛期だったようなきもする。)

久しぶりに再開っ！ Photoshop、元は写真業の会社にいたこともあり、デジタルの画像処理ソフトで一番触っていかもなのですが、フロントエンドエンジニアとして最近はもっぱらイラレでした。

最近のイラレはアセットパネルへドラッグしてどんどん物を移動して一括でバリエーションも含めて書き出せてとても便利、昔つかっていたスライスには戻れない感じでかなりスムーズに作業ができるようになってきています。

Photoshopはアセットの書出しパネルがなかったので、旧来のスライス切ってからかきだす方法ではつらいなとおもって情報あさっていると画像アセットの生成といのあがあるようなので、使ってみたら便利でした。

使い方

まずは書き出すレイヤーを統合するところから(このあたりはレイヤーに基づくスライスを作るのとほとんど一緒、Photoshopの書出しの肝かなとも思う。

「書き出すパーツを１レイヤーにまとめる。」

ってことをします。ここは、選択ツールで範囲指定でさっとかこって、Cmd + Alt + E (winだと Ctrl + Alt + E )で元のレイヤーを残して統合(残しておくのが味噌)。
そして
そのレイヤーにファイル名をつけます。(png,jpgなど)
そのままファイルメニューにひっそりとある、生成から「画像アセット」を選ぶ。

すると psdファイルのとなりにアセットディレクトリができて、そのなかにレイヤーにつけたファイル名で書き出せます。(これはショートカットはもちろん割り当てたほうが早いです。)

あとレイヤーをいじっててもう一つ便利なのが、右クリックからpngでクイック書出しというものとか、書出し形式ってのもありました。(この辺はもう少し使い込んでみないとなんとも。

ですが、今のところ最速なのは画像アセットの生成っぽいのでしばらく使ってみたいと思います。