SHIGANAKUNAI

しがなくないデザイナーを目指す備忘録

Photoshopでページ機能を使う

ウェブデザイナーの皆さん、何のアプリケーションでデザイン作業をしていますか?
色んなアプリケーションがありますが、僕と僕の会社はPhotoshop派です。

いろんな方のブログを読んでいるとFireworksもなかなかの評判のよう。
試しに使ってみるとPhotoshopにもIllustratorにも似ていて、レイアウト構成はPhotoshopより格段に使いやすく感じました。

Fireworksの特徴

  • Dreamweaverと連携が良い
  • ベクターデーターを扱いやすい
  • 保存形式がpngなのでデーターをそのまま画像として使える
  • 角丸率の修正が可能
  • ページ機能

調べてみるとこんなに利点があるんですね!テキストの処理や素材の豊富さはPhotoshopに分がありますが、
使いこなせばFireworksのほうがスムーズに作業できそうな気がします!!

しかし慣れとは恐ろしいもの…PhotoshopでやっていることをFireworksで再現しようとしてもうまくいかず挫折しました…orz
Adobe系アプリケーション間でツールや操作の名称を統一してほしいものです!AdobeはFireworks部門にお金を使わせてあげてください…
あと僕が慣れても会社がPhotoshopでの制作を行なっているのでなかなかシフトチェンジしにくいのが現状です。

Fireworksのほうが作業スピード上がりそう!けど使えない…
ですので、Photoshopで作業効率を上げる方法を考えてみました!!

Photoshopでもページ機能っぽいことはできないものか…

Fireworks魅力のひとつ、ページ機能。
サイトを1つのファイルに集約して制作できるので、共通パーツの管理性が高くなり、全ページの書き出しも簡単。ページ数が多い案件で役に立ちそうな機能ですね。

こんなに便利なページ機能、Photoshopでも使いたい!!
それができたら、ページごとにガイドやスライスの位置が微妙に違ったり、新旧の部品がごっちゃになってコーディング作業まで負担が増えることも減らせるはず。
そう思っていろいろ調べているとレイヤーカンプスマートオブジェクトを使うことでページ機能のような事が出来ることがわかりました。

レイヤーカンプでページを切り替える!

まずは1ファイルに複数ページぶんを作っていくのですが、普通であればページごとにグループ分けするだけでした。ここでレイヤーカンプを使い、ページという扱いを作ってみます。
レイヤーカンプは本来、デザインや色違いのバリエーションを見せるときに使うものだそうです。これをページとして使うと、1サイト1ファイルで制作することができました。

Photoshop上部メニューから「ウインドウ」→「レイヤーカンプ」を選択してください。

こんな画面が出てきます。
新規カンプをページ分作成して、そのときに表示するレイヤーを選択します。
ページ内の要素によって位置が変わるフッターやサイドカラムの位置も記憶させることができました。

もちろんページごとの画像書き出しも出来るので、サイトデザイン確認のjpeg書き出しも楽々。
上部メニュー「ファイル」→「スクリプト」→「レイヤーカンプからファイル」でできます。

スマートオブジェクトでレイヤーを結合!

けど1ページでも重たいpsdファイルに複数ページ分つめこむと、ファイルが重すぎて開くのにめっちゃ時間かかりそう…
そんな悩みを解決してくれたのがスマートオブジェクトです。

psdファイルの開くスピードは、ファイルの重さではなくレイヤー数に比例するようです。なのでグループ化しているヘッダーや各ページをスマートオブジェクトにしてしまいます。

スマートオブジェクトはラスタライズと異なり、レイヤーを維持したまま結合できます。ファイルサイズはそのまま(むしろ大きくなる?)ですが何度でも編集できるのです。


スマートオブジェクトのレイヤーアイコンをダブルクリックすると…


こんな風にスマートオブジェクトの中身が編集できます。

編集可能だけどレイヤー数は減るので、例え100MBのpsdファイルでも速く開ける!という仕組みです。

これで1サイト1ページ化完了!!

まとめ

良いところ

  • ファイルを開くのが速くなる
  • 全ページの画像書き出しが簡単になる
  • ガイドが全ページ統一されるので、ページごとの細かいズレや情報の新旧混在を防げる
  • コーディング時の負担が減る

イマイチなところ

  • 扱い方に慣れが必要
  • ファイルを触る前にコピーをとっておいたほうが吉
  • 複数人でファイルを触りにくい
  • スマートオブジェクト化したレイヤーを元に戻すのはちょっと面倒
  • フッターなどの位置は変更できるけど、カンバスサイズは変えられない

てな感じです。
こんなやり方をしている方がほかにいるかわからないし、もっと良い方法があるかもしれません。これは僕の会社の今の作業方法で、僕の立場で考えられる、導入の敷居が低い効率化になりますね。実際これを会社のスタンダードに出来るかもわかりませんがー(笑)

けど他の方の役にたてるようであれば幸いですのでテストファイルを用意してみました。実際触ってみて、ご意見を頂ければうれしいです。

ダウンロード→[download id=”2″]

AKIO KAI

からあげと温泉のまち、大分県出身大阪在住8年目。しがなくないデザイナーを目指してWeb、DTP、映像編集、3DCG、VRとかやってます。

著者の最新記事

HTMLタグはご利用いただけません。