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

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日土曜日

FireworksWebをターゲットにした画像作成、出力ソフトとして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日土曜日

2ページ目

1ページ目

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-onTogether 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-onTogether will make

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

12年6月23日土曜日

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

書き出せる

12年6月23日土曜日

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

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

12年6月23日土曜日

Hands-onTogether 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日土曜日