Webデザインもう怖くない!大規模案件に負けないPSDデータ作成方法Tweetこんにちは、小林です。じきGWですね、今からワクワクしています。Niteの「Webデザインで使うPhotoshop」というテーマの講義を受けてきました。セミナーは今回で2回目の参加でした。セミナーは約2年前のデザイナー成りたての頃で、テーマは同じく「Webデザインで使うPhotoshop」でした。今回はその続編にあたるのですが、今まで知らなかった機能だったり、こんな使い方があったのか~と感じるたくさんの新発見がありました。Design代表取締役)の「実案件で活用できるPhotoshopデータ作成ルール」というセッションが個人的に一番勉強になったので、簡単ではありますがかいつまんでご紹介させて頂きます。中~大規模案件におけるデザイン作成の問題点ペライチのランディングページや、ページ数の少ないサイトならまだしも、数十~100ページを超える、中~大規模な案件ではデザイン作成にいろいろと問題が出てくると思います。(photoshopを使ってデザインカンプを作ることを想定)僕が経験した例を挙げると、デザインルールの徹底が難しい。(特に他の人にページ量産を手伝ってもらう時)共通部分(ヘッダーやフッターなど)、共通パーツ(見出しのあしらいやボタンなど)に修正が入ると大変。いうところが一番ネックでした。カラースウォッチ、文字スタイル、段落スタイルを活用してルールを統一する。例として下記のようなページがあったとします。このページのカラースウォッチは下記のようになります。このスウォッチを他のデザイナーに配布しておけば、カラーのばらつきはなくなるでしょう。文字スタイルと段落スタイルを下記のように設定しました。CCからの機能になります。)文字スタイルに「フォント」、段落スタイルに「サイズ・行間」を設定しています。文字スタイルにまとめて設定もできるのですが、そうなるとピンポイントでの設定となり項目がかなり増えてしまうので、段落スタイルとで分けて重ねがけが効率が良いとのことでした。この文字スタイルと段落スタイルは残念ながらプリセットには登録できないため、他のPSDには継承されません。それぞれのパネルオプションから「文字(段落)スタイルを読み込み」をクリックして、元のPSDを指定すると簡単に登録できますのでご安心を。これだけでかなりルール付けできたのではないでしょうか。あとは基本、マージンなどはしっかりとガイドを引くなりすれば対応できると思います。CCからの新機能になりますが、かなり便利なので御存知の方も多いでしょう。今までヘッダーなどの複数ページに共通するところに修正が入り再度デザイン提出となるとかなり手間のかかることで大変でした。この機能を使えば元のPSDを修正するだけで他ページにも適用されます。このサンプルではヘッダー(header.psd)とフッター(footer.psd)をリンク配置しています。試しにheader.psdの背景色を黒にして保存してみます。すると...はい、リンク設定したpsdに反映されました。これは本当に便利です!より詳しくはこちらの記事が参考になります。見出しのあしらいやボタン、アイコンなどをひとつのPSDにまとめます。(element.psdとしました)この際、各オブジェクトにきちんと拡張子までファイル名に指定しないと画像アセットで生成されませんのでご注意ください。CC)そしてツールバーにある[ファイル]→[生成]→[画像アセット]をクリックすると、PSDと同一階層のディレクトリに、【[PSD名]+-assets】というフォルダができます。この中には、さきほどレイヤーでファイル名を指定した画像がきれいに切りだされています!そしてこれを、さきほどのヘッダー・フッターと同様にリンク配置します。これでもうできたも同然です。「見出しのあしらいの色を紺から赤に変更!」という修正がきたら、element.psd上で修正します。Sで保存するだけです。画像アセットをクリックする必要はありません。これで元にPSDを見てみると...見事に反映されています!最初の準備が若干手間なのでページ数少ない時は不要かと思いますが、ページ数が多ければ多いほど絶大な効果が期待できるでしょう。CCからの新機能ですが...レイヤーの絞り込み機能が備わっています。マウスオン時の画像を作るときはレイヤー(フォルダ)名に「on」としておきます。(ついでにレッドで色もつけときました)そして検索条件を[名前]にしてonという文字列を入力して検索!見事に「on」フォルダだけ絞り込みされました。これとレイヤーカンプ機能を併用すれば、かなり効率アップにつながると思います。CCですが問題もあります。過去バージョンとの互換性が完全ではないところです。リンク配置などはとても協力な機能なのですが、過去バージョンではエラーを起こして開くことができないこともあるそうです。そのためラスタライズするなどして先方へ提出する必要があります。ラスタライズでは修正が効かないためそもそも新機能が使えないこともあります。出て日も浅いCCですので仕方ないかもしれませんが早く多くの人や会社に浸透すれば良いなと思います。Blogこばデザイナーからエンジニアにジョブチェンジしました。双方の視点から、Web制作に関して役立つ記事を書いていければと思います。CSS設計とモーションが好きです。RESERVED.ページTOPへ戻る。