プラカンブログSTAFF BLOG

2015.10.08

画像アセットでスライス書き出し【Photoshop】

フォトショでアセット

弊社ではデザイン作業を今でもFireworksで行っているのですが、実はプラカンに来るまではPhotoshop派だった(な)です。

そんな私が社内のFireworksの波に揉まれながら密かに(主に家で…)使っているPhotoshopのTipsについて書いてみました。

Photoshopの画像アセット機能を使ってみる

 Photoshopの『画像アセット』機能を使うとレイヤー(レイヤーグループ)を利用して簡単に画像が書き出せる!(→今までみたいにひとつひとつ手作業でスライスを設定しなくていい!!!)と聞いて、『それってかなり便利かもー?!』と思い、いまごろだけど使ってみたことをまとめました。

①ファイル>生成>画像アセットにチェックをいれます

assets01

このチェックは最初に忘れず入れるようにします!

②書き出す画像名を設定

assets02

レイヤー(レイヤーグループ)の名前を変更します。
ここでレイヤーにつけた名称で画像が書き出されます。

また名称のあとに拡張子をつけると、指定した拡張子で書き出すことができたり、jpgを書き出すときは『(レイヤー名).jpg80%』とつけると指定したパーセンテージでjpg画像を書き出すこともできます!
すごい!便利!

③アセットを抽出

assets03assets04

②の段階で書き出したいレイヤーを選択し、アセット抽出すると
選択された画像の一覧が表示されます。
この段階で書き出す画像の設定や種類を変更することができます。

④完了!

assets05

画像アセットを抽出するとソースの PSDと同じディレクトリ階層に『(PSD名)-assets』という名前のフォルダが作られ書き出された画像が保存されます。

と、とても簡単に画像が書き出せるのですー!

最後に…

あと、上でも書いたのですが、アセットを抽出する際に書き出す画像の種類やサイズ指定なども簡単にできるのでマルチサイト用に一度に画像の書き出しをすることもできるので、この機能を使いこなせると画像の書き出し作業を効率化させることができるんじゃないでしょうか?!

この記事は、NAGATOMI が書きました。