IllustratorとPhotoshopについて

質問

はじめまして。

現在、ホームページ制作ソフトで悩んでいます。
今は、ホームページの画像などをFireworksで制作しているのですが、IllustratorとPhotoshopで制作してみたいと考えています。

ですが、いざ制作に入ろうとすると、どれをIllustratorで制作して、どれをPhotoshopで制作したらいいのかがまったくわかりません。
Fireworksの時は一つのソフトで全てがまかなえたのですが、二つの高機能ソフトだと役割分担がまったく見えてきません。
たとえば、Illustratorでもphotoshopでもボタンは作れるようです。

イラストと画像修正などの区別があるようなのはわかりました。上記のようなボタンの制作などホームページの部品作りについてがわかりません。

このような（例：画像中心のHP）ホームページならこちらのソフトで制作するというような使い分けなどはあるのでしょうか？

ご回答よろしくお願いします。

回答No.3

noname#35109 · ベストアンサー

＃１，＃２の方のおっしゃっていることと重複しますが，
ボタンの親戚である，アイコンの場合，
Microsof でも，

ドロー（ベクトル（またはベクタ））系ソフトで作図
　　→　ペイント(ビットマップ（またはラスタ）)系のソフトで味付け

というパターンで作成されているようです。
「Windows XP 用アイコン作成法」
http://www.microsoft.com/japan/msdn/windows/windowsxp/winxpicons.asp
　引用：
　ドロー系 アプリケーションで描画され、
　Adobe Photoshop での操作を経て、
　美しいイメージになります。

また，私もそうしています。
また上記ページにはドロー系 アプリケーションで描画と書いてありますが，
ソフトの実名を挙げると，
おそらくドロー系 アプリケーションとは Illustrator のことだと推測されます。

慣れていないせいか，
私は，上のようなアイコン画像を作る場合，
どうやったら，きれいにうまく 0 から Photoshop で描けるのか，その方法がわかりません。
ドロー系のソフトなら，お手の物にスイスイ描けます。
でも，ドロー系だけだと味がないので，味は PhotoShop です。
やはり，上のようなものは，
Illustrator → Photoshop というのが一般的だと思います。

写真加工は，Illustrator を通さず，直接 PhotoShop ですね。
写真はピットマップ系（またはラスタ系）の画像です。
つまり点々の集合体です。

ドロー系の画像はデータがベクトルデータ（数式）であるため，拡大縮小に強いです。
例えば円を描いたとして，いくら拡大しても円は円ですから，粒子が荒れるなどということは起こりません。しかし，写真のような数式では表しにくいような複雑な模様には不向きです。
点描なども入れて凝りに凝ると，ファイルもかなり重くなります。

ラスタ系画像はデータがドットの集まりであるため，拡大縮小に弱いです。
例えば円を描いたとして，拡大すると，エッジのギザギザなどが出ます。
ギザギザを出したくなければ，バイキュービック方などを使い，元のデータ自体を修正しなければなりません。
しかし，写真の複雑な模様には向いています。

という感じでしょうか。
PhotoShop も パス などが扱えるため，
図も一応描けますが，トータルでは図的なものには不向きです。

極個人的には，Illustrator → Photoshop ではなく，
Flash → Photoshop のパターンが多いです。
Illustrator はパンフレットやポスターなど，印刷物の作成には向いていますが，
ボタン程度の印刷しないものでしたら，
また，上のURLのアイコン程度でしたら，
Illustrator を使うまでのことはなく，Flash でスイスイ描けます。

慣れると ドロー（ベクトル）系ソフトの方がきれいなボタンが描けると思います。
またいったん描いたものはボタンだけでなく，巨大な印刷物にも使えます。
しかし，最終仕上げはやはり，Photoshop でしょう。

回答No.2

SortaNerd

私ならホームページ作成はPhotoshopで全部まかなえそうな気がしますが…

一応使い分けとしては、
・Illustrator
「ベクタ画像」と呼ばれる曲線の組み合わせを扱うので拡大縮小が自在。
線のかっちりした図形を描くのに向く。言い換えればアニメ塗り。
作り置きした部品を組み合わせレイアウトする時にも便利。
・Photoshop
「ラスタ画像」と呼ばれる点の集まりを扱うので拡大すると画像が荒くなる。
ぼかしや変形など多彩な機能で複雑なイラストが描ける。
Illustratorの機能もそれなりにマネできる。

一番の違いはベクタかラスタかという事ですが、HPに使うような低解像度の画像を扱う限りはPhotoshopだけでもそう困ることはありません。
高解像度のラスタ画像は恐ろしくメモリを消費しますので。(逆に言えば大量のメモリを積んでいればPhotoshopだけでもかなりのことが出来る)

回答No.1

sutead_02

私の場合は、ボタンなどを含めたページ全体のレイアウト（単純な平面画像）をイラストレーターで作り、それをフォトショップで読み込んで、立体化したり、影をつけたり、あるいは画像を合成したりして、ほぼ自分の考えているＷＥＢページと同じデザインに仕上げます。
その際、ロールオーバーが必要なボタンなどは別レイヤーにオーバー時の画像も作っておき、ＦＬＡＳＨを入れる場所も擬似的に確保しておきます。
その後、ファイアーワークスで開いてスライスで切り分け、ロールオーバーやリンクの設定したあとＨＴＭＬと画像を書き出して、最後にドリームウィーバーに流し込みます。

ボタンをデザインするだけなら、ファイアーワークスだけでもなんら問題はありませんが、どうしてもイラレやフォトショを使いたい場合は、以下のような使い分けがよいかと。
■丸や長方形の単純型ボタン・・・・・フォトショップ
■複雑な形状のボタン・・・・・・・・イラストレーター