2013年8月24日に開催されたPs / Ai / Fw ガチンコバトル勉強会 in 大阪でのスライド資料。

1. Fireworksで
作成したデータの
リサイクル考察
Akira Maruyama 2013.8.24
ガチンコバトル勉強会in大阪
vs vs
1

2. 自己紹介
2

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

4. @akira_maru MaruyamaAkira
Fireworksの情報も発信してます
The FireworksDailyNews
http://paper.li/akira_maru/1297491883
ハッシュタグ#adobefireworksをチェック！
FireworksLoverJ
https://www.facebook.com/FireworksLoverJ
4

5. 今日のアジェンダ
•過去の資産どうする？
•書き出しテスト
psd、.ai、.fxg 拡張機能（.svg、.rflw）
•まとめ
ガチンコバトル勉強会in大阪
vs vs
5

6. 過去の資産どうする？
ガチンコバトル勉強会in大阪
vs vs
6

7. Fireworksが開発停止
•Illustrator CCのデータが読み込めない
サポートは継続すると言ってますが…
ガチンコバトル勉強会in大阪
vs vs
これは結構痛い…
7

8. 他アプリへの移行検討も…
ほとんどの人はきっと
だよね？
or
ガチンコバトル勉強会in大阪
vs vs
8

9. 過去のデータはどうする？
•fwpngをそのまま再編集可能な形で
読み込めるアプリは現時点では存在
していない
•Fireworksの書き出し機能または
拡張機能に依存するしかない
ガチンコバトル勉強会in大阪
vs vs
9

10. じゃあやってみよう！
ガチンコバトル勉強会in大阪
vs vs
10

11. 書き出しテスト
ガチンコバトル勉強会in大阪
vs vs
11

12. 書き出し方法について
ai（Illustrator 8形式）fxg
svg（拡張機能で）
ガチンコバトル勉強会in大阪
vs vs
PhotoshopやIllustratorで再編集可能な形式
psd
rflw（拡張機能で）
12

13. 13

14. 書き出し結果
ガチンコバトル勉強会in大阪
vs vs
14

15. 書き出し結果
•Photoshop PSD
ファイル > 別名で保存...
オプションで「外観よりも編集性を保持」を選択
ガチンコバトル勉強会in大阪
vs vs
15

16. Photoshop PSD
16

17. 書き出し結果考察
•パス
パスは基本シェイプに変換
シェイプ変換時、線は適用されない
角丸は適用
ベタとグラデ以外は無効に
ガチンコバトル勉強会in大阪
vs vs
•ブレンド
設定は引き継がれる
17

18. 書き出し結果考察
•シンボル
統合される
ガチンコバトル勉強会in大阪
vs vs
•自動シェイプ
パスのみの場合はシェイ
プに、複雑なものは統合
•ライブエフェクト
Fireworksネイティブは7-8割が効果として対応
Photoshopライブエフェクトはすべて適用（ただ
し見た目は少し異なる場合も）
18

19. 書き出し結果
•Illustrator 8
ファイル > 別名で保存...
ガチンコバトル勉強会in大阪
vs vs
19

20. Illustrator 8
20

21. 書き出し結果考察
ガチンコバトル勉強会in大阪
vs vs
•パス
パスは維持
角丸は適用
塗りはベタのみ
線の太さは適用
•ブレンド
無効
•シンボル
パスは維持
•自動シェイプ
パスは維持
21

22. 書き出し結果考察
AI8はアピアランス機能が存在しないので、ライブ
エフェクトは全滅
パスのみ維持
ガチンコバトル勉強会in大阪
vs vs
•ライブエフェクト
22

23. 書き出し結果
•FXGと画像（.fxg）
ファイル > 書き出し...
Adobe flex用のデータ
.fxg経由でIllustratorに取り込み可能（ただしCS6
以下で）
ガチンコバトル勉強会in大阪
vs vs
23

24. FXGと画像（.fxg）
24

25. 書き出し結果考察
ガチンコバトル勉強会in大阪
vs vs
•パス
パスは基本維持
角丸は適用
塗りはベタ、グラデのみ
線の太さは適用
パターン塗りはビットマップに
•ブレンド
設定は引き継がれる
25

26. 書き出し結果考察
ほとんどはビットマップに
ガチンコバトル勉強会in大阪
vs vs
•自動シェイプ
パスは維持
•ライブエフェクト
•シンボル
パスは維持
26

27. 書き出し結果
•svg
拡張機能を利用して行う
Export
http://fireworks.abeall.com/extensions/commands/Export/
Illustratorで取り込み可能
ガチンコバトル勉強会in大阪
vs vs
27

28. svg
28

29. 書き出し結果考察
ガチンコバトル勉強会in大阪
vs vs
•パス
パスは基本維持
角丸は適用
塗りはベタ、グラデのみ
線の太さは適用
パターン塗りの変換は？
•ブレンド
適用されない
29

30. 書き出し結果考察
svgで表現可能な効果のみ再現
Photoshopライブエフェクトは反映されない
ガチンコバトル勉強会in大阪
vs vs
•自動シェイプ
パスは維持
•シンボル
巨大化
•ライブエフェクト
30

31. 書き出し結果
•rflw
拡張機能を利用して行う
Edge Reflow
http://fireworks.abeall.com/extensions/commands/Export/
Edge Reflow用データ
ガチンコバトル勉強会in大阪
vs vs
31

32. サンプルはお見せ出来るレベルではありませんw
ガチンコバトル勉強会in大阪
vs vs
32

33. 書き出し結果考察
ガチンコバトル勉強会in大阪
vs vs
•パス
矩形はボックスに変換
その他はビットマップ
角丸は適用
塗りはベタのみ
線の太さは適用
•ブレンド
適用されない
33

34. 書き出し結果考察
ガチンコバトル勉強会in大阪
vs vs
•自動シェイプ
ビットマップに変換
•シンボル
ビットマップに変換
反映されない
•ライブエフェクト
34

35. まとめ
ガチンコバトル勉強会in大阪
vs vs
35

36. まとめ
•Fireworks pngを再編集可能な状態で
開くアプリはない
•書き出し後の再現性どれもいまいち
•ページ単位での書き出し
•Fireworksが使える間は、Fireworksで
修正して書き出す方がはるかに楽
ガチンコバトル勉強会in大阪
vs vs
36

37. ありがとうございました
@akira_maru
MaruyamaAkira
37