イメディオ・ＷＥＢ技術セミナー：Web用画像加工が好きになる！ 「Adobe Fireworks CS6 使いこなしテクニック」で使用したスライドです。 【セミナーフォローアップ】 http://r360studio.com/fireworks/imedio.html

1. 使いこなしテクニック
「よくわかる Fireworksの教科書」著者
狭間句美（ 株式会社ふわっと）
森和恵（ r360studio ）

2. 冒頭
挨拶
本日の講座内容
• AdobeFireworksについて
• Fireworksデザインテクニック
– 狭間句美（ 株式会社ふわっと ）
• Fireworks時短テクニック
– 森和恵（ r360studio ）
• 書籍紹介とプレゼント

3. Theme1
AdobeFireworksについて
Fireworksの特徴
わたしのFireworksの好きなところ

4. Theme1
Fireworksは、
Webサイト制作で必要な画像
を作るのに特化したソフト

5. Theme1
Fireworksは、
オブジェクトを選択し、
直感的に操作ができる
オブジェクト単位で独立
プロパティインスペクタ―

6. Theme1
ビットマップとベクター（パス）を操作できる

7. Theme1
4アッププレビューで見比べながら
Web用グラフィック
作成に特化している
• JPEG／GIF
• PNG

8. Theme1
ビットマップ(Photoshop)とパス(Illustrator)
操作がよい具合に混在する軽快なソフト
2?
80,500 83,160 37,177
※参考価格は本日のAmazon調べ

9. Theme1
AdobeCreative Suiteについてる
Design & Web Premiumなら、
Fireworksもインストール済み
PhotoshopやIllustratorとのコラボも！

10. Theme1
ここが好き！Fireworks
Web用に作られたソフト 写真加工とレイアウト
だから、全体的に使いや が一本化できるところ
すい！ （めんどくさがり）

13. Practice
3
コーヒーカップを描く
主な使用ツール
楕円形ツール
ダイレクト選択ツール
パスの合成（P67）
パスを分割
パスの交差
自動シェイプツール
ペンツール

14. Practice
3
（P67）
元のオブジェクト
パスの合体
パスの型抜き
パスを分割
（P43）

15. Practice
7
イメージ画像の作成
写真の合成方法
写真補正について
レベル補正 （P268）
アンシャープマスク（P271）
グラデーションマスク（P245）
画像に文字を入れるときの工夫 （P251）
フィルター：[ドロップシャドウ][光彩]
文字詰め（カーニング）について（P251）
使用したフォント （P253）
Champignon http://www.dafont.com/champignon.font

16. Practice
7
写真はそのまま使わず、レベル補正で美しく
アンシャープマスクでぼやけた写真をハッキリさせる
（P242）
「文字が読みやすい」か、
「読みたくなる文字」か確認しましょう。
開きすぎている部分にカーソルを入れ
［Ctrl（command）］＋［左右］キー
詰めたい方向に左右矢印キーを押すと、
カーニング（文字間隔）の値が10ずつ変化します。

17. そのためにはどうすればいいか自分で考えて
実践していきましょう！

20. もり かずえ
森 和恵 r360studio
「難しいことでも、わかりやすく伝える」
をモットーに
楽しく学べるセミナーを開催
Facebookページ
r360study
eラーニングや電子出版の形式で、
Web制作を学ぶための教育コンテンツを配信予定

21. Lecture
Fireworksで時間短縮とは？
「データの再利用」をすること
面倒でも、登録／管理する

22. Lecture3
使用色管理は…
「スオッチ」パネル
色を選択で表示されるパネルに
オリジナル色を登録

23. Lecture3
テーマカラーをスオッチに登録
• スポイトツールで選択した色を
スオッチパネルに登録
• スオッチを保存し
→追加読込で
チームでカラー共有

24. Lecture5
デザイン管理は…
「スタイル」パネル
前に作ったデザインをすぐ使いたい
同じデザインを一気に変更

25. Lecture5
作ったパーツをスタイルで登録/管理
• オブジェクトを選択し、
新規スタイルで登録
• オブジェクトを選択し、
登録スタイルを
クリックで適応
• 登録後の変更を
反映するには スタイルを再定義

26. Lecture5
素材管理は…
「シンボル」パネル
よく使うパーツを登録して使いまわす
同じパーツを一気に変更

27. Lecture5
作ったパーツをシンボル登録し、管理
• オブジェクトを選択し、
［変更-シンボル-シンボルに変換］で登録
• シンボルパネルからドラッグで追加
• 登録したシンボルをダブルクリックで
編集→一括更新

28. Lecture4
非破壊編集には…
「マスク」としてグループ化
写真などの切り抜き作業では、
元を壊さずマスクする

29. Lecture4
作ったパーツをシンボル登録し、管理
• オブジェクトを選択し、
［変更→マスク→マスクとしてグループ化］
• 元に戻すには、［変更→グループ解除］
• マスク用オブジェクトは、白色で
グレーは半透明で切り抜き

30. Lecture5
ページ管理は…
「ページ」パネル
モックアップの作成は、
ページパネルで

31. Lecture5
マスターを元にページ作成/管理

32. Lecture5
ホットスポットでリンクを指定
書き出したPDFに
リンクが設定される

33. まとめ
時短をするには最初が肝心！
• スオッチ、スタイル、シンボル、ページ、
マスク…などFireworksには、さまざま
なデータ管理の機能がある
• 機能を理解し、データを量産する
前段階で使っておくことが大切
• 準備したファイルを使うことで、他の人
に作業を依頼しやすくなる！

34. r360studio 森和恵 今後の予定
情報は、r360studyで発信 Eラーニング教材
メールマガジンに寄稿
セミナー

35. https://www.facebook.com/
FireworksBook/