You are on page 1of 2

CSS Nite in Ginza, Vol.35(2009.5.

21)

私がPhotoshopでなく
Fireworksを使う17の理由
鷹野雅弘(スイッチ)

はじめに オブジェクトの選択
■ [すべてを選択]コマンドで、複数の文字などを選択できない
アプリ [すべてのレイヤー]
→  (command+option+A)で可能
■ どれを選択しているのかわかりにくい(特に文字列)
ペイント系 ドロー系
(ビットマップ) (アウトライン / ベクター) ■ 選択する直前のインタラクションがない
構成要素 ピクセル パス ■ グループレイヤーをまとめて展開/たたんだり、
Photoshop Illustrator まとめてロック/ロック解除できない
アプリケーション
ImageReady Fireworks
配置したベクトルアートワークを直接編集できない
Web 向けのグラフィック ■ Illustrator からコピー & ペーストしたもの
(スマートオブジェクトとして、
Photoshop Fireworks
Illustrator にスイッチバックして編集は可能)
ピクセルプレビュー ○ ○
最適化 ○ ○
文字入力 / 編集
最適化プレビュー ▲* ○
スライス ▲* ○
■ 次の文字の入力
• Enter キー、または[○]をクリックして確定する必要がある
ボタンなどのスタイル ○ ○
ロールオーバー × ○
■ 文字ツールを選択してないと
テキストエディタからコピー & ペーストできない
アニメーション ▲ ○
ブラウザプレビューへの受け渡し ▲* ○
■ 段落テキスト(= テキストボックス)
の変形時、
文字ツールを選択しておかないと文字が変形されてしまう
[Web およびデバイス用に保存]ダイアログボックス経由
*:
■ [移動]ツールを選択時、ダブルクリックで文字編集できない
• Illustrator、InDesign、Fireworks では共通の操作

Photoshopでない理由 変形
■ 数値指定で変形できない:W(幅)、H(高さ)
1px の直線 ■ バウンディングボックスを使って変形した場合、
■ 100% 以外ではラインツールだとぼける 確定しなければならない
(ピクセルグリッドに吸着するため)
→ [鉛筆ツール] か[長方形ツール]で Fireworksの理由
■ 破線の設定が面倒
プレビュー
枠線だけのオブジェクト ■ 2 ウィンドウ
■ 長方形ツールで描画後、レイヤー効果で境界線、塗りを 0% • 最適化の結果を Fireworks 内でプレビューできる
■ レイヤーパレットで確認する際、
■ 直接ブラウザプレビューできる
対応するオブジェクトが それ とわかりにくい • Photoshop:
(レイヤーカラーが表示されている) [Web およびデバイス用に保存]
ダイアログボックス経由

角丸長方形 属性をペースト

■ 後から角丸の半径を変更できない
■ command+option+shift+V
■ 変形すると角丸部分がゆがむ
■ スポイトツールやスタイルなどを使わずに流用できる

1
整列をキーボードショートカットで設定できる フォームのモックアップ(CS3)
■ 共有ライブラリを利用(Mac OS X/Windows XP 用がある)
コマンド キーボードショートカット
左揃え command+option+1
ページ(CS3/CS4)
上下 縦方向中央揃え command+option+2
右揃え command+option+3 ■ 「1ファイル:1 ページ」でなく「1 ページ:複数ページ」を実現
上揃え command+option+4 • これまではステートで実装していた
左右 横方向中央揃え command+option+5 ■ 各ページで共有のコンテンツ
下揃え command+option+6 • マスター
幅 command+option+7 •[レイヤーを複数ページで共有]
分布
高さ command+option+9 ■ 各スライスから、各ページへのリンク設定が可能
■ リンクを保持したまま PDF に書き出し
ルーラーガイド → PDF ワークフローに(注釈)

■ ダブルクリックしてダイアログボックスが表示されたら
数値を入力できる
ルーラーガイド間で shift キーを押して計測できる
おまけ1

ものさしツールで距離を計測できる(CS4)
Photoshop に勝てない点(解決スミ)
■ ライブ(数値は自動的に変更される) ■ 文字のアンチエイリアス(エッジのスムージング)
→ コーダーへの指示書作成に便利

Photoshop に勝てない点(未解決)
ロールオーバーが簡単
■ グラデーションの品質
■ ステート(フレーム改め)2 に作成し、
■ GIF 書き出し時のカラーテーブル(全色使わない)
スライス後、そのスライスにビヘイビアを設定
■ レイヤーカンプ
■ ボタンシンボル
(レイヤーごとの表示・非表示などの設定を記録)
■ 書き出し時のファイル名は[プロパティ]パネルで設定
■ Fireworks 内でロールオーバーを確認できる その他
→ インタラクティブプロトタイプ
→ インタラクティブワイヤーフレーム
■ Photoshop や Illustrator の読み込み時のカラーは
Fireworks CS4 では保持される
■ Photoshop CS4 では非対応
過去にも実装されていたが、複雑なため、レイヤーで分けて
管理する方が多い おまけ2

スライス Fireworks にできないこと


■ スライスごとの最適化設定 ■ ペーストボード(カンバス以外のグレーの領域)
にオブジェク
• ドキュメント内で設定可能 トを移動すると見えなくなってしまう。
■ スライス名(= 書き出しのファイル名)を 仮置き などで残しておくとき
[プロパティ]パネルで入力できる ■ [HTML の設定]の[ドキュメントの詳細]で、
[スライスオプション]
• Photoshop : ダイアログボックスを フレーム名の接尾辞に「_on」 などを自由に設定できるように
表示する必要がある ( jQuery などへの対応)
■ スライスは「Web」レイヤー内に、 ■ 回り込みのサポート
オブジェクトのように管理されている ■ マージン/パディングのサポート
• 表示 / 非表示のキーボードショートカットは「2」キー ■ 合成フォント
■ 選択しているオブジェクトからスライスを自動作成 ■ OpenType への対応
•[編集]→[挿入]→[長方形スライス]
(option+shift+U)
• 異体字切り替え
• ドロップシャドウが設定されている場合、
■ 「Windows ガンマ」
をドキュメント単位で記憶
自動的に範囲指定できる

9 スライス(CS3/CS4)
■ パーツやビットマップなどを自由に大きさ変更できる