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