SlideShare a Scribd company logo
1 of 26
Download to read offline
レイヤーの
フィルタリングを
活用しよう!
株式会社Plankton Design
牧下 浩之
2014/6/13
自己紹介
Photoshop歴20年。
CSS Nite LP34 「Webデザインで使うPhotoshop」
に登壇(2014年4月)
牧下 浩之
株式会社Plankton Design 代表取締役
自己紹介
クリエイティブ
ディレクター/
デザイナー
東京造形大学
非常勤講師
デザイナー同士が
プレゼンテーションを
おこなうイベント
DePre!
主催
趣味
コーヒーの
焙煎と抽出
はじめに
レイヤーの
フィルタリングを
活用しよう!
テーマ
フィルタリング機能の概要
フィルター
の種類
フィルター
の条件
切り替え
スイッチ
1)スイッチをON
2)フィルターの種類を選択
3)フィルターの条件を選択・入力
4)結果はリアルタイムで反映
切り替えスイッチを使えば
いつでもフィルタリングを
OFFにすることができる。
フィルタリング機能の概要
フィルターは
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
アイデア次第で
活用の幅は広がります!
よいフィルタリングライフを!
ご静聴
ありがとうございました!
☺

More Related Content

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