レイヤーの
フィルタリングを
活用しよう!
株式会社Plankton Design
牧下 浩之
2014/6/13
自己紹介
Photoshop歴20年。
CSS Nite LP34 「Webデザインで使うPhotoshop」
に登壇(2014年4月)
牧下 浩之
株式会社Plankton Design 代表取締役
自己紹介
クリエイティブ
ディレクター/
デザイナー
東京造形大学
非常勤講師
デザイナー同士が
プレゼンテーションを
おこなうイベント
DePre!
主催
趣味
コーヒーの
焙煎と抽出
はじめに
レイヤーの
フィルタリングを
活用しよう!
テーマ
フィルタリング機能の概要
フィルター
の種類
フィルター
の条件
切り替え
スイッチ
1)スイッチをON
2)フィルターの種類を選択
3)フィルターの条件を選択・入力
4)結果はリアルタイムで反映
切り替えスイッチを使えば
いつでもフィルタリン...
フィルタリング機能の概要
フィルターは
8種類
フィルタの種類
種類 概要
種類 レイヤーの種類
効果 レイヤー効果
モード レイヤーの描画モード
スマートオブジェクト スマートオブジェクトや配置されたオブジェクト
属性 表示状態やマスクやリンクなど
名前 レイヤーの名前
カラー レイヤーの...
フィルタリングの
活用事例 主に
名前
名前によるフィルタリング
レイヤーには名前をつけましょう。
(テキストレイヤーを除く)
• レイヤーグループには構造・要素名
• レイヤーには部位名
そのレイヤーが何であるかが
わかるような名前をつける。
の前に
フィルタリングを意識した命名で...
①キーカラーの制御
キーカラーで統一したいレイヤーに
同じ名前を付けておく
“∼_styleA”
キーカラー
①キーカラーの制御
キーカラーで統一したいレイヤーの
カラーを一括で変更
“_styleA”で
フィルタリング
する
フィルタリング
したレイヤーに
新たにキーカラ
ーを適用する
“∼_styleA”
①キーカラーの制御
さらに
レイヤースタイルならスタイルパネルで管理していれば
一瞬で切り替え
②表示状態の切り替え
それぞれの案で使用するレイヤーに案の名前をつけておく
“planA”
“planB”
<複数案の切り替え>
planA planB
それぞれの案で使用するレイヤーの表示を即座に切り替え
“planA” “planB”
“planA”を表示
“planB”を非表示
“planA”を非表示
“planB”を表示
②表示状態の切り替え
それぞれのステートで使用するレイヤーに
ステートの名前をつけておく
“_up”
“_over”
<ステートの切り替え>
通常時 マウスオーバー時
“_up” “_over”
“_up”を表示
“_over”を非表示
“_up”を非表示
“_over”を表示
それぞれのステートで使用するレイヤーの表示を
即座に切り替え
さらに
レイヤーカンプに記憶させておけば
一瞬で切り替え
“_up”を表示
“_over”を非表示
“_up”を非表示
“_over”を表示
“_up”
“_over”
③不要なレイヤーのクリーンアップ
フィルタの種類:属性
フィルタの条件:空白
<空白レイヤーの削除>
空白のピクセルレイヤーや
空白のテキストレイヤーを
フィルタリング
JSXの「すべての空白レイヤーを削除」では
空白のテキストレイヤーは削除さ...
③不要なレイヤーのクリーンアップ
フィルタの種類:属性
フィルタの条件:非表示
<非表示レイヤーの削除>
非表示のレイヤーを
フィルタリング
非表示にしておきたいけれど残しておきたいレイヤーを
格納しておくためのレイヤーグループ“//”を用意し...
レイヤー名を
計画的につけていくために
レイヤーパネル
オプションの見直し
レイヤーパネルオプション
“コピーしたレイヤーとグループに「コピー」を追加”
のチェックをはずす
レイヤーを複製した際
レイヤー名が“∼のコピー”
となってしまう場合は
レイヤー名を一括で変更する
エクステンション1
選択中のレイヤーの名前を一括で書き換えたり、
既存の名前を活かしたまま、末尾に任意の文字を
追加することができる。
Renamy
http://www.renamy.com
レイヤー名を一括で変更する
エクステンション2
画像アセット機能を使用するための
レイヤー名の接尾辞の変更を
簡単におこなうことができる。
Adobe Layer Namer
Adobe ExchangeからDL
アイデア次第で
活用の幅は広がります!
よいフィルタリングライフを!
ご静聴
ありがとうございました!
☺
Upcoming SlideShare
Loading in...5
×

【Photoshop】レイヤーのフィルタリングを活用しよう!

5,486

Published on

Published in: Design
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,486
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
12
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

