FireworksとPhotoshop&Illustratorの使い分けとグラデーション品質の話 | VIVID COLORS DESIGN -ビビッドカラーズデザイン-

VIVID COLORS DESIGN -ビビッドカラーズデザイン-

まいにちたのしくものづくり。

Parkn' ParkshihoさんにFireworksについてご質問をいただきました!

shihoさんありがとうございます!!^^

頂いた質問は
  • FireworksとPhotoshop&Illustrator、どう使い分けているか
  • Fireworksって画像の書き出し汚く感じる?

の2つです。


Fireworksマニアに書こうかと思ったのですが、
私の主観だったりするところもあるので、
とりあえずこっちのブログに書いてみました☆

FireworksとPhotoshop&Illustrator、
どう使い分けているか



私はwebデザインのほとんどの作業をFireworksでやっていまして
Fireworksのいいところ・好きなところがはあげればきりがないのですが、

ベクターとビットマップが同時に扱えて
Web(画面デザイン)をすることに特化していて
単位やカラーモードを気にすることなく(最初からpx、RGBなので)作業に取りかかれて
かつ操作が簡単でわかりやすい
=結果早く作れる

というところあたりは私的にかなりポイントが高いところです。



Fireworksにしかないいいところがたっくさんあるように

Photoshop、Illustratorでやった方が
早く!きれいに!できることもたっくさんある
ので、

そういう作業はFireworksにこだわらず
PhotoshopやIllustratorを使ってやってます。




どういうときにPhotoshopやIllustratorを使っているか

こういう時はPhotoshopが便利!

  • 毛とかの複雑な切り抜き
  • 画像のパノラマ合成
  • 肌をなめらかにしたりキレイにしたりするとき
  • ブラシでぶわーっと書いた方が早そうな背景素材を作ったりするとき


このあたりはFireworksでも出来ますが、
Photoshopの方がツールやプラグインなどが充実していて
Photoshopでやったほうが圧倒的に早いのでphotoshopで。

背景との差がはっきりしている切り抜き
(素材集の写真などで、自動選択ツールで背景一発で選択できそうな写真とか)
なんかはFireworksでやってしまってます。

アプリケーションを切り分ける時間がもったいないのと
Web用の解像度の画像ならこの方法の切り抜きで十分きれいだからです。

あとレベル補正で明るくするだけで良さそうな写真なども
もうFireworksフィルタかけてでやっちゃいます。




こういう時はIllustratorが便利!

  • 単純なテキストタイプではないサイトタイトル
    (ロゴデザイン)を作らなければいけないとき
    →パスの扱い方、変形させるツール・コマンドなどが段違いに多いから。


  • 写真などを元にしてトレースしてイラストなどを描き起す場合
    →ライブトレースなんか使ったりするのでIllustratorで書く。
     書いてFireworksにもっていく


Fireworksの図形ツールのみ、もしくはその組み合わせでは簡単に書けない
パスを書いたりするときはIllustratorのほうが早いのでIllustratorで書く感じです。

ほかにもフリーハンドで図形というか、
たとえばふきだしなんか書きたいときは
Illustratorの鉛筆ツールで精度を細かく調整して書いた方が
Fireworksのベクトルパスツールを使って書くより、より簡単にきれいに書けます。

現行バージョンだと、Illustratorで書いたパスを
コピーアンドペーストでFireworksに持ち込めるので
Illustratorの鉛筆ツールでさささっと書いてFireworksにぺたっと張り込んで使います。

とっても便利。



Fireworksって画像の書き出し汚く感じる?

これですが、先にちょっとFireworksのグラデーションの話を。。。


Fireworksでのグラデーション、
以前は「グラデーションの描画が汚くない?」と言われることがあったのですが
これがFireworksでグラデーション書くとバンディングがでるよね?
ということだとしたら、これについてはCS5で大幅に改善されました。

CS5からグラデーションデイザボタンがついたので
バンディングのない滑らかなグラデーションが書きやすくなってます。

実際にサンプルを用意してみました。

$VIVID COLORS DESIGN -ビビッドカラーズデザイン--グラデーション


こんな感じ。

私はもともとFireworksばかり使っていたので
今までは一番右のようにしてポイントを増やして
中間色を指定してバンディングを回避していました。

…というか、これしか方法がなかったので、
どんなソフトでもこれが当たり前だと思っていました……!!;;


なのでグラデーション汚くない?っていわれても
「???」という感じだったのですが…




これがあるとすごく…楽です…!


ただ、まだPhotoshopのほうが微調整用のスライダーもあるし、

$VIVID COLORS DESIGN -ビビッドカラーズデザイン--微調整


繊細なグラデーションの書きやすさでいったらPhotoshopになるのかなーと思いますが、
Fireworksはグラデーションが汚い!というのは
以前に比べ手軽に回避できるようになったのかな、と思います。

ということで、画面上でのグラデーションはよくなりました。




追記:以下の問題はCS5.1で改善されたそうです。丸山さん情報ありがとうございました!
   FireworksでもPNG8やGIFもきれいに書き出せます!!
   後日あらためて検証して記事にしますね^^



ただ、この画面上で見えている状態で正しく書き出せるかというとまた別の問題で…。


GIFとPNG8での書き出しのときに品質が悪くなる場合があります。

最適化パレットの色の割り当て方がおかしいのか???

同じように描画したグラデーションを書き出し分けてみました。

$VIVID COLORS DESIGN -ビビッドカラーズデザイン--グラデーション書き出し比較


これだけ大きいグラデーションだとちょっと目立ちますよね。。。



ただ、あんまり困ってない

私の場合は、CSS Spriteの手法をよく使うため、
たくさんのパーツを1つのファイルにまとめて書き出すことが多いです。

CSS Spriteって?というかたはこちら


そのため、PNG8で書き出すには色数が大きすぎたりして
そもそもPNG8やGIFで書き出すことがあまりありません。


PNG24以上もしくはjpegで書き出すことが多いです。


そもそもこの現象はPNG8とGIFで書き出す時だけ発生しうる現象なので
PNG24で書き出す場合は問題なくキレイです。



なので書き出したら劣化した!という状況には
これまであんまり出くわしていないのです。



単品で書き出す場合も
グラデーションのボタンとかも実際書き出すときは上に文字が載っていたりするので
PNG8とPNG24で書き出してみても違いがわからない場合が多いです。

あくまで私の場合ですが。。。





ただ、あまり出くわさないとはいえ
容量を押さえたいときなどに
グラデーションの劣化が原因でpng8で書き出せない…!
とかでは困るので、あとFireworksが嫌われる原因になるので;;

GIFとPNG8書き出し時の最適化パレットのアルゴリズム(?)も
Photoshopと同等にしてほしいです…!!





全体的にFireworksかなーりよくなってると思うんです。


スマートフォンやiPadなど対応すべきデバイスは増え、
作らないといけないデザインファイル数はどんどん増え、
jQueryやCSS3などなどのおかげで表現できるデザインの幅も増え、


でも公開までにかける時間はできるだけ短く!

使いやすくなるようどんどん改善!改善!!


こんな感じのことが求められるWebデザインの世界なので

とにかく修正があったときにもスピーディーに対応でき、
かつ1つのファイルで複数のページを管理できて…という
Fireworksを私は手放せません…!!!!!!


スピードと効率とクオリティを同時に実現できるFireworksが大好きです。


FireworksのPhotoshopライブフィルタがPhotoshopと同等になって
GIFとPNG8書き出し時の最適化パレットもPhotoshopと同等にしてくれたら←CS5.1で改善とのこと
もっと便利になって、ファンも増えてくれるんじゃないかなぁ…と今後にさらに期待しています。






…なんかまとまりのない文章になってしまいましたが…。


これからもFireworksでいいデザイン作るぞー!!!



※この記事の内容は私が自分で使っていて思ったこと、感じたことをまとめました。
情報や表現などで間違いなどあればご指摘いただけるととてもうれしいです