webで使用する画像を編集・制作する上で欠かせないツール、PhotoshopとIllustrator。

どちらも画像を編集するという点では共通しているのですが、得意不得意があります。
webで使用する画像を作る際には、それぞれの特性を知り、いいとこ取りをしながら画像を作っていくのが一番効率的です。

PhotoshopとIllustratorで画像編集の作業をする際の、長所と短所を簡単にまとめみました。

Photoshop：
種類：ビットマップ（点の集合）
長所：画像加工機能が豊富。万が一データが落ちてもある程度復元してくれる。写真や複雑な画像の編集や加工向き。レイヤーをフォルダで整理できる。スライスが簡単に出来る。
短所：拡大、縮小が画質に影響してくる。一度置いた画像の再リンク（置き換え）が出来ない。図形を作るとき、色の変更や、複雑な変形ができない。

Illustrator:
種類：ベジェ曲線（数式）
長所：拡大、縮小しても画質が変わらない。図形やフラットな絵を作るのに最適。図形の色変更が簡単。画像データの再リンクが容易に出来る。要素を整列しやすい。
短所：スライスは出来るが、使いづらい。落ちても復元してくれないので、定期的に保存する必要がある。イラレで作った図形は、Fireworksにコピペが出来そうで出来ない。画像加工の種類が少なく、細かい設定ができない。

以上を踏まえた上で、いつも私が行っている作業の順番は、
1.イラレでラフ（下絵、たたき台）を作る。
2.ページ構成をつくる際もイラレを使用。写真の切り取り・加工、図形の細かい加工をする時はPhotoshopで作業し、出来たらイラレに貼付ける。
3.構成が出来たら、編集＞書き出しでPhotoshopデータにする。
4.スライス機能で、実際にHTMLで組んでいく際に必要な画像をドラッグして囲んでいく。数字が割り振られるので、その部分を右クリックすれば、スライスのサイズを指定できる。このときに、スライス部分の名前を指定すると、画像名になってくれるので便利。
5.スライスする箇所を囲み終わったら、編集＞「web用に書き出し」をクリック。jpeg、png、gifなどの画像の種類や、保存先をここで指定する。

です。

それぞれの長所短所を知り、特性を生かしながら使いこなしていきましょう！