【Photoshop】レイヤーのフィルタリングを活用しよう!

  1. 1. レイヤーの フィルタリングを 活用しよう! 株式会社Plankton Design 牧下 浩之 2014/6/13
  2. 2. 自己紹介 Photoshop歴20年。 CSS Nite LP34 「Webデザインで使うPhotoshop」 に登壇(2014年4月) 牧下 浩之 株式会社Plankton Design 代表取締役
  3. 3. 自己紹介 クリエイティブ ディレクター/ デザイナー 東京造形大学 非常勤講師 デザイナー同士が プレゼンテーションを おこなうイベント DePre! 主催 趣味 コーヒーの 焙煎と抽出
  4. 4. はじめに
  5. 5. レイヤーの フィルタリングを 活用しよう! テーマ
  6. 6. フィルタリング機能の概要 フィルター の種類 フィルター の条件 切り替え スイッチ 1)スイッチをON 2)フィルターの種類を選択 3)フィルターの条件を選択・入力 4)結果はリアルタイムで反映 切り替えスイッチを使えば いつでもフィルタリングを OFFにすることができる。
  7. 7. フィルタリング機能の概要 フィルターは 8種類
  8. 8. フィルタの種類 種類 概要 種類 レイヤーの種類 効果 レイヤー効果 モード レイヤーの描画モード スマートオブジェクト スマートオブジェクトや配置されたオブジェクト 属性 表示状態やマスクやリンクなど 名前 レイヤーの名前 カラー レイヤーのカラーラベル 選択済み 選択中のレイヤー ドキュメント パネル上の見た目・ レイヤーの属性 ユーザが 任意に設定 できる
  9. 9. フィルタリングの 活用事例 主に 名前
  10. 10. 名前によるフィルタリング レイヤーには名前をつけましょう。 (テキストレイヤーを除く) • レイヤーグループには構造・要素名 • レイヤーには部位名 そのレイヤーが何であるかが わかるような名前をつける。 の前に フィルタリングを意識した命名で さらに効率アップ!
  11. 11. ①キーカラーの制御 キーカラーで統一したいレイヤーに 同じ名前を付けておく “∼_styleA” キーカラー
  12. 12. ①キーカラーの制御 キーカラーで統一したいレイヤーの カラーを一括で変更 “_styleA”で フィルタリング する フィルタリング したレイヤーに 新たにキーカラ ーを適用する “∼_styleA”
  13. 13. ①キーカラーの制御 さらに レイヤースタイルならスタイルパネルで管理していれば 一瞬で切り替え
  14. 14. ②表示状態の切り替え それぞれの案で使用するレイヤーに案の名前をつけておく “planA” “planB” <複数案の切り替え> planA planB
  15. 15. それぞれの案で使用するレイヤーの表示を即座に切り替え “planA” “planB” “planA”を表示 “planB”を非表示 “planA”を非表示 “planB”を表示
  16. 16. ②表示状態の切り替え それぞれのステートで使用するレイヤーに ステートの名前をつけておく “_up” “_over” <ステートの切り替え> 通常時 マウスオーバー時
  17. 17. “_up” “_over” “_up”を表示 “_over”を非表示 “_up”を非表示 “_over”を表示 それぞれのステートで使用するレイヤーの表示を 即座に切り替え
  18. 18. さらに レイヤーカンプに記憶させておけば 一瞬で切り替え “_up”を表示 “_over”を非表示 “_up”を非表示 “_over”を表示 “_up” “_over”
  19. 19. ③不要なレイヤーのクリーンアップ フィルタの種類:属性 フィルタの条件:空白 <空白レイヤーの削除> 空白のピクセルレイヤーや 空白のテキストレイヤーを フィルタリング JSXの「すべての空白レイヤーを削除」では 空白のテキストレイヤーは削除されない
  20. 20. ③不要なレイヤーのクリーンアップ フィルタの種類:属性 フィルタの条件:非表示 <非表示レイヤーの削除> 非表示のレイヤーを フィルタリング 非表示にしておきたいけれど残しておきたいレイヤーを 格納しておくためのレイヤーグループ“//”を用意しておく。 非表示レイヤーを削除する際、 “//”レイヤーグループを除外する。
  21. 21. レイヤー名を 計画的につけていくために
  22. 22. レイヤーパネル オプションの見直し レイヤーパネルオプション “コピーしたレイヤーとグループに「コピー」を追加” のチェックをはずす レイヤーを複製した際 レイヤー名が“∼のコピー” となってしまう場合は
  23. 23. レイヤー名を一括で変更する エクステンション1 選択中のレイヤーの名前を一括で書き換えたり、 既存の名前を活かしたまま、末尾に任意の文字を 追加することができる。 Renamy http://www.renamy.com
  24. 24. レイヤー名を一括で変更する エクステンション2 画像アセット機能を使用するための レイヤー名の接尾辞の変更を 簡単におこなうことができる。 Adobe Layer Namer Adobe ExchangeからDL
  25. 25. アイデア次第で 活用の幅は広がります! よいフィルタリングライフを!
  26. 26. ご静聴 ありがとうございました! ☺
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×