Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
覚えておいて損はない!Fireworksの便利なTips特集      FWUG 第3回勉強会         2012.2.5                      1
自己紹介       2
まるやま あきら        鳥取在住。Web歴15年ほど        FireworksはVer.1から        昨年のCSS Nite LP, Disk 14に登壇        FWUGのコアメンバー   や   の拡張機能とか...
今日の内容• 書き出し系• シンボル• 自動シェイプ• コマンド• Illustratorからのインポート• Illustratorへの書き出し                        4
書き出し系• CS5.1より前でも背景グラデー  ションをきれいに書き出す• icoファイルを書き出す                     5
書き出し系CS5.1より前バージョンでも背景グラデーションをきれいに書き出す• CS5以前、256色以上の色をもつオブジェクトの gifやpng8の全色割り付けにバグ。• 1. スライス範囲を狭める 2. 「全色書き出し」で最適化 3. カラー...
書き出し系icoファイルを書き出す• Webグラフィックスツールなのに何故か対応して いない• 拡張機能を利用 Favicon http://johndunning.com/fireworks/about/ExportAsFavicon• Wi...
書き出し系icoファイルを書き出す(おまけ)実はMacでプレビューでicoに対応済        プレビュー 書き出しで「Microsoft アイコン」を選択 ただしLionでは機能がなくなっている                       ...
書き出し系まとめ• CS5.0以前には全色割り付けに  バグがある• スライス範囲を狭めて必要な色  をロックする• icoファイル書き出しは拡張機能  で対応(MacはCS5以上で)                     9
シンボル系• 劣化の少ない拡大縮小• シンボル化でブレンド効果が  欠落するバグ                  10
シンボル系劣化の少ない拡大縮小• ビットマップの拡大縮小  →劣化を生じる• 大きめの素材をシンボル化する            ビ マッ             ット プ   シンボル   200%拡大                    ...
シンボル系シンボル化でブレンド効果が欠落• オブジェクトに乗算後、シンボル化   ブレンド効果がなくなる!  オブジェクト   シンボル化• ビットマップ化するしかない                     12
シンボル系まとめ• 適度に大きめの画像のシンボル 化は、拡大縮小時の劣化を抑え ることができる• ブレンド効果を持つオブジェクト のシンボル化はブレンドが欠落                    13
自動シェイプ• 知っておくと便利(と思う) 自動シェイプ• 使用するときの注意点• 9スライスを使うには?                  14
自動シェイプ系自動シェイプとは?          星形、矢印、多角形などの多          彩なシェイプ形状のオブジェ          クトを簡単に作成および編集          することができる                   ...
自動シェイプ系自動シェイプとは?コントロールポイントの移動やプロパティパネルでの値の変更で形状などをカスタマイズ可能なオブジェクト                      16
自動シェイプ系知っておくと便利(と思う)自動シェイプ• Sunburst 放射状の形状 http://fireworks.abeall.com/extensions/autoshapes/#Sunburst• Arc 円弧を描く http://...
自動シェイプ系 知っておくと便利(と思う)自動シェイプ• Multi-Border Rectangle  辺ごとに異なる太さ・色の線を適用する http://johndunning.com/fireworks/about/MultiBorder...
自動シェイプ系自動シェイプを使用するときの注意点• 線の属性は利用できない Photoshopライブエフェクトのストロークを使う• 複雑な機能をもつ自動シェイプは 塗り/線を適用しない• そのままでは9スライスを適用できない 自動シェイプをシン...
自動シェイプまとめ• 自動シェイプは複雑な図形を 簡単に生成できる• 線の属性は利用不可。代わりに Photoshopライブエフェクトで• 9スライスを使うためには自動 シェイプをシンボル化する                      20
コマンド• 選択オブジェクトと同じサイズ  の矩形をつくる• 選択オブジェクトの数ピクセル  拡大・縮小した矩形をつくる• カンバスサイズと同じサイズの  矩形をつくる• テキストを選択しただけで  カーニングを可能にする           ...
コマンド• 6000x6000pxのカンバス サイズの制限を変更する• ダイアログを出さずに10または 100pxずつカンバスサイズの 高さを変える• コマンドを使ってショート カットメニューを作成                     22
コマンド系カンバスサイズの制限を変更する • 6000x6000pxのカンバス   サイズの制限を変更する • ダイアログを出さずに10または   100pxずつカンバスサイズの   高さを変える • コマンドを使ってショート   カットメニュ...
コマンドまとめ• コマンドは JavaScript & Fireworks APIで構成されている• 通常のUIでは制限のかかって いることを実行可能• ショートカットと併用で 作業効率UP!                         24
AIからのインポート• 画像は72dpiでラスタライズ して書き出し• 効果はラスタライズされる• 文字がずれる• パスがグループ化                    25
AIからのインポートまとめ• 画像は事前にラスタライズ。 配置は無視される• 効果はラスタライズされる。 透明度設定のあるものは注意• 文字だけは読み込み時にずれる 詰め設定も変更される• 1オブジェクトでもグループ化             ...
AIへの書き出し• FXGを利用する             27
AIへの書き出しまとめ• FXGを利用して再現性の高い 書き出しが可能• ただし効果やパターン等を含ん だオブジェクトはラスタライズ• 通常書き出しだとAI8レベル。 ライブエフェクトなどは欠落                    28
おまけ      29
Fireworksに関する情報を    配信しています• The Fireworks Daily News    http://paper.li/akira_maru/1297491883    ハッシュタグ #adobefireworks を...
ご清聴ありがとう ございました  @akira_maru                31
Upcoming SlideShare
Loading in …5
×

