Fireworks
                  or
              Photoshop


12年6月23日土曜日
こうめ
         株式会社まぼろし
          Webデザイナー
          Twitter : Bamboo_C
          Blog : http://webamb.com




12年6月23日土曜日
Web制作で使われるデザインツールとして、
         FireworksとPhotoshop
         結局どちらがいいのでしょう。




12年6月23日土曜日
まずPhotoshopとFireworksの概要をみてみます。




12年6月23日土曜日
Photoshop
      元々は画像編集ソフトとして開発されました。
      今ではバージョンアップ毎に機能拡張を重ね、
      画像加工に限らずデザインツールの
      スタンダードソフトです。
      現状、制作会社さんの多くがPhotoshopを標準
      ソフトとして使用しています。



12年6月23日土曜日
Fireworks
              Webをターゲットにした画像作成、出力
              ソフトとしてMacromediaによって作成。
              今はMacromediaがAdobeに買収され
              Adobeから発売されています。
              Webに特化しているため、事Webに関し
              ては効率的で
              スピーディーな作業が行えます。

12年6月23日土曜日
では値段をみてみます。



12年6月23日土曜日
¥80,438-
              Photoshop CS6




12年6月23日土曜日
12年6月23日土曜日
12年6月23日土曜日
¥36,251-
               Fireworks CS6




12年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日土曜日
色が変わりました




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 make




12年6月23日土曜日
スライス

       マークアップエンジニアにとって
       スライスは面倒な作業の一つですよね。
       Photoshopではひとつひとつガイドを当てて、
       スライスしたい箇所をドラッグしていって..
       って結構面倒です。



12年6月23日土曜日
スライスしたいオブジェクトを
              全て選択。
              「 shift + option + u 」
              でスライス挿入。
              後は右クリックで書き出せば全
              てのオブジェクトを別々に切り
              分けられます。
              いちいちガイドを引かなくても
              大丈夫ですし、複数のオブジェ
              クトが重なっていても
              大丈夫です



12年6月23日土曜日
また、スライス名も調整可能
              です
              マウスオーバー用の_onとか
              独自の命名規則がある場合に
              非常に便利です


                   ファイルから
              「HTMLの設定」を選択




12年6月23日土曜日
ドキュメント詳細タブのこの画面で
              色んな設定ができます

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なら、オブジェクトからプロパティを抽出
        してくれます!
        他にもPhotoshopライブエフェクトのドロッ
        プシャドウ、シャドウ(内側)、光彩(内側)、
        光彩(外側)なんかも抽出してくれます

12年6月23日土曜日
Hands-on
                      Together will make

      http://webamb.com/wp-content/uploads/sample2.zip




12年6月23日土曜日
スライスを
          CSSスプライトとして
              書き出せる

12年6月23日土曜日
例えばロールオーバーの画像を作るとき
              1個づつ切り出して
              新しいウィンドウを開いて
              ペーストして、繋げて...
              みたいなことをしてましたが、
              これならめちゃくちゃ簡単にできます!



12年6月23日土曜日
Hands-on
              Together will make




12年6月23日土曜日
jQuery Mobileテーマ
               が作れちゃう!


12年6月23日土曜日
スマホ案件で大活躍のjQuery Mobile、
     デフォルトでは5つのテーマから選択が可能が、
     CS6ならjQuery Mobileで使用可能なテーマが
     作成可能です。
     *作成時のプレビューもできちゃいます!




12年6月23日土曜日
他にも..

              • パフォーマンスの向上で最大4倍のサイ
               ズのファイルをサポート

              • グラデーションの数値、角度設定
              • 新しいファイル名拡張子fw.png
              • 各機能の操作性向上         ...etc


12年6月23日土曜日
まとめ



12年6月23日土曜日
結局どっちがいいの?ってことなんですが
          一長一短あって、使い分けするのが
          最も効率的だと思います(≧▽≦)b




12年6月23日土曜日
Photoshop

              • キービジュアルのようなサイトの重要
               な箇所の画像加工

              • 手書き風のデザインとかには必須の豊
               富なブラシ



12年6月23日土曜日
Fireworks

              • ワイヤー作成
              • カンプ作成
              • スライス


12年6月23日土曜日
「Fireworksでは力不足」
      「Photoshopでは時間がかかりすぎる..」
      それぞれの特徴を活かしながら
      臨機応変なワークフローを心がけたいですね!




12年6月23日土曜日
Fireworks
                  or
              Photoshop


12年6月23日土曜日
Fireworks
                  and
              Photoshop


12年6月23日土曜日
12年6月23日土曜日
Thank you !



12年6月23日土曜日

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