BLOG

2014年10月27日/ Photoshop, 画像保存,

【Photoshop】スライスを使わず画像アセットで簡単に画像保存する方法

こんにちわ、エンジニアの宮本です。

エンジニアと言えど、IllustratorPhotoshopなどのソフトも使用します。

これからのエンジニアは、プログラミングだけではなく、こういったデザインソフトもある程度は使いこなせないといけないと思っております。

 

さて、その2つのソフトの使い分けですが、Illustratorは基本的にはイラストを書く、Photoshopは写真加工スマートフォンアプリ画面WEBサイト画面のデザインをするといった感じで使い分けております。

仕事的によく使うのはPhotoshopで、ロゴや写真、アイコンなどをそれぞれ別々の画像として保存するという機会が多いです。

 

Photoshop CS5までは「スライス」機能を用いて画像を切り分けて保存するというケースが多かったですが、CS6より搭載された機能「画像アセット」を使えばもっと楽に画像を保存することができます。

非常に簡単な操作でできるものですが、「まだ知らない!」という方のために、今回はその方法をお伝えしたいと思います。

 

画像アセットを使ってレイヤー毎に画像保存する

Photoshopで下記のようなWEBデザインサンプルを作ったとします。

photoshopで作ったサンプルデザイン

サンプルは、「ロゴ」「ナビゲーションボタン」×3、画像×4(大×1、小×3)といったシンプルなものです。

それを、各レイヤー毎にパーツ単体で画像として保存する場合、各レイヤーに保存したい画像の名前をつけます。

レイヤー毎に保存する画像名をつける

その後、メニューの「ファイル」→「生成」の「画像アセット」にチェックを入れます。

画像アセット

すると、そのPSDファイルがある場所に、「(ファイル名)-assets」というフォルダができ、その中に各パーツそれぞれが画像として書き出されます。

各レイヤーのパーツ画像が書き出される

すごく便利ですよね!

 

ちなみに、レイヤー名を「○○.jpg」として保存すると、画質80%でjpg保存したものと同じになり、「○○.png」とした場合、半透明のアルファチャンネルを持つPNG-24形式で保存されます。

JPEGで画質を変えたい場合は、「○○.jpg5」とすると画質50%のものとなります。(10で100%)

PNGであれば、「○○.png8」とすることで、PNG-8形式で保存することが出来ます。

 

また、「200×100 ○○.jpg」や「200% ○○.jpg」とすることにより、大きさ指定をすることも可能です。

さらに「200% ○○jpg,○○.jpg」といったように「,」で区切った名前にすることにより、2つの大きさの画像を同時に保存できます。

ファイル名の書き方等、詳しくは「Photoshop ヘルプ | レイヤーからの画像アセットの生成」をご覧下さい。

最後に

いかがでしたでしょうか。これまでスライス機能を使って画像を切り出し保存していた方もいらっしゃるかと思いますが、この方法だと画像保存な時間をぐっと短縮できると思います。

私もここ数ヶ月前に知った機能です。

Photoshop等のソフトはちょっとしたところに便利で使いやすい機能が隠れていたりしますので、皆さんもいろいろ調べて少しでも作業時間短縮を図ってみてください!

Resent Posts

Category