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

Fireworks or

Photoshop

12年6月23日土曜日

こうめ株式会社まぼろしWebデザイナーTwitter : Bamboo_C

Blog : http://webamb.com


http://webamb.com

http://webamb.com

Web制作で使われるデザインツールとして、FireworksとPhotoshop

結局どちらがいいのでしょう。


まずPhotoshopとFireworksの概要をみてみます。


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


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


では値段をみてみます。


¥80,438-Photoshop CS6


¥36,251-Fireworks CS6


倍以上違います。

大企業ならいざしらず、SOHOや中小企業にはかなり魅力的なポイントですね。


だがしかしbut!


今まで使ったことが無い場合はソフトの購入費だけでなく従業員に一から覚えてもらう為学習コストがかかってしまいます。


また、前述したように大きなシェアを持っている為取引先との兼ね合いもあるでしょう。


さっきのmimaさんのPhotoshopの説明を聞いて、PhotoshopCS6 SUGEEEEEEE

ってなってる方も多いと思います。


じゃあなぜFireworksを使う会社が増えてきてるの？


前述したデメリットを踏まえても余りあるほどのメリットを感じるFireworksの機能の一部をご紹介します


Fireworksはステート機能・ページ機能テンプレート機能などの独自の機能や豊富なシェイプを使って制作することにより「効率的に」作業を行うことが可能です。


ページ機能

複数の仮想ページを管理できます。レイヤーを共有させることが可能で修正などを一括で管理できます。便利！


サイドバーにあるページタブを選択します


右クリックでページを複製を選択


するとコピーができます下層ページなども一つのファイルで管理できます


2ページ目

1ページ目


パーツなどもページで共有できます


ヘッダーを共有させてみます


共有したいレイヤーを右クリックし、「レイヤーを複数ページで共有」を選択します。


レイヤーを共有したいページを追加します


これで共有できましたいずれかのページで変更を行うと全てのレイヤーで共有されます


ステート機能

一つのページで「画像のマウスオーバー時」などの複数の異なる状況を管理できます。


サイドバーにあるステートタブを選択します


右クリックで「ステートを複製」を選択


各種設定を行ったらステートを作成


作成したらわかりやすいように名前を変更しておきましょう


ステート1ではこの状態で作ってありますがステート2ではボタンの色を変えた状態にしてみましたステートを切り替えてみます


色が変わりました


テンプレート機能CS5から予めFireworksに用意された沢山のテンプレートからページを作ることが可能になりました。ワイヤーフレームを作る際に重宝しそうですね。


メニューから「テンプレートから新規作成」を選択します


豊富なテンプレートが用意されています


ガラケー用とか


グリッドとか


色んなパーツとか


普通のPCサイトのデザインも


ボタンパーツの作成スピードに関してはやはりFireworksの方が早いと思います。早速ひとつ作ってみます。


Hands-onTogether will make


スライス

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

って結構面倒です。


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


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

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


ドキュメント詳細タブのこの画面で色んな設定ができます


このドロップダウンをカスタムに変更すると


ステート名をカスタマイズできます！


また、先程紹介したステート機能を利用することでマウスオーバー時などの異なる環境もページヘステートを切り替えるだけで出来ますね。


続いて、この間出たばっかりのCS6の新機能をおさらい！


CSSオブジェクトプロパティの抽出


角丸とかグラデとか、ベンダープレフィックスをつけるのが面倒ですよね。

-webkit- ←こんなの

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



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




スライスをCSSスプライトとして

書き出せる


例えばロールオーバーの画像を作るとき１個づつ切り出して新しいウィンドウを開いてペーストして、繋げて...

みたいなことをしてましたが、これならめちゃくちゃ簡単にできます！


jQuery Mobileテーマが作れちゃう！


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


他にも..

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

• グラデーションの数値、角度設定

• 新しいファイル名拡張子fw.png

• 各機能の操作性向上 ...etc


まとめ


結局どっちがいいの？ってことなんですが一長一短あって、使い分けするのが最も効率的だと思います(≧▽≦)b


Photoshop

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

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


Fireworks

• ワイヤー作成

• カンプ作成

• スライス


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


Fireworks or

Photoshop


Fireworks and

Photoshop


Thank you !


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

Documents

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