fc2ブログ

Home > デザイン > photoshopでのウェブデザインの勘どころ

photoshopでのウェブデザインの勘どころ

ps.png

Photoshopで複数ページのカンプデザインを展開するとき、ファイルは一括にするのか、それとも1ページごとに作成するのか、その際共通オブジェクトをどう扱うかといったデータ・ファイル管理についてまとめてみました。また、Photoshopでのウェブデザインの際に便利そうなツールや「やり方」も合わせて考えてみました。

1ファイルごとに管理する
ps-1.png


1ファイル=1ページとして管理する方法。コーディングデータとして渡されたときは、こちらのほうがやりやすい気がします。また、カンバスの高さが各ページで違っても平気なので、実用的に思えます。

0:通常どおり元データをデザインする

ベースとなるデザインカンプを作成します。その際、ヘッダーやフッター、サイドバーなど、レイヤーグループの整理をしておきます。

1:スマートオブジェクトでパーツグループを統合して管理する

ヘッダーやフッターなど、「共通パーツ」となっているグループを選択して、右クリックで「スマートオブジェクトに変換」するとひとつのレイヤーとして扱えるようになります。スマートオブジェクトレイヤーをダブルクリックするとパーツのみの編集も可能です。

2:共通パーツを他のページへ反映したいときは「同じ位置へペースト」
[1]コピー元のファイルとコピーさせたいファイルを両方ともphotoshopで開く。
[2]コピーしたいレイヤーを選択して【レイヤーの複製】ダイアログの【保存先】(ドキュメント)のプルダウンでコピーさせたいファイル名を選ぶ。
[3]「OK」ボタンを押すと同じ位置にコピーされる

これを、すべてのページで繰り返します。
この作業も面倒ではあるので、Extentionで共通パーツをpsd化して反映するほうが速いかもしれません。そちらは後で補足します。

3:マウスホバーや、ツールチップの表現に「レイヤーカンプ」を使う
1- 通常通りデザイン一式と、マウスホバーをしたときの画像もレイヤーグループに入れて表示/非表示できるところまで作りこむ
2 - レイヤーカンプで表示/非表示を変えて、各レイヤーカンプを書き出しする

Fireworksでいうところの「ステート」機能のようなイメージで、「レイヤーカンプ」を活用します。レイヤーカンプは、レイヤーの表示/非表示を組み替えて、様々なバージョンを作るための機能。ボタンの変化や、ツールチップなどをすべてひとつのファイルで作成し、グループ化などをしておき、表示/非表示で切り替えてバージョンを作っていきます。

※あくまでもレイヤーの「表示/非表示」によるバージョンの作成なので、「ステート」のように、各ステートで新しいオブジェクトを作る機能ではない、ということを認識しておかなければなりません。

1つのファイルにすべてのビューを統合(できるだけFwに近くする)

この場合、カンバスの高さが変更できない、共通パーツの変化のon/offや位置変更に対応していくとグループ階層が深くなってコーダーさんに渡すときに複雑になる(スマートオブジェクトにしていても、です)というようなことがありますのであまりおすすめはしませんが、やり方として紹介します。

0:通常どおり元データをデザインする

まずは、いつもどおりベースとなるページをデザインします。

1:スマートオブジェクトでパーツフォルダを統合して管理する

レイヤーの量がページ数によってどんどん増えていきますので、まとめられるもの、共通パーツなどはどんどんスマートオブジェクト化していきましょう。

2:共通部分レイヤーグループと、各ページ表示用レイヤーグループを作る

共通パーツのオブジェクトやグループを、「共通パーツ」等の名前にしたグループに入れておきます。
また、各ページ表示用に、グループを作成し、ロックしたりロックを外したりしながら作りこんでいきます。

3:すべて作ってから、レイヤーカンプでページ用に作ったレイヤーグループの表示/非表示を切り替えてカンプを作成する

すべてのパーツ・表示を作ってから、「レイヤーカンプ」機能でページごとの「グループ」を「表示/非表示」に切り替えてレイヤーカンプを作成し、出力します。

*ここで気をつけておかなければいけないのは、いくら表示の雰囲気が似ているとはいえ、「新規ページ」を作っているわけではないということです。先にも書きましたが、「レイヤーカンプ」はあくまでも「バージョン」を管理する機能なのです。

Extension関連

photoshop CCでも使えた、Extentionを紹介します。もっともっと速く作れるようにやりやすい機能拡張を手に入れて、独自のデザイン環境を整えていきましょう。

Trevor Morris Scripts.

レイヤーの検索(英語のみ)、ソート、オブジェクトの複数ボックス展開
オブジェクトの整列、中心に整列が一気にできる(photoshop CCでも可能)
http://pspanels.com/12-new-photoshop-tools-for-cs6/

Linked Smart Objects

psdの共通パーツファイルをスマートオブジェクトとして読み込める
相対パスでは指定できないため、共同で制作する場合は再リンクが必要。
リンクファイルがない場合は、スマートオブジェクトとして作用する。
http://coliss.com/articles/software/photoshop-extension-linked-smart-objects.html

Pixel Dropr

Photoshopでよく使うパーツをどのドキュメントでも利用できるようにするプラグイン
http://coliss.com/articles/build-websites/operation/design/photoshop-plugin-pixeldropr.html

スライス関連
スライスをすばやく作成する

レイヤー>レイヤーに基づく新規スライスでレイヤー書き出し
http://dis.ne.jp/blog/topics/3035.html

スライスの一括リネーム

photoshopで複数のスライスをリネームしながら保存する方法
http://liginc.co.jp/designer/archives/3612

「web用に保存」の際に一気に形式を変更

スライスを全体ドラッグですべて選択できる→そのあと形式変更→すべてのユーザー定義スライスに指定して書き出し

カスタムシェイプでよく使うアイコンを登録しておく

パスで書きだされているアイコンなら、なんでもカスタムシェイプに登録できます。
フリーアイコンセットなどもpsdファイルでシェイプになっている場合は登録しておくと高速に作業できそうです。
aiファイルからのコピペももちろん可能。

よく使うフォントは、「アクション」に登録

よく使うフォントは、アクションに登録しておくとすぐに変換できる
http://chibinowa.net/notebook/ps/fontaction.html

Fireworksは「パッケージ」、Photoshopは「拡張していく器」

私の主観ですが、Fireworksの便利なところって、ある程度パターンや、オブジェクトや、UIパーツや、スタイルが準備されていて、パッケージ化されているところだったんだなぁと感じました。
全部入りだから、使いやすい(場合がある)。そんな印象です。

対してPhotoshopでは、初期段階ではWebデザインツールとしては必要最低限のものしか用意されていません。
しかし、カスタマイズできる伸びしろが非常に大きく感じます。
好きなスタイルや、パターンや、シェイプを作ったり、探したりして登録して、さらにはそれらを使いやすくするためのツールがある感じ。ひとつの小さな箱から、どんどん繋いでいって自分なりの開発環境を整えることで、効率化をはかったり、自分らしいデザインができるようになっているように感じました。
カスタマイズには時間がかかりますし、ブラシやらパターンやら「ライブラリ」がいっぱいあって、管理は必要ですが、それだけ「自由」が与えられているようにも感じました。

みなさんも、自分なりのデザイン環境を整えてみてはいかがでしょうか。。
関連記事

Comments: 0

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

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/91-c01e6217
Listed below are links to weblogs that reference
photoshopでのウェブデザインの勘どころ from バニデザノート

Home > デザイン > photoshopでのウェブデザインの勘どころ

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
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