SaCSS Vol.21で話しました、WEBデザイン制作3ソフトについてまとめたものをアップしました。興味ある方はご参考下さい。
WEBデザイン制作で使われるソフトはPhotoshop、Illustrator、そしてFireworksが主に使用されています。これら3ソフトでWEBデザインを行った場合、どのような特徴があるのかを調べました。
Fireworksの特徴
スライスはFireworksが一番機能に優れています。WEBデザインで重宝するのは次の機能でしょうか。
- スライス用レイヤーの存在
- スライスレイヤーの重ね順による書き出し優先
- シンプルロールオーバーによるロールオーバー画像の書き出し
- ピクセルスナップによるアンチエイリアスの削除(CS5)
- グラデーションディザによるバンディングの低減(CS5)
- HTMLテキストの太字設定が可能
- ピクセル単位での制作・移動・調整
ロールオーバー画像については現在ではCSSスプライトとjQueryを併用することが広まっているため、必要性は下がっています。
また、オブジェクト名の変更を行う場合、より簡単にできる「1 Slice Name Changer」というのがあります。Fireworks8、CS3、CS4のみの対応ですが、該当バージョンを持っている方は入れると作業が捗ります。
詳しくはURLをご確認下さい。
http://d.hatena.ne.jp/zakira/20090612
Photoshopの特徴
WEBデザイン用途して重宝するのが画像やタイポグラフィの加工、制作です。
- スライスはスライスツール、ガイドによるスライス、レイヤーによる3種類
- グリッド指定可能(※グリッドがあってない場合があります)
- シェイプによる設置後の編集が可能
- スマートオブジェクト機能
- ロールオーバー画像は別途レイヤーかファイルを用意
PhotoshopCS4にはFireworksの様な疑似スライス機能を持ったプラグイン「スライスチップ作成パレット」があります。
詳しくはURLをご確認下さい。
http://lovwar.com/blog/?p=216
Illustratorの特徴
IllustratorCS5になってWEB用途の新機能が追加され、WEBデザインの制作効率が上がっています。
- スライスはスライスツール、ガイド、選択範囲からスライス、スライス-作成の4種類
- ピクセル整合による正確なボケない画像制作が可能(CS5)
- テキストのアンチエイリアスが実装(CS5)
- ロールオーバー画像は別途制作が必要
IllustratorはDTPレイアウトが基本のため、下位バージョンだとピクセル太りなど細かい問題が生じます。
そのため、WEBデザインするためのルールを設定しておく必要があります。
http://kojika17.com/2011/01/how-to-slice-the-ai-data-for-illustrator.php
結論としてはFireworksを使うのが一番バランスが良いです。ただ、各ソフトで一長一短があり、現場で制作環境によりソフトが決まるかと思われます。