Home > スポンサー広告 > photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/145-71817591
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

Home > デザイン > photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

aseets1.png

photoshopの「レイヤーからの画像アセット」機能。
前から気になっていたのですが、やっと試せました。
これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの
使い方をすこし解説します。

「レイヤーからの画像アセット」機能で何ができるのか

今までは、psdカンプを作成したあと、「スライス」ツールを使って
スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、
「Web用に保存」ウィンドウを開き、出力設定を行い、
さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。

「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが
上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。

基本の使い方
1. 書き出したいオブジェクトのあるレイヤー名の末尾に「.png」「.jpg」などを追加

2. ファイル>生成>画像アセット にチェックを入れる

3. すると、バックグラウンドでファイルと同じディレクトリに「ファイル名-aseets」というフォルダが勝手に作られて、その中にパーツ画像が保存されます


スライスは、「スライスの範囲」をもとに書き出していましたが、
「レイヤー」をもとに書き出すことになります。

といっても、レイヤー全部を書き出すわけではなくて
「.png」「.jpg」など、書き出したい拡張子をレイヤー名に追加したもののみ出力されますのでご安心を。

レイヤーで定義しておけば、「ファイル>アセットを抽出」ウィンドウで
細かな操作もできます

こちらも、レイヤー名の変更はリアルタイム的に認識します。書き出しサイズを変更したり、書き出さないアセットを決めたりできます。

レイヤー名の命名は、「.(ドット)」や「@」で監視しているようなので、メールアドレスなどの文字レイヤーが認識された場合は、.txtファイルでエラーを吐き出してくれます。

「レイヤー」であれば何でも書き出せる

レイヤーという言葉、なんとなくシングルのシンプルなレイヤーを思い浮かべませんか・・?
どんなレイヤーがOKなのか?と疑問に思っていろいろやってみましたが
なんでもOKっぽいです。

レイヤーグループでも、クリッピングマスクされているレイヤーも、
文字レイヤーも、スマートオブジェクトも、もちろんラスタライズされたレイヤーも。
色調補正レイヤーと、補正がかかっている先もコミコミでOK。

なので、
たとえばクリッピングマスク化しているけど、画像全体を書き出してCSSで制御したい場合は、画像そのものに「.jpg」などをつけて全体書き出し(ドキュメントの外に出てても大丈夫そう)したらよくて、
クリッピングマスク化した部分だけで切り出したいときは
マスク元のオブジェクトと、画像をグループ化して、グループ名に「.jpg」と命名すればいいのです。

つまりは、

1.複数レイヤーの場合は、パーツとして書き出すすべてをグループ化
2.単体レイヤーの場合は、そのままレイヤー名に命名規則を追加

と、このルールさえわかっていればいいのかなと。

= 一気にレイヤーを書き出せる

たとえば、こういうカンプの場合。(フリーのPSDをお借りしました。)
一番上の写真背景のエリアをスライスで切り出すとすると、
前景にあるものを先にスライス化して、そのあと背景に移りますよね。
それが、一気にできます。



aseets5.png


一部ですが、背景の画像と、モバイルナビゲーションの両方を設定できているのがおわかりでしょうか・・。(実際には、ナビゲーションのボタンはfont awasomeでやるほうが今風かもしれませんが、サンプルのため。)
赤枠のパーツ化したい部分が一気に書き出せるのは幸せですね。

= スライドのパーツなど、隠れたオブジェクトも一気に。

大きなアイキャッチスライド、背景スライドのパーツなど、
実際には下にあるけれど、重なりなどでカンプ上に表示されない部分も書き出せるということなんですよね。
カンプ上にこういった情報を入れておけるのはうれしいですね。

パラメータのバリエーション

こちらは、photoshopのヘルプが詳しいです。細かくサイズなども書き出せそうですね。
もちろん、2倍も3倍も0.5倍も自由にできます。
→画質パラメーターとサイズパラメーターの指定(Photoshop ヘルプ)

利用の注意点

注意点とまではいわないかもしれないですが、
レイヤーごとに書き出すため、各レイヤーがクリーンな状態であったほうが使いやすいとおもいます。
レイヤーの整理も、そこそこやっておいたほうが、後で楽かなと思いました。


やり方さえ慣れてしまえば、すごく便利な機能だとおもいます。
ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/145-71817591
Listed below are links to weblogs that reference
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 from バニデザノート

Home > デザイン > photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。