制作DesignPhotoshopTips1ウェブデザイナーの皆さん、何のアプリケーションでデザイン作業をしていますか?色んなアプリケーションがありますが、僕と僕の会社はPhotoshop派です。いろんな方のブログを読んでいるとFireworksもなかなかの評判のよう。試しに使ってみるとPhotoshopにもIllustratorにも似ていて、レイアウト構成はPhotoshopより格段に使いやすく感じました。使いこなせばFireworksのほうがスムーズに作業できそうな気がします!!しかし慣れとは恐ろしいもの...PhotoshopでやっていることをFireworksで再現しようとしてもうまくいかず挫折しました...orzAdobe系アプリケーション間でツールや操作の名称を統一してほしいものです!AdobeはFireworks部門にお金を使わせてあげてください...あと僕が慣れても会社がPhotoshopでの制作を行なっているのでなかなかシフトチェンジしにくいのが現状です。Fireworksのほうが作業スピード上がりそう!けど使えない...ですので、Photoshopで作業効率を上げる方法を考えてみました!!Photoshopでもページ機能っぽいことはできないものか...Fireworks魅力のひとつ、ページ機能。サイトを1つのファイルに集約して制作できるので、共通パーツの管理性が高くなり、全ページの書き出しも簡単。ページ数が多い案件で役に立ちそうな機能ですね。こんなに便利なページ機能、Photoshopでも使いたい!!それができたら、ページごとにガイドやスライスの位置が微妙に違ったり、新旧の部品がごっちゃになってコーディング作業まで負担が増えることも減らせるはず。思っていろいろ調べているとレイヤーカンプとスマートオブジェクトを使うことでページ機能のような事が出来ることがわかりました。レイヤーカンプでページを切り替える!まずは1ファイルに複数ページぶんを作っていくのですが、普通であればページごとにグループ分けするだけでした。ここでレイヤーカンプを使い、ページという扱いを作ってみます。レイヤーカンプは本来、デザインや色違いのバリエーションを見せるときに使うものだそうです。これをページとして使うと、1サイト1ファイルで制作することができました。Photoshop上部メニューから「ウインドウ」→「レイヤーカンプ」を選択してください。こんな画面が出てきます。新規カンプをページ分作成して、そのときに表示するレイヤーを選択します。ページ内の要素によって位置が変わるフッターやサイドカラムの位置も記憶させることができました。ページごとの画像書き出しも出来るので、サイトデザイン確認のjpeg書き出しも楽々。上部メニュー「ファイル」→「スクリプト」→「レイヤーカンプからファイル」でできます。スマートオブジェクトでレイヤーを結合!けど1ページでも重たいpsdファイルに複数ページ分つめこむと、ファイルが重すぎて開くのにめっちゃ時間かかりそう...そんな悩みを解決してくれたのがスマートオブジェクトです。psdファイルの開くスピードは、ファイルの重さではなくレイヤー数に比例するようです。グループ化しているヘッダーや各ページをスマートオブジェクトにしてしまいます。スマートオブジェクトはラスタライズと異なり、レイヤーを維持したまま結合できます。ファイルサイズはそのまま(むしろ大きくなる?)ですが何度でも編集できるのです。スマートオブジェクトのレイヤーアイコンをダブルクリックすると...こんな風にスマートオブジェクトの中身が編集できます。編集可能だけどレイヤー数は減るので、例え100MBのpsdファイルでも速く開ける!という仕組みです。複数人でファイルを触りにくいスマートオブジェクト化したレイヤーを元に戻すのはちょっと面倒フッターなどの位置は変更できるけど、カンバスサイズは変えられないてな感じです。こんなやり方をしている方がほかにいるかわからないし、もっと良い方法があるかもしれません。これは僕の会社の今の作業方法で、僕の立場で考えられる、導入の敷居が低い効率化になりますね。実際これを会社のスタンダードに出来るかもわかりませんがー(笑)けど他の方の役にたてるようであれば幸いですのでテストファイルを用意してみました。実際触ってみて、ご意見を頂ければうれしいです。しがなくないデザイナーを目指してWeb、DTP、映像編集、3DCG、VRとかやってます。[...]返信をキャンセルする。-URLHTMLタグはご利用いただけません。SHIGANAKUNAIページ上部へ戻る。