2012年2月5日開催のFireworks Users Group第3回勉強会でのスライドです。

1. 覚えておいて損はない！
Fireworksの便利なTips特集
FWUG 第3回勉強会
2012.2.5
1

2. 自己紹介
2

3. まるやま あきら
鳥取在住。Web歴15年ほど
FireworksはVer.1から
昨年のCSS Nite LP, Disk 14に登壇
FWUGのコアメンバー
や の拡張機能とか作ってます。
http://dwlog.net/
3

4. 今日の内容
• 書き出し系
• シンボル
• 自動シェイプ
• コマンド
• Illustratorからのインポート
• Illustratorへの書き出し
4

5. 書き出し系
• CS5.1より前でも背景グラデー
ションをきれいに書き出す
• icoファイルを書き出す
5

6. 書き出し系
CS5.1より前バージョンでも背景
グラデーションをきれいに書き出す
• CS5以前、256色以上の色をもつオブジェクトの
gifやpng8の全色割り付けにバグ。
• 1. スライス範囲を狭める
2. 「全色書き出し」で最適化
3. カラーをロック
4. スライス範囲を戻す
5. 再度「全色書き出し」で最適化
6

7. 書き出し系
icoファイルを書き出す
• Webグラフィックスツールなのに何故か対応して
いない
• 拡張機能を利用
Favicon
http://johndunning.com/fireworks/about/ExportAsFavicon
• Windowsは8以上、Macは CS5以上
• Export as Faviconでico書き出し、その他はカンバ
ス作成コマンド。
7

8. 書き出し系
icoファイルを書き出す（おまけ）
実はMacでプレビューでicoに対応済
プレビュー
書き出しで「Microsoft アイコン」を選択
ただしLionでは機能がなくなっている
8

9. 書き出し系まとめ
• CS5.0以前には全色割り付けに
バグがある
• スライス範囲を狭めて必要な色
をロックする
• icoファイル書き出しは拡張機能
で対応（MacはCS5以上で）
9

10. シンボル系
• 劣化の少ない拡大縮小
• シンボル化でブレンド効果が
欠落するバグ
10

11. シンボル系
劣化の少ない拡大縮小
• ビットマップの拡大縮小
→劣化を生じる
• 大きめの素材をシンボル化する
ビ マッ
ット プ シンボル
200%拡大
11

12. シンボル系
シンボル化でブレンド効果が欠落
• オブジェクトに乗算後、シンボル化
ブレンド効果がなくなる！
オブジェクト シンボル化
• ビットマップ化するしかない
12

13. シンボル系まとめ
• 適度に大きめの画像のシンボル
化は、拡大縮小時の劣化を抑え
ることができる
• ブレンド効果を持つオブジェクト
のシンボル化はブレンドが欠落
13

14. 自動シェイプ
• 知っておくと便利（と思う）
自動シェイプ
• 使用するときの注意点
• 9スライスを使うには？
14

15. 自動シェイプ系
自動シェイプとは？
星形、矢印、多角形などの多
彩なシェイプ形状のオブジェ
クトを簡単に作成および編集
することができる
15

16. 自動シェイプ系
自動シェイプとは？
コントロールポイントの移動やプロパティ
パネルでの値の変更で形状などをカスタマ
イズ可能なオブジェクト
16

17. 自動シェイプ系
知っておくと便利（と思う）自動シェイプ
• Sunburst 放射状の形状
http://fireworks.abeall.com/extensions/autoshapes/#Sunburst
• Arc 円弧を描く
http://fireworks.abeall.com/extensions/autoshapes/#Arc
• PlaceHolder 当たりを入れる
http://johndunning.com/fireworks/about/Placeholder
ワイヤーフレーム等で当たりを入れるときに使う。
バージョンアップしてより高機能
17

18. 自動シェイプ系
知っておくと便利（と思う）自動シェイプ
• Multi-Border Rectangle
辺ごとに異なる太さ・色の線を適用する
http://johndunning.com/fireworks/about/MultiBorderRect
• 角丸長方形（標準）
角ごとに角丸を適用できる
18

19. 自動シェイプ系
自動シェイプを使用するときの注意点
• 線の属性は利用できない
Photoshopライブエフェクトのストロークを使う
• 複雑な機能をもつ自動シェイプは
塗り/線を適用しない
• そのままでは9スライスを適用できない
自動シェイプをシンボルにする
19

20. 自動シェイプまとめ
• 自動シェイプは複雑な図形を
簡単に生成できる
• 線の属性は利用不可。代わりに
Photoshopライブエフェクトで
• 9スライスを使うためには自動
シェイプをシンボル化する
20

21. コマンド
• 選択オブジェクトと同じサイズ
の矩形をつくる
• 選択オブジェクトの数ピクセル
拡大・縮小した矩形をつくる
• カンバスサイズと同じサイズの
矩形をつくる
• テキストを選択しただけで
カーニングを可能にする
21

22. コマンド
• 6000x6000pxのカンバス
サイズの制限を変更する
• ダイアログを出さずに10または
100pxずつカンバスサイズの
高さを変える
• コマンドを使ってショート
カットメニューを作成
22

23. コマンド系
カンバスサイズの制限を変更する
• 6000x6000pxのカンバス
サイズの制限を変更する
• ダイアログを出さずに10または
100pxずつカンバスサイズの
高さを変える
• コマンドを使ってショート
カットメニューを作成
23

24. コマンドまとめ
• コマンドは JavaScript &
Fireworks APIで構成されている
• 通常のUIでは制限のかかって
いることを実行可能
• ショートカットと併用で
作業効率UP！
24

25. AIからのインポート
• 画像は72dpiでラスタライズ
して書き出し
• 効果はラスタライズされる
• 文字がずれる
• パスがグループ化
25

26. AIからのインポートまとめ
• 画像は事前にラスタライズ。
配置は無視される
• 効果はラスタライズされる。
透明度設定のあるものは注意
• 文字だけは読み込み時にずれる
詰め設定も変更される
• 1オブジェクトでもグループ化
26

27. AIへの書き出し
• FXGを利用する
27

28. AIへの書き出しまとめ
• FXGを利用して再現性の高い
書き出しが可能
• ただし効果やパターン等を含ん
だオブジェクトはラスタライズ
• 通常書き出しだとAI8レベル。
ライブエフェクトなどは欠落
28

29. おまけ
29

30. Fireworksに関する情報を
配信しています
• The Fireworks Daily News
http://paper.li/akira_maru/1297491883
ハッシュタグ #adobefireworks をチェック！
• Fireworks Lover J
https://www.facebook.com/FireworksLoverJ
30

31. ご清聴ありがとう
ございました
@akira_maru
31