選択されているタグ : Webデザイン

タグを絞り込む : Fireworks ホームページ作成 マークアップ

FireworksはPSDファイルのスライスデータを読み込めます

Fireworks Lover Advent Calendar 2012の9日目の記事です。

こんにちは。hamnalyの矢部と申します。静岡県在住、個人でWeb制作を行なっています。主にフロントエンドの実装(下請け、約60%)と、地元の企業や個人商店さんのサイト構築(直受け、約30%)が業務です。以上、「Fireworks Lover Advent Calendar 2012」向けの自己紹介でした。


Fireworksの「スライス」「書き出し」機能は非常に便利


いきなりぶっちゃけますが、あんまりFireworksが得意じゃないです。ですのでデザインをFireworksで行うことはまずありません。そんな私ですが、スライスと書き出しはFireworksで行なっています。PhotoshopやIllustratorにはないメリットがあると感じているからです。こんな感じです。

  • スライスを重ねることができる(あまり使わないけど)。
  • ページ機能が便利。背景用・ホバー画像用など、ステート的に使ってます。
  • ホットスポットを目的外利用して、余白のサイズを測る・データに残せる。
  • 書き出し時の最適化が、PSなどよりも若干細かい設定ができる。

実際のデータをお見せできないが残念ですが、スライスほかにホットスポットの水色の枠がいっぱいできるのが特徴です。

しかし、支給されるデザインデータはPSDファイル…

残念なことに多くの場合、デザインはPhotoshopで行われています。前述の通り下請けの仕事も多いなかで、支給されるデータのほとんどはPSDファイル(Photoshop)です。

Photoshopのスライスにも便利な機能があります。「レイヤーに基づく新規スライス」です。レイヤー単位で簡単にスライス領域を生成できます。この時にレイヤー効果も含めてエリアを計算してくれます。光彩(外側)やドロップシャドウといった、エフェクトの終端がわかりにくいときに、特に効果的です。

FireworksはPSDファイルのスライスデータを認識できます

さて、デザインデータがPSDファイルで支給された場合、スライスをどうするかは悩みどころです。Photoshop・Fireworksそれぞれに良さがあります。可能なら「合わせ技」をしたいとこです。Fireworksは賢いので、Photoshopで設定したスライスを含むPSDを読み込み、スライスを引き継ぐことができます。

そんなわけで、最近の私のワークフローは「まずPhotoshop上でざっくりスライス → PSDファイルをFireworksで開く → スライスの調整・最適化設定 → 書き出し」という流れで行なっています。PSDファイルをFireworksで開く際に「Photoshopレイヤーを1つの画像に統合」を選びます。あまり複雑なPSDデータはFireworks上で再現されないためです。

ちなみに、CSS3の値で取り出したい時は…

Fireworks CS6は「CSS プロパティ」パネルが非常に便利です。オブジェクトの状態(色やサイズ、枠線、シャドウなど)をCSSの値として書き出せます。もちろんCSS3にも対応しています。これだけでもFireworksっていいなぁと思うわけです。

ではPhotoshopでは…。CSS Hatというプラグインがあります。29.99US$です。こちらはLESSやSaSSなどのCSSプリプロセッサーにも対応しているのがポイントです。

まとめ

Fireworksはスライス以降の作業のためだけに使っても便利です。また、PSDファイルのスライスデータを読み込めるのもポイント高いです。ぜひ使ってみてください。


(2012.12.10 追記)
Fireworks Lover Jの丸山 章さんから、下記のご報告をいただきました。ありがとうございます。

CS5.1のpsdからFireworks CS6で試してみましたが、各スライスの属性は取り込まれなかったので、あくまで範囲選択のみようです。

こちらでもPhotoshop CS6 → Fireworks CS6で検証しました。Photoshopの「スライスオプション」で設定した内容は引き継がれます(「メッセージテキスト」のみ不明…)。しかし「Web用に保存」で設定した書き出しの設定は引き継がれませんでした。

ご参考になれば幸いです。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

プロフィール

矢部 靖人(hamnaly)

いくつかの制作会社でWeb制作やDTPから営業まで経験し、2010年に独立。現在はhamnaly(ハンナリィ)という屋号で、Web制作を中心に地元企業のWeb活用を応援する事業を模索中。理想は高く現実は厳しく、下請け制作を中心に生きています。Knock! Knock! 主催。

エントリーリスト

カテゴリーリスト

タグ