Webデザインのツール、FireworksとPhotoshopは何が違うの?を考えてみた
はじめましてバシャログメンバーにデザイナーとして
10月末から加わりましたkojimaです。
わたくし、こちらに所属して先日初めてFireworksCS5触りました!
CS3をちょいちょいお直しレベルでしか触ったことなかったので
新鮮!!を通り越してさっぱりわからん!
というわけでFireworksとPhotoshopどこがどう違うの?から考えてみました。
PhotoshopでWebデザイン
もともとPhotoshopは名前の通り写真屋さん、写真/画像編集ツール。
その繊細な描画力が仇となり、Webのデザインをしようと思うと
シェイプが滲みが気になったり、レイヤーが200枚を越えたり。
でもやっぱ絶妙な質感再現しちゃう画像処理すんばらしい!
FireworksでWebデザイン
もともとMacromediaがWebデザインツールとして開発。
共通パーツ作る時に大助かりなシンボル化機能
1ファイルで数ページ一括作成出来るページ機能
などなどWebに特化した機能が揃っています。
またピクセルに最適化されているため、レイアウトが気持よく嵌ります。
適当にシェイプで描画しても滲まないのも素敵。
![111017_kojima_01.gif](http://c-brains.jp/blog/wsg/images/111017_kojima_01.gif)
実際手を動かして比較してみる
よく使う「フォントの見やすさ」「艶やかなバッジ」「アナログ素材になじませてみる」
3つで検証してみたいと思います。
Fireworksはわたしが不慣れなもので、処理が甘い所がありますが多めに見てやってください。
作業環境は共にCS5。
フォントの見やすさ
敢えてカーニングせずに打ちっぱなし。
![111017_kojima_02.png](http://c-brains.jp/blog/wsg/images/111017_kojima_02.png)
全体的にPhotoshopの方が無難に見やすいなか、
Fireworksのアンチエイリアスカスタム設定した途端、痒い所に手が届いた感。
甲乙付け難いと言うよりは、どっちもどっちであるのが悲しい。
艶やかなバッジ
今回使う機能は「グラデーション」「光彩内側」「文字にドロップシャドウ」だけ。
![111017_kojima_03.png](http://c-brains.jp/blog/wsg/images/111017_kojima_03.png)
外枠もソフトライトで重ねた白のハイライト部分も
Fireworksがカリッとしているのに対し、Photoshopはしっとりとし過ぎ…
Photoshopのグラデーション機能の脆弱さが敗因と見ました。
アナログ素材になじませてみる
紙に文字を自然に馴染ませてみます。
![111017_kojima_04.jpg](http://c-brains.jp/blog/wsg/images/111017_kojima_04.jpg)
Fireworksは光彩に乗算指定出来ないので紙の濃淡に影があっていませんねー。
全体的に大味です。
Photoshopは影一つとっても色の変化に富んでいますね。
レイヤーだけでなく、効果にまで ぼかし方/透過/描画モード 設定出来るのが強い。
結論
Fireworksのお得意はキチッとカチッとWebに最適化したパーツを作成すること
Photoshopのお得意は端々までの細やかな処理で画像を美しく仕上げること
レイアウトやボタンなどカッチリ見せたいパーツではFireworks、
アナログ素材やガツンと目を引きたいヴィジュアルにはPhotoshop、
と使い分けると工数削減、クオリティ上昇、な予感がします。
どっちがいい、ではなく、どっちかにしか出来ない ものがあるのです!
みんなちがってみんないい!
というわけでFireworks頑張ります。