セッション1 「Fireworks派から伝えたい、イマドキのFireworks活用法」 公開スライドです。 ●Stage1 【CMSをプロトタイプとして使う、ワークフローのすすめ】 のスライドは、下記をご覧ください。 http://www.slideshare.net/fuwhat/cnio38-hazama4-28180561 ●Stage2 【Fireworks VS. Photoshop でバナーを作ってみた】 で使用したデータは下記よりダウンロードできます。 http://r360studio.com/cssniteosaka38/cssniteosaka38-moridata.zip ------------------------------------------------------ CSS Nite in OSAKA, Vol.38 「なくなったわけじゃないけど、 Fireworksを使わないワークフローを考えなきゃいけないかも会議」 http://osaka.cssnite.jp/vol38/

1. なくなったわけじゃないけど、
Fireworksを使わないワークフローを
考えなきゃいけないかも会議
Fireworks 派 から伝えたい、
イマドキの Fireworks活用法

2. 今日のアジェンダ
stage 1
CMS をプロトタイプとして使うワークフローのすすめ
stage 2
Fireworks vs. Photoshop でバナー を 作ってみた
stage 3
Fireworks の 現状と 二人が 思うこれからのツール

3. この二人がお届けします
Fireworks が
まるっとわかる教科書を
執筆しました

4. 森 和恵
（もり・かずえ）
「むずかしいことでも、わかりやすく伝
狭間 句美
（はざま・くみ）
Web デザイナー＆イラストレーター。
える」をモットーに楽しく学べるセミ
ナーを開催。今後は、e ラーニングや
などの Web 制作全般、イラストや書
電子出版の形式で、Web 制作を学ぶた
籍の執筆など活動中。
めの教育コンテンツにも注力していく。
神戸を中心に、Web 制作に関わる人
大阪では、ソフト産業プラザ イメディ
のための勉強会やセミナーを開催し
オ iMedio にて、Web 系セミナーを担
ています。
当。
stage 2
デザイン、コーディング、CMS 構築
はざくみと呼んでください。
stage 1

5. http://www.slideshare.net/fuwhat/cnio38-hazama4-28180561

6. stage 2
Fireworks VS.Photoshop
で バナー を 作ってみた

7. Fireworksは、男性的な仕上がり
Photoshopは、女性的な仕上がり
男性的・女性的の表現は主観ですが、同じ設定でも仕上がりが異なり
ます。後日配布するFwPNGとPSDデータを見比べてみてください

8. Fireworks操作は、主にプロパティで

9. Photoshopは、あちらこちらで操作

10. Photoshopで
Fireworksの機能を探してみた
シンボル →
パスツール →
テクスチャ →
フィルター →
グループ →
スライス →
スマートオブジェクト
ライブシェイプ＋属性パネル
パターン塗り
レイヤー効果
レイヤーグループ
Generator（生成）※CCのみ

11. スマートオブジェクト
[ファイル]-[配置]で、Aiファイルを埋め込み連携

12. スマートオブジェクト
ビットマップをスマートオブジェクトに変換し
再編集しても劣化しない（非破壊）状態に

13. ライブシェイプと属性パネル
長方形オブジェクトを属性パネルで再指定可能に
※バグでパネルが表示できない時は、オブジェクトを再選択するか、
オブジェクトのレイヤー名を[Alt]クリック

14. パターン塗り
パターン塗りは、
「Pat」
ファイルで追加
Photoshop, Patternで検索
http://www.melsbrushes.co.uk/?p=1430

15. レイヤー効果（レイヤースタイル）
レイヤーに[レイヤー効果]を付加できる

16. レイヤー効果（レイヤースタイル）
レイヤーに[レイヤー効果]を付加できる

17. レイヤー効果（レイヤースタイル）
レイヤーに[レイヤー効果]を付加できる

18. スタイルパネルで管理
レイヤースタイルを登録し再利用
Photoshop, Styleで検索
「asl」ファイルで追加
http://www.graphicsfuel.com/2011/11/photoshop-retro-text-styles/

19. レイヤー分けとグループ化
• 各オブジェクトが
レイヤーごとに配置
• オブジェクト属性は
レイヤー属性を確認
• グループ化したら
レイヤーグループに
• グループ化は
[Ctrl]＋[G]キーで

20. Generator（生成）※CCのみ
レイヤーグループにファイル名をつけ、
変更時に[○-assets]フォルダへ自動的に書き出し
• png か jpeg 形式
（*.png8や*.png24と拡張子で指定可）
（*.jpg30%と拡張子で圧縮率指定可）
• ファイル名の前に%で倍率指定
（％の後にスペースで区切りを）
• , (カンマ)で区切って複数指定

21. Generator（生成）※CCのみ
自動生成するには、[生成]-[画像アセット]にチェック

22. ご紹介したPhotoshop機能
• スマートオブジェクト→元を保持する
• ライブシェイプ＋属性パネル→パス操作
• パターン塗り→Fwのテクスチャ
• レイヤー効果＋スタイル→Fwのフィルター
• レイヤーグループ→グループ化
• Generator（生成）→自動書き出し

23. ありがとうございました
r360studio
r360studio.com
stage 2

24. Fireworksの 現状と
二人が思うこれからのツール

25. Fireworksは、CCアップデートなし
• CS6は、
サポート継続
▫ セキュリティ更新
▫ バグ修正
▫ 次期OS対応
• 新ツールの開発
▫ Web専用ツール
▫ 新しいワークフロー
▫ Future Web Tools
http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html

26. Fireworksは、最後まで使い倒す
数年はサポートが継続されそう
いままでのテクニックを捨てずに使えばいい
相手に合わせる
• チーム作業時は、
• Illustrator CCからのコピペができない

27. よい機会なので、他も使ってみる
いろんなソフトを知って、
適材適所で使い分け
•Photoshop派（ビットマップ操作が楽）
•Illustrator派（レイアウトの自由さ）
•その他（ Sketch… ）

28. Adobeの次期ツールに期待する
上条晃宏さんのブログ
「PsやAiから、
Fwへ移行
するWebデザイナーの数は
少なくない. Fwのような
ツールの重要性は高まっ
ている」
http://cuaoar.jp/2013/05/firewoks.html

29. 他の次期ツールに期待する
Fireworks開発者の1人
Alan Musselman氏が
デザインツール開発中
UnderDog
http://tribaloid.com/

30. ワークフローの変化に合わせて
柔軟さが求められる…
ひとつを突き詰める専門性もいいけど
「固執したり、
視野がせまく」なると
この業界は生き残れない
「楽しく、
興味を持って、
チャレンジ」しよう！
やればやるだけ、
得られるはず

31. ありがとうございました
森 和恵
狭間 句美
r360studio
hazakumi
r360studio.com
fuwhat.com
stage 3