海外の素晴らしい拡張機能10選

April 3, Sun. By Akira Maruyama

1

まるやま あきら鳥取在住。Web歴15年ほど。CSS Nite in OSAKA実行委員もやってます。

　　 や　　 の拡張機能とか作ってます。

Blog: http://dwlog.net/ @akira_maru

2

•拡張機能のインストール•拡張機能のデモ 10種•まとめ

今日のアウトライン

3

拡張機能のインストール

→指定のフォルダに格納する必要がある

実行ファイルのみ

mxp形式Extension Manager

4

今日紹介する拡張機能コマンドパネル

•Guides panel•CSS Sprite Panel•Gradient Panel

自動シェイプ

•Placeholder

•Tables• Transform Panel

5

コマンド

•Export Selection•Smart Knife•Smart Punch•Fill With Background

今日紹介する拡張機能

6

Demo

7

• Gradient PanelIllustratorライクなグラデーションポイントの設定が指定可能なコマンドパネルhttp://www.adobe.com/devnet/fireworks/articles/gradient_panel.html

• Guides panelガイド作成を強力にコントロールするコマンドパネルhttp://www.adobe.com/devnet/fireworks/articles/guides_panel.html

• Tables表を作成するコマンドパネルhttp://johndunning.com/fireworks/about/Tables

8

• Transform Panelオブジェクトの移動変形に関する操作を集約したコマンドパネル。変形に関する様々な操作を一括で行うことができるパネル。位置指定は小数点レベルで制御可能。（※現在は一部の機能が動作しません。）http://www.senocular.com/fireworks/extensions/?entry=572

• Placeholderアタリ画像の設定が出来る自動シェイプ。サイズ変更すると数値も自動的に変更される。表示させる文字（数値 or 説明文）を変更可能。塗りの色（ヌキ or グレー）を変更可能。http://johndunning.com/fireworks/about/Placeholder

• Smart Knifeパスの形状でオブジェクト（ビットマップ可）を分断するコマンドhttp://johndunning.com/fireworks/about/SmartKnife

9

• CSS Sprite PanelCSS Sprite用画像とCSS、プレビューレポートhtmlを書きだすコマンドパネル。CSS Sprite MakerとToolsの2つのコマンドパネルから構成。CSS画像書き出しは最適化パネルの設定で。 http://www.euchoice.com/blog/2010/12/08/css-sprite-maker-a-useful-fireworks-extension/

• Export Selection画像が重なっていても選択したオブジェクトだけを透過でも書き出しできる。抜きで書き出す場合はpngかgifに限られる。http://johndunning.com/fireworks/about/ExportSelection

10

• Smart Punchオブジェクト（ビットマップ可）の形状で切り抜くコマンドhttp://johndunning.com/fireworks/about/SmartPunch

• Fill With Background選択範囲を背景で塗りつぶすコマンド。ボタンなどでグラデーションの背景の上に乗っている文字を消したりするときに有効。パスでもビットマップでもOK!http://johndunning.com/fireworks/about/FillWithBackground

11

まとめ

12

まとめ•拡張機能の導入でFireworksでの作業の効率化が図れます

• コマンドパネルは入れすぎに注意• コマンドはカスタムキーボードショートカットを割り当てると便利

• がんばって海外の情報にも目を向けよう

13

ご静聴ありがとうございました

14