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                  or              Photoshop12年6月23日土曜日
こうめ         株式会社まぼろし          Webデザイナー          Twitter : Bamboo_C          Blog : http://webamb.com12年6月23日土曜日
Web制作で使われるデザインツールとして、         FireworksとPhotoshop         結局どちらがいいのでしょう。12年6月23日土曜日
まずPhotoshopとFireworksの概要をみてみます。12年6月23日土曜日
Photoshop      元々は画像編集ソフトとして開発されました。      今ではバージョンアップ毎に機能拡張を重ね、      画像加工に限らずデザインツールの      スタンダードソフトです。      現状、制作会社さんの多くが...
Fireworks              Webをターゲットにした画像作成、出力              ソフトとしてMacromediaによって作成。              今はMacromediaがAdobeに買収され      ...
では値段をみてみます。12年6月23日土曜日
¥80,438-              Photoshop CS612年6月23日土曜日
12年6月23日土曜日
12年6月23日土曜日
¥36,251-               Fireworks CS612年6月23日土曜日
倍以上違います。              大企業ならいざしらず、              SOHOや中小企業には              かなり魅力的なポイントですね。12年6月23日土曜日
だがしかしbut!12年6月23日土曜日
今まで使ったことが無い場合は              ソフトの購入費だけでなく              従業員に一から覚えてもらう為              学習コストがかかってしまいます。12年6月23日土曜日
また、前述したように              大きなシェアを持っている為              取引先との兼ね合いもあるでしょう。12年6月23日土曜日
さっきのmimaさんのPhotoshopの説明              を聞いて、PhotoshopCS6 SUGEEEEEEE              ってなってる方も多いと思います。12年6月23日土曜日
じゃあなぜ              Fireworksを使う会社              が増えてきてるの?12年6月23日土曜日
前述したデメリットを踏まえても              余りあるほどのメリットを感じる              Fireworksの機能の一部をご紹介します12年6月23日土曜日
Fireworksはステート機能・ページ機能        テンプレート機能などの独自の機能や        豊富なシェイプを使って制作することにより        「効率的に」作業を行うことが可能です。12年6月23日土曜日
ページ機能              複数の仮想ページを管理できます。              レイヤーを共有させることが可能で              修正などを一括で管理できます。便利!12年6月23日土曜日
サイドバーにある              ページタブを選択します12年6月23日土曜日
右クリックで              ページを複製を選択12年6月23日土曜日
するとコピーができます              下層ページなども一つの              ファイルで管理できます12年6月23日土曜日
1ページ目              2ページ目12年6月23日土曜日
パーツなども        ページで共有できます12年6月23日土曜日
ヘッダーを              共有させてみます12年6月23日土曜日
共有したいレイヤーを右クリックし、              「レイヤーを複数ページで共有」              を選択します。12年6月23日土曜日
レイヤーを共有したいページを              追加します12年6月23日土曜日
これで共有できました              いずれかのページで変更を行うと              全てのレイヤーで共有されます12年6月23日土曜日
ステート機能         一つのページで「画像のマウスオーバー時」              などの複数の異なる状況を管理できます。12年6月23日土曜日
サイドバーにある              ステートタブを選択します12年6月23日土曜日
右クリックで              「ステートを複製」を選択12年6月23日土曜日
各種設定を行ったら              ステートを作成12年6月23日土曜日
作成したら              わかりやすいように              名前を変更しておきましょう12年6月23日土曜日
ステート1ではこの状態              で作ってありますが              ステート2ではボタンの              色を変えた状態にして              みました              ステートを切り...
色が変わりました12年6月23日土曜日
テンプレート機能    CS5から予めFireworksに用意された    沢山のテンプレートからページを作ることが    可能になりました。    ワイヤーフレームを作る際に重宝しそうですね。12年6月23日土曜日
メニューから              「テンプレートから新規作成」              を選択します12年6月23日土曜日
豊富なテンプレートが              用意されています12年6月23日土曜日
ガラケー用とか12年6月23日土曜日
グリッドとか12年6月23日土曜日
色んなパーツとか12年6月23日土曜日
普通のPCサイトのデザインも12年6月23日土曜日
ボタンパーツの作成              スピードに関しては              やはりFireworksの方が早いと思              います。              早速ひとつ作ってみます。12年6月23日土曜日
Hands-on              Together will make12年6月23日土曜日
スライス       マークアップエンジニアにとって       スライスは面倒な作業の一つですよね。       Photoshopではひとつひとつガイドを当てて、       スライスしたい箇所をドラッグしていって..       って結構...
スライスしたいオブジェクトを              全て選択。              「 shift + option + u 」              でスライス挿入。              後は右クリックで書き出せば全   ...
また、スライス名も調整可能              です              マウスオーバー用の_onとか              独自の命名規則がある場合に              非常に便利です                 ...
ドキュメント詳細タブのこの画面で              色んな設定ができます12年6月23日土曜日
このドロップダウンを              カスタムに変更すると12年6月23日土曜日
ステート名をカスタマイズできます!12年6月23日土曜日
また、先程紹介したステート機能を利用することで  マウスオーバー時などの異なる環境も  ページヘステートを切り替えるだけで出来ますね。12年6月23日土曜日
12年6月23日土曜日
続いて、この間出たばっかりの              CS6の新機能をおさらい!12年6月23日土曜日
CSSオブジェクト              プロパティの抽出12年6月23日土曜日
角丸とかグラデとか、ベンダープレフィック        スをつけるのが面倒ですよね。               -webkit- ←こんなの        Fwなら、オブジェクトからプロパティを抽出        してくれます!       ...
Hands-on                      Together will make      http://webamb.com/wp-content/uploads/sample2.zip12年6月23日土曜日
スライスを          CSSスプライトとして              書き出せる12年6月23日土曜日
例えばロールオーバーの画像を作るとき              1個づつ切り出して              新しいウィンドウを開いて              ペーストして、繋げて...              みたいなことをしてましたが、...
Hands-on              Together will make12年6月23日土曜日
jQuery Mobileテーマ               が作れちゃう!12年6月23日土曜日
スマホ案件で大活躍のjQuery Mobile、     デフォルトでは5つのテーマから選択が可能が、     CS6ならjQuery Mobileで使用可能なテーマが     作成可能です。     *作成時のプレビューもできちゃいます!12...
他にも..              • パフォーマンスの向上で最大4倍のサイ               ズのファイルをサポート              • グラデーションの数値、角度設定              • 新しいファイル名拡張...
まとめ12年6月23日土曜日
結局どっちがいいの?ってことなんですが          一長一短あって、使い分けするのが          最も効率的だと思います(≧▽≦)b12年6月23日土曜日
Photoshop              • キービジュアルのようなサイトの重要               な箇所の画像加工              • 手書き風のデザインとかには必須の豊               富なブラシ12年6...
Fireworks              • ワイヤー作成              • カンプ作成              • スライス12年6月23日土曜日
「Fireworksでは力不足」      「Photoshopでは時間がかかりすぎる..」      それぞれの特徴を活かしながら      臨機応変なワークフローを心がけたいですね!12年6月23日土曜日
Fireworks                  or              Photoshop12年6月23日土曜日
Fireworks                  and              Photoshop12年6月23日土曜日
12年6月23日土曜日
Thank you !12年6月23日土曜日
Upcoming SlideShare
Loading in …5
×

Fireworks or Photoshop【第3回ゆるふわ勉強会】

3,979 views

Published on

6/23にGooyaさんで行われたゆるふわ勉強会のこうめのスライドです。

  • Be the first to comment

Fireworks or Photoshop【第3回ゆるふわ勉強会】

  1. 1. Fireworks or Photoshop12年6月23日土曜日
  2. 2. こうめ 株式会社まぼろし Webデザイナー Twitter : Bamboo_C Blog : http://webamb.com12年6月23日土曜日
  3. 3. Web制作で使われるデザインツールとして、 FireworksとPhotoshop 結局どちらがいいのでしょう。12年6月23日土曜日
  4. 4. まずPhotoshopとFireworksの概要をみてみます。12年6月23日土曜日
  5. 5. Photoshop 元々は画像編集ソフトとして開発されました。 今ではバージョンアップ毎に機能拡張を重ね、 画像加工に限らずデザインツールの スタンダードソフトです。 現状、制作会社さんの多くがPhotoshopを標準 ソフトとして使用しています。12年6月23日土曜日
  6. 6. Fireworks Webをターゲットにした画像作成、出力 ソフトとしてMacromediaによって作成。 今はMacromediaがAdobeに買収され Adobeから発売されています。 Webに特化しているため、事Webに関し ては効率的で スピーディーな作業が行えます。12年6月23日土曜日
  7. 7. では値段をみてみます。12年6月23日土曜日
  8. 8. ¥80,438- Photoshop CS612年6月23日土曜日
  9. 9. 12年6月23日土曜日
  10. 10. 12年6月23日土曜日
  11. 11. ¥36,251- Fireworks CS612年6月23日土曜日
  12. 12. 倍以上違います。 大企業ならいざしらず、 SOHOや中小企業には かなり魅力的なポイントですね。12年6月23日土曜日
  13. 13. だがしかしbut!12年6月23日土曜日
  14. 14. 今まで使ったことが無い場合は ソフトの購入費だけでなく 従業員に一から覚えてもらう為 学習コストがかかってしまいます。12年6月23日土曜日
  15. 15. また、前述したように 大きなシェアを持っている為 取引先との兼ね合いもあるでしょう。12年6月23日土曜日
  16. 16. さっきのmimaさんのPhotoshopの説明 を聞いて、PhotoshopCS6 SUGEEEEEEE ってなってる方も多いと思います。12年6月23日土曜日
  17. 17. じゃあなぜ Fireworksを使う会社 が増えてきてるの?12年6月23日土曜日
  18. 18. 前述したデメリットを踏まえても 余りあるほどのメリットを感じる Fireworksの機能の一部をご紹介します12年6月23日土曜日
  19. 19. Fireworksはステート機能・ページ機能 テンプレート機能などの独自の機能や 豊富なシェイプを使って制作することにより 「効率的に」作業を行うことが可能です。12年6月23日土曜日
  20. 20. ページ機能 複数の仮想ページを管理できます。 レイヤーを共有させることが可能で 修正などを一括で管理できます。便利!12年6月23日土曜日
  21. 21. サイドバーにある ページタブを選択します12年6月23日土曜日
  22. 22. 右クリックで ページを複製を選択12年6月23日土曜日
  23. 23. するとコピーができます 下層ページなども一つの ファイルで管理できます12年6月23日土曜日
  24. 24. 1ページ目 2ページ目12年6月23日土曜日
  25. 25. パーツなども ページで共有できます12年6月23日土曜日
  26. 26. ヘッダーを 共有させてみます12年6月23日土曜日
  27. 27. 共有したいレイヤーを右クリックし、 「レイヤーを複数ページで共有」 を選択します。12年6月23日土曜日
  28. 28. レイヤーを共有したいページを 追加します12年6月23日土曜日
  29. 29. これで共有できました いずれかのページで変更を行うと 全てのレイヤーで共有されます12年6月23日土曜日
  30. 30. ステート機能 一つのページで「画像のマウスオーバー時」 などの複数の異なる状況を管理できます。12年6月23日土曜日
  31. 31. サイドバーにある ステートタブを選択します12年6月23日土曜日
  32. 32. 右クリックで 「ステートを複製」を選択12年6月23日土曜日
  33. 33. 各種設定を行ったら ステートを作成12年6月23日土曜日
  34. 34. 作成したら わかりやすいように 名前を変更しておきましょう12年6月23日土曜日
  35. 35. ステート1ではこの状態 で作ってありますが ステート2ではボタンの 色を変えた状態にして みました ステートを切り替えて みます12年6月23日土曜日
  36. 36. 色が変わりました12年6月23日土曜日
  37. 37. テンプレート機能 CS5から予めFireworksに用意された 沢山のテンプレートからページを作ることが 可能になりました。 ワイヤーフレームを作る際に重宝しそうですね。12年6月23日土曜日
  38. 38. メニューから 「テンプレートから新規作成」 を選択します12年6月23日土曜日
  39. 39. 豊富なテンプレートが 用意されています12年6月23日土曜日
  40. 40. ガラケー用とか12年6月23日土曜日
  41. 41. グリッドとか12年6月23日土曜日
  42. 42. 色んなパーツとか12年6月23日土曜日
  43. 43. 普通のPCサイトのデザインも12年6月23日土曜日
  44. 44. ボタンパーツの作成 スピードに関しては やはりFireworksの方が早いと思 います。 早速ひとつ作ってみます。12年6月23日土曜日
  45. 45. Hands-on Together will make12年6月23日土曜日
  46. 46. スライス マークアップエンジニアにとって スライスは面倒な作業の一つですよね。 Photoshopではひとつひとつガイドを当てて、 スライスしたい箇所をドラッグしていって.. って結構面倒です。12年6月23日土曜日
  47. 47. スライスしたいオブジェクトを 全て選択。 「 shift + option + u 」 でスライス挿入。 後は右クリックで書き出せば全 てのオブジェクトを別々に切り 分けられます。 いちいちガイドを引かなくても 大丈夫ですし、複数のオブジェ クトが重なっていても 大丈夫です12年6月23日土曜日
  48. 48. また、スライス名も調整可能 です マウスオーバー用の_onとか 独自の命名規則がある場合に 非常に便利です ファイルから 「HTMLの設定」を選択12年6月23日土曜日
  49. 49. ドキュメント詳細タブのこの画面で 色んな設定ができます12年6月23日土曜日
  50. 50. このドロップダウンを カスタムに変更すると12年6月23日土曜日
  51. 51. ステート名をカスタマイズできます!12年6月23日土曜日
  52. 52. また、先程紹介したステート機能を利用することで マウスオーバー時などの異なる環境も ページヘステートを切り替えるだけで出来ますね。12年6月23日土曜日
  53. 53. 12年6月23日土曜日
  54. 54. 続いて、この間出たばっかりの CS6の新機能をおさらい!12年6月23日土曜日
  55. 55. CSSオブジェクト プロパティの抽出12年6月23日土曜日
  56. 56. 角丸とかグラデとか、ベンダープレフィック スをつけるのが面倒ですよね。 -webkit- ←こんなの Fwなら、オブジェクトからプロパティを抽出 してくれます! 他にもPhotoshopライブエフェクトのドロッ プシャドウ、シャドウ(内側)、光彩(内側)、 光彩(外側)なんかも抽出してくれます12年6月23日土曜日
  57. 57. Hands-on Together will make http://webamb.com/wp-content/uploads/sample2.zip12年6月23日土曜日
  58. 58. スライスを CSSスプライトとして 書き出せる12年6月23日土曜日
  59. 59. 例えばロールオーバーの画像を作るとき 1個づつ切り出して 新しいウィンドウを開いて ペーストして、繋げて... みたいなことをしてましたが、 これならめちゃくちゃ簡単にできます!12年6月23日土曜日
  60. 60. Hands-on Together will make12年6月23日土曜日
  61. 61. jQuery Mobileテーマ が作れちゃう!12年6月23日土曜日
  62. 62. スマホ案件で大活躍のjQuery Mobile、 デフォルトでは5つのテーマから選択が可能が、 CS6ならjQuery Mobileで使用可能なテーマが 作成可能です。 *作成時のプレビューもできちゃいます!12年6月23日土曜日
  63. 63. 他にも.. • パフォーマンスの向上で最大4倍のサイ ズのファイルをサポート • グラデーションの数値、角度設定 • 新しいファイル名拡張子fw.png • 各機能の操作性向上 ...etc12年6月23日土曜日
  64. 64. まとめ12年6月23日土曜日
  65. 65. 結局どっちがいいの?ってことなんですが 一長一短あって、使い分けするのが 最も効率的だと思います(≧▽≦)b12年6月23日土曜日
  66. 66. Photoshop • キービジュアルのようなサイトの重要 な箇所の画像加工 • 手書き風のデザインとかには必須の豊 富なブラシ12年6月23日土曜日
  67. 67. Fireworks • ワイヤー作成 • カンプ作成 • スライス12年6月23日土曜日
  68. 68. 「Fireworksでは力不足」 「Photoshopでは時間がかかりすぎる..」 それぞれの特徴を活かしながら 臨機応変なワークフローを心がけたいですね!12年6月23日土曜日
  69. 69. Fireworks or Photoshop12年6月23日土曜日
  70. 70. Fireworks and Photoshop12年6月23日土曜日
  71. 71. 12年6月23日土曜日
  72. 72. Thank you !12年6月23日土曜日

×