お知らせ・ブログ

HOME > お知らせ・ブログ > WEBクリエイターブログ > 4つのレイヤー整理方法(Photoshop Webデザイン)

CREATORWEBクリエイターブログ

4つのレイヤー整理方法(Photoshop Webデザイン)

レイヤー整理ヴィジュアル

こんにちは。WEBデザイン担当の石村です。

「修正・編集しやすいデザインデータを作る」方法のひとつは、
「レイヤーを整理しておく」ことです。

左図が整理されていない状態、右が整理後

01-1_未整理レイヤー

左の状態ですと、レイヤー単体の修正は出来ても、ひとまとまりのコンテンツ(例:ヘッダー領域etc…)修正が難しいです。
以下整理する際のポイント4つ。

 

1. わかりやすい名前をつける。

「グループ4」「シェイプ5」「長方形102」などのレイヤー名が制作過程で増えていきます。
時間が経つと何のレイヤーなのかわからなくなります。
名前がある方が、オブジェクト選択の際に探しやすくなります。

02-バラバラレイヤー

制作データは自分のものだけではないので、チームの同僚やデータを必要とするクライアントにもわかるようなレイヤー名にしましょう。
日本語でも英語でも、自分や第三者がわかればどちらでもいいです。
例)「ヘッダー」「→」「□」「左サイドナビ」etc…

02-2_整理済みレイヤー

【名付けのタイミング】

  • レイヤーの名前付けはレイヤーを作った段階でやる
  • 名付けに悩むような物であれば、考えている時間の方が無駄になるので無理に名付けなくてもいい。

 

 2. 「◯◯のコピー」は取ってしまおう

・・・「のコピー」…何でもないように思えますが、レイヤーを複製することが多いWebデザインでは、何かと邪魔になります。
「のコピー」表示をしない様に設定しましょう。(Photoshop CS5からの機能です)

  1. レイヤーパレット右上にあるリストメニューに中にある「パネルオプション」を選択します。
    03-1_レイヤーパネルオプション1
  2. レイヤーパネルオプション内、”コピーしたレイヤーとグループに「コピー」を追加”の項目にデフォルトでチェックが入っているので外します。
    03-2_レイヤーパネルオプション2

これでレイヤーをコピーしても「のコピー」は表示されなくなります。

 

3. グループ化(フォルダ格納)しましょう。

「ヘッダーとナビゲーションの位置を変えたい」などの修正が入った時、ヘッダーなどを構成してる数種類のレイヤーが、バラバラに配置されていると、レイヤーを全て選択するだけで一苦労です。

「レイヤーをグループ化する」手間だけ最初にかけてやれば、それだけで修正は楽になります。
05-グループ化

 

4. 不要なレイヤーは削除

「非表示」にしたままレイヤーを放置したままコーダーさんや別デザイナーさんにデータを受け渡す際、何かの弾みで表示させてしまったとき、正しいデザインが何かわからなくなってしまします。

それでも、写真レイヤーなど、候補が幾つかあったりで、削除できないのもあります。
そんな時は…メモを残したり、レイヤー名に情報を書いたりします。
04-注釈ツール

 

まとめ

名前付けたり、グループ化したり、レイヤー削除したり…と、デザインそのものに気を取られ、後回しになりがちな内部整理ですが、
これをやっておかないと、後に修正、編集にもっと時間がかかります。
最初にデザインする段階から、レイヤー整理する習慣を付けておいたほうがいいでしょう。

 

カレンダー
2017年2月
« 1月    
 1234
567891011
12131415161718
19202122232425
262728  
最近の投稿
お問い合せ TEL:0276-60-5440(受付時間:10:00~LAST)/メールのお問い合せはこちら(受付時間:24時間) メールでのお問い合せはこちら

【打ち合わせ等で出張可能な地域】

群馬県

栃木県

埼玉県

茨城県

日本全国どこでも受注可能です。

※上記以外の地域でも、案件の内容によっては出張打ち合わせが可能な場合もあります。お気軽にご相談ください。

ホームページ制作 WEBシステム開発 株式会社ディーアイシー 携帯サイト

お問い合せ

お電話:0276-60-5440

メール:お問い合せフォームはこちら

メールでのお問い合せはこちら