さて、前回に続き、今回は WebデザイナーのためのAdobe CS6検証会 から Fireworks CS6 の情報まとめです。
Fireworks CS6 は、6月から私と一緒に Webデザインスクール の講師をされる @YumiSora さんから、詳細を詳しくまとめた資料をメールしていただけたのでそれを基に書いています。
Fireworks CS6の進化したところ
CSSプロパティパネル
選択しているオブジェクトのCSSのコピペができるようになりました。
CSS プロパティパネルは、「ウィンドウ＞CSS プロパティ」より表示できます。
CSS3などの慣れないものや特殊なプロパティなど、ある程度ここからコピペして、
手動で改変やGoogle検索で調査のきっかけにするなどのワークフローに使えそうです。
- 線の位置を内側や中央にした場合、線幅を考慮した分、形そのものの width と height のサイズがきちんと変わる
- パネル内の項目を選択し、Ctrl + C（Windowsのみ？）か右クリック、または [選択範囲]をクリックすると単一でコピーできる／[すべて]をクリックするとすべてコピーできる）
- Shift や Ctrl で複数選択→コピーできる
- background-color が 16進数ではなく rgb() なのが謎。rgba() で半透明に対応するため？
- ブラシなど特殊な線でも solid 指定になってしまう。再現不可能ならば表示しないでほしい
CSSスプライト
Fireworks CS6 には画像の CSS スプライト書き出し機能がつきました。
やり方は、長方形スライスを作成し、スライス名（これが id や class 名になるので注意）を指定してから「ファイル＞書き出し」ダイアログの「書き出し:」の横にあるドロップダウンリストから「CSS スプライト」を選択します。
その右側にある [オプション] ボタンをクリックすると↑のようなオプションダイアログが現れ、id にするか、class にするか、接頭・接尾文字などが設定できます。
「レイアウト」の横にあるドロップダウンリストから「グリッド」「水平方向」「垂直方向」など選べますが、ここは画像を縦横に並べるのか、横一列に並べるのか縦一列に並べるのかなどが選べます。
グリッドを選択した場合の配置の順番は謎。隙間を埋めようとしているようにも見えますが…
デフォルトでは、画像同士は隙間10pxでつめられて配置されます。オプションで変更も可能です。
CSS スプライト書き出し機能については、Adobe TV に詳しい動画があります。
色関係
- 塗り、線に個別に透過可能になった、個別プラス全体一括の透過も可能
- カラーコードがマウスオーバーで出る（コピペまではできない？）
- グラデからベタ塗りへの変更がやりやすくなった
- グラデの位置をパーセント指定が可能（小数点は不可能）
スウォッチ
- パネルのサイズを大きくすると面積も大きくなる
- スウォッチの登録色がカラーパネルにも反映される（スウォッチを削除するとカラーパネルからも削除されるので注意。初期化で元に戻る）
- Ctrl + クリックで既存色のカット
- Shift + クリックで既存色の上書き
その他の変更
- スーパーセレクト、サブセレクトの表記が変わった。メニュー「選択＞グループ選択、ダイレクト選択」
- 共有ライブラリの充実。iPhone パーツなどの他、汎用パーツのクオリティも高く実用度高そう
- レイヤーのアイコンで視認性アップ。パス、ビットマップ、シンボルなど
- 「コマンド＞スクリーンショットの撮影」（CS5から？ Winのみ）
- 「コマンド＞現在のドキュメントのデモを表示」HTML と SWF を書き出してスライドデモ的なことができるっぽい
- 「コマンド＞選択＞ベクトルレンダリングエンジンの切り替え」未検証、よく分からない
Fireworks CS6 のいまいちなところ
基本的に従来からの問題点やバグの引き継ぎです。
- 幅 101px と 50px（奇数と偶数）の2つのオブジェクトを選択して中央揃えした場合などにオブジェクトの端がぼける（小数点でアンチエイリアスがかかるため）
- Photoshopライブエフェクトの設定が中途半端。相変わらず描画モードが変更できなかったりグラデーションの変更ができないなど
- シンボルでマスクできない
- 数値入力フォーム内で上下キーで +1, -1 ができない（Photoshop、Illustrator はできる）
PSD データを読み込んだ際、レイヤースタイルの描画モードが正しく反映されない。
例えば、Photoshop で下記のようなデータを作成したとします。
それぞれ、レイヤースタイルでドロップシャドウに乗算、スクリーン、光彩にスクリーン、乗算が指定されています。
当然、乗算の場合は黒背景の上では見えず、スクリーンの場合は白背景の上では見えません。
ところが、この PSD を Fireworks で読み込むとこのようになります。
ご覧のように、レイヤースタイルの乗算やスクリーンが無視されています。
ただし、レイヤースタイルではなくレイヤーそのものの描画モードを乗算やスクリーンにした場合は、下記のように Fireworks でも同じように表示されます。
PSD を Fireworks で読み込んで編集したり、スライスしようと思っている方は注意が必要ですね。
まとめ
CS6になって、PhotoshopもFireworksもかなり操作性があがってきました。
しかし、今でもかゆい所に手か届かなかったり、単一のアプリだけではやりにくい機能もあります。
何よりデザイナー自身のスキルも大事です。
Adobe Creative Cloud により色々なアプリを使うことができるようにもなるので、ひとつのアプリに固執するよりも、状況によって使い分けていくワークフローそのものが大事になるのかなと思います。
Fireworks CS6 関連リンク
- Fireworks CS6体験版を使って驚いてしまった強化点 | Webデザインのタネ
- Fireworksで色を効率よく再利用するにはスウォッチが便利 | Webデザインのタネ
- CSSスプライト書き出し機能の使い方 | ADC – Adobe Developer Connection
- 実際、どうなん？Adobe CS6（5）Fireworks CS6の新機能
- CS6バグリスト | Facebook