覚えておいて損はない! Fireworksの便利なTips特集

3,195 views

Published on

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

Published in: Design

覚えておいて損はない! Fireworksの便利なTips特集

  1. 1. 覚えておいて損はない!Fireworksの便利なTips特集 FWUG 第3回勉強会 2012.2.5 1
  2. 2. 自己紹介 2
  3. 3. まるやま あきら 鳥取在住。Web歴15年ほど FireworksはVer.1から 昨年のCSS Nite LP, Disk 14に登壇 FWUGのコアメンバー   や   の拡張機能とか作ってます。 http://dwlog.net/ 3
  4. 4. 今日の内容• 書き出し系• シンボル• 自動シェイプ• コマンド• Illustratorからのインポート• Illustratorへの書き出し 4
  5. 5. 書き出し系• CS5.1より前でも背景グラデー ションをきれいに書き出す• icoファイルを書き出す 5
  6. 6. 書き出し系CS5.1より前バージョンでも背景グラデーションをきれいに書き出す• CS5以前、256色以上の色をもつオブジェクトの gifやpng8の全色割り付けにバグ。• 1. スライス範囲を狭める 2. 「全色書き出し」で最適化 3. カラーをロック 4. スライス範囲を戻す 5. 再度「全色書き出し」で最適化 6
  7. 7. 書き出し系icoファイルを書き出す• Webグラフィックスツールなのに何故か対応して いない• 拡張機能を利用 Favicon http://johndunning.com/fireworks/about/ExportAsFavicon• Windowsは8以上、Macは CS5以上• Export as Faviconでico書き出し、その他はカンバ ス作成コマンド。 7
  8. 8. 書き出し系icoファイルを書き出す(おまけ)実はMacでプレビューでicoに対応済 プレビュー 書き出しで「Microsoft アイコン」を選択 ただしLionでは機能がなくなっている 8
  9. 9. 書き出し系まとめ• CS5.0以前には全色割り付けに バグがある• スライス範囲を狭めて必要な色 をロックする• icoファイル書き出しは拡張機能 で対応(MacはCS5以上で) 9
  10. 10. シンボル系• 劣化の少ない拡大縮小• シンボル化でブレンド効果が 欠落するバグ 10
  11. 11. シンボル系劣化の少ない拡大縮小• ビットマップの拡大縮小 →劣化を生じる• 大きめの素材をシンボル化する ビ マッ ット プ シンボル 200%拡大 11
  12. 12. シンボル系シンボル化でブレンド効果が欠落• オブジェクトに乗算後、シンボル化 ブレンド効果がなくなる! オブジェクト シンボル化• ビットマップ化するしかない 12
  13. 13. シンボル系まとめ• 適度に大きめの画像のシンボル 化は、拡大縮小時の劣化を抑え ることができる• ブレンド効果を持つオブジェクト のシンボル化はブレンドが欠落 13
  14. 14. 自動シェイプ• 知っておくと便利(と思う) 自動シェイプ• 使用するときの注意点• 9スライスを使うには? 14
  15. 15. 自動シェイプ系自動シェイプとは? 星形、矢印、多角形などの多 彩なシェイプ形状のオブジェ クトを簡単に作成および編集 することができる 15
  16. 16. 自動シェイプ系自動シェイプとは?コントロールポイントの移動やプロパティパネルでの値の変更で形状などをカスタマイズ可能なオブジェクト 16
  17. 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. 18. 自動シェイプ系 知っておくと便利(と思う)自動シェイプ• Multi-Border Rectangle  辺ごとに異なる太さ・色の線を適用する http://johndunning.com/fireworks/about/MultiBorderRect• 角丸長方形(標準) 角ごとに角丸を適用できる 18
  19. 19. 自動シェイプ系自動シェイプを使用するときの注意点• 線の属性は利用できない Photoshopライブエフェクトのストロークを使う• 複雑な機能をもつ自動シェイプは 塗り/線を適用しない• そのままでは9スライスを適用できない 自動シェイプをシンボルにする 19
  20. 20. 自動シェイプまとめ• 自動シェイプは複雑な図形を 簡単に生成できる• 線の属性は利用不可。代わりに Photoshopライブエフェクトで• 9スライスを使うためには自動 シェイプをシンボル化する 20
  21. 21. コマンド• 選択オブジェクトと同じサイズ の矩形をつくる• 選択オブジェクトの数ピクセル 拡大・縮小した矩形をつくる• カンバスサイズと同じサイズの 矩形をつくる• テキストを選択しただけで カーニングを可能にする 21
  22. 22. コマンド• 6000x6000pxのカンバス サイズの制限を変更する• ダイアログを出さずに10または 100pxずつカンバスサイズの 高さを変える• コマンドを使ってショート カットメニューを作成 22
  23. 23. コマンド系カンバスサイズの制限を変更する • 6000x6000pxのカンバス サイズの制限を変更する • ダイアログを出さずに10または 100pxずつカンバスサイズの 高さを変える • コマンドを使ってショート カットメニューを作成 23
  24. 24. コマンドまとめ• コマンドは JavaScript & Fireworks APIで構成されている• 通常のUIでは制限のかかって いることを実行可能• ショートカットと併用で 作業効率UP! 24
  25. 25. AIからのインポート• 画像は72dpiでラスタライズ して書き出し• 効果はラスタライズされる• 文字がずれる• パスがグループ化 25
  26. 26. AIからのインポートまとめ• 画像は事前にラスタライズ。 配置は無視される• 効果はラスタライズされる。 透明度設定のあるものは注意• 文字だけは読み込み時にずれる 詰め設定も変更される• 1オブジェクトでもグループ化 26
  27. 27. AIへの書き出し• FXGを利用する 27
  28. 28. AIへの書き出しまとめ• FXGを利用して再現性の高い 書き出しが可能• ただし効果やパターン等を含ん だオブジェクトはラスタライズ• 通常書き出しだとAI8レベル。 ライブエフェクトなどは欠落 28
  29. 29. おまけ 29
  30. 30. Fireworksに関する情報を 配信しています• The Fireworks Daily News http://paper.li/akira_maru/1297491883 ハッシュタグ #adobefireworks をチェック!• Fireworks Lover J https://www.facebook.com/FireworksLoverJ 30
  31. 31. ご清聴ありがとう ございました @akira_maru 31

×