【Photoshop】絶対効率上がるから、レイヤーの整理整頓しよう

2016.02.09 WEB/デザイン ,


どうも私です。

今日はWEBデザインに欠かせない、Photoshopの「レイヤーの整理整頓」について書いて行きます。
これ、個人的にはほんとに気を遣ってます。まじで。

別に大したことではないような、どうでもいいような、でもかなり重要な気もする、そんなお話ですが、割とおざなりにしている人もいるのでは?ということで。

Photoshopレイヤー整理整頓術で「あの時の自分、マジ感謝。」

早速ですがデザインを作りながら、私の普段やっている方法を紹介します。術という程ではない。
1点ご注意頂きたいのですが、命名規則だったりグループの分け方など、あまりシビアになるとかえって面倒になってしまいます。
ということで個人なら個人、チームならチームで「ふんわり」とルールを決めていくのが良いかと!

POINT01 : レイヤー、グループに名前を付ける

photoshop-layer01

サイトのロゴが左上にあって、直下にナビゲーションを配置しました。
とりあえずまとめられるものはグループ化します。そして名前を付けておきましょう
普段の生活でもそうですが何でも「後回し」にすると大体やらないっすよね~。というわけで整理しながらデザインを進めましょう。

POINT02 : 要素の順番を決めておく

これも「ふんわり」と決めておく程度で良いと思いますが、
レイヤーおよびグループを「下から上」に並べるか「上から下」に並べるか。

私は基本的に上にあるものから順番に作っていきますので、「下から上」に並べます。
ほんとにふんわり、ざっくりとで良いので決めておきましょう!

POINT03 : ざっくり、しっかり、グループ分け

photoshop-layer02

当ブログもそうですが、よくあるパターンの2カラムレイアウトを作っていきます。
左が記事一覧、右には広告が入ったりカテゴリの一覧が入ったり、という想定です。

とりあえず必要な要素を作って、命名、グループ化!

photoshop-layer03

コーディングの事を考えて、記事の部分は「article」としました。
それからサムネイルを「thumb」、続きを読むボタンは「btn」、という感じで。

そしてさらにグルーピングしてみます。

photoshop-layer04

左カラムを「primary」、右カラムを「secondary」としました。
この辺りの命名はひとそれぞれ、人生色々、idもclassも色々だと思いますので自由に。

ちなみに前述した「article」はスマートオブジェクト化しました。
フォントサイズとか、ボタンの色を変えたりとか、一括で編集できるので繰り返しの要素はスマートオブジェクトにしておくと吉です。

小技 : グループを一気に開く、一気に閉じる

ガンガンにグルーピングし始めるともちろん階層が深くなってきます。
そんな時はAlt(Option)キーを押したまま、グループの▼をクリック!

clickwith-alt-option
そのグループの中が階層に関わらずオープン/クローズします。ババッ!ババッ!という感じです。
編集してないグループはきっちり閉じておくと作業しやすいですよ~

POINT04 : マウスオーバー状態を色付けで分かりやすく

photoshop-layer05

マウスオーバーのときはこの画像、とかこの色にしてね~とかいう場合にはそのレイヤー/グループに色を付けておきます。
ここでは「navigation>nav」のひとつを「nav_o」として作成、レイヤーを赤で色付けしました。

もちろん「_hover」とか「_on」でも良いですし、グリーンにしても紫にしても良いと思います。
とにかく「マウスオーバーはこの名前で、この色!」と統一しておけばオッケー。

小技 : 「のコピー」を表示しない

レイヤーやグループを複製したときに名前に付く「のコピー」、これ要らないと思うんですけどどうでしょう?
要らない人はレイヤーパネルの右上のメニューを開いて、「パネルオプション」の【コピーしたレイヤーとグループに「コピー」を追加】のチェックを外しておきましょう~。

no-copy

まとめ

ひとことで言うと自分なりにルールを決めること、でしょうか。
あとは他人が見たときのことをある程度考えておくと良いと思います。

サイトって納品したあと、絶対修正とか追加とか入りますよね。
それが納品から3ヶ月後だったり、半年後だったり、1年経ってたり・・・そこでPSDを開いた時、整然と並ぶレイヤー/グループたち!
1年も経った頃には「作った自分」と「今の自分」は他人のレベルで何も覚えてなかったりします。
あの時の自分、マジ感謝~!ってなるので、整理整頓、しといた方が良いっすよ!!

地方都市の片隅に生息する音楽好きウェブデザイナーです。
2,3ヶ月に1度のペースで部屋を改造したい欲望に駆られる持病を持っています。趣味はビールを飲みながら料理をすること。