Web用画像の作成でイラストの画像の輪郭が汚くなる減少の回避策は？

今、あるサイトから画像を購入して、いくつかの画像を組み合わせ、編集して1つの画像を作成しています。
用途は、WEBのホームページ用に作成しております。

そこで、人物のイラスト画像をepsファイルでダウンロードして、それを縮小してから背景画像の上にのせて1つの画像にした時、人物画像が来たくなるので、底の部分でどのように改善できるかご助言して頂きたいです。

私がしている方法をまず説明します。
Illustratorでの編集はまだあまり経験がないので、難しく、Illustrator →Photoshopという二段階でしています。

1) EPSファイルをIllustratorで開き、ファイル→書き出しで、Photoshop PSDファイルに書き出し
2) Photosohpで、そのファイルのレイヤーをスマートオブジェクトに変換
3) 画像の編集
　・サイズの縮小、切り抜き、レイヤー効果の追加など
4) イメージ→画像の解像度
　・幅と高さを変更
　・再サンプルにチェック入れ、自動を選択
　　→OK押下
　　→これで縮小しています。
5) 縮小した画像を別の背景の画像に「埋め込みを配置」で取り込み

4) Photoshopから、「書き出し」→「書き出し形式」→jpg選択

このようなやり方で、複数の画像を1つにして作成していますが

イラストの人物画像などが、縮小して背景の上にレイヤーとして置いて作成すると、
人物の輪郭がブラウザーで表示した時、荒くなり汚いです。
これは、PhotoshopのPSDファイルに書き出した時点で画像劣化が起きてるのでしょうか？
しかし、Illustratorで、このイラスト画像を書き出しても同じように輪郭が汚いです。

イラストの元の画像はとても鮮明ですし
Photoshopで開いて縮小したものを背景の上に別レイヤとして置いた時もきれいです。

これはどのようにすれば、輪郭がきれいな人物のイラストとして作成出きるのでしょうか？
1. Photoshop使用した場合の方法
2. Illustrator使用した場合の方法
Illustratorは苦手なので、できれば、Photoshopでの方法をお願いします。
もし、Illustratorの場合、やり方を具体的に書いて頂きたいです。

よろしくお願いします。

質問者からの補足コメント

• 

  イラストのEPSの画像は、レイヤーウィンドーで見ると、沢山のグループフォルダーの中に、沢山のパスが作成されたものが入っています。
  このような場合、画像の加工するのも大変なようにおもいます。
  その辺のやり方も教えてほしいです。
  初心者で、わからないことだらけですみませんが、よろしくお願いします。

    補足日時：2016/11/06 11:30

• 

  確認すると、IllustratorからPSDファイルに書き出す時にも、ご指摘の解像度を選択かのうなのがわかりました。そこで300dpiにすることが出来ます。また、その他というのもあります。その他にすると、dpiの数値を入力出来ます。ここで400dpiなど、大きい数値を入れるのはどうなのでしょうかね？

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/11/07 09:42

No.6 ベストアンサー 回答者： そらたに 回答日時： 2016/11/10 11:13

＞800pxの横幅で表示するのに、Photoshopで2000px, 300dpiで作成しています。

試しにやってごらん
2000pxの画像をいきなり800pxに画像解像度の変更をした画像と
2000pxを1000pxに画像解像度の変更をしてから、800pxに画像解像度の変更した画像とそれぞれ1600%（最大に拡大した状態）で見てみましょう

また、画像の再サンプルの方法（ニアレストネイバー法、バイリニア法、バイキュービック法、バイキュービック法(滑らか)、バイキュービック法（シャープ））の違いも比べてください。



これ（この設定）しなさい、って教えるのは簡単だけど、それだと応用が利かなくなるから（それでまた質問してたら、完成は遅くなるから(^_^;）、色々試して知識と経験を蓄えてください

この回答へのお礼

2000から800にいきなり変えたのと、2000→1000→800に変えたのを比較すると、二段階で変えた方が、1600%で観てみると、若干、細かい画像のピクセル変化が見て取れました。

画像の再サンプルの方法では、ニアレストネイバー法、バイリニア法、バイキュービック法、バイキュービック法(滑らか)、バイキュービック法（シャープ）の違いをみてみました。2000px→1000pxにそれぞれの方法で変えて、比較しました。1600%に拡大して比較すると、正直言って、はっきり違いがわかりませんでした。ネットで調べると、バイキュービック法（シャープ）が縮小の場合には良い方法であると書いてありますが・・・

他に比較の仕方があるのでしょうか？

お礼日時：2016/11/10 14:14

No.5 回答者： そらたに 回答日時： 2016/11/08 11:45

＞ラスタライズされているから、Webにアップする時に画像解像度を縮小した時点で、やはり粗くなったりするのでしょうか？

荒くならないように最終的な解像度のにしてください
いきなりweb用に保存を選んで解像度を落とすんじゃなくて、画像解像度で、まず半分のピクセル寸法に落としてから、次にもう一度画像解像度の変更を行って72dpiにするとか

フリンジの削除で周辺の荒れた部分を削除してからレイヤーの統合をしたり、消しゴムで消したりとか、色々ですよ。

この回答へのお礼

Webで、800pxの横幅で表示するのに、Photoshopで2000px, 300dpiで作成しています。これをWebにアップする時、そのまま、JPGなどの画像にサイズは変えず変更して、Webにアップしています。
この場合に、どのように解像度を変えるのかなど対応方法を教えてほしいです。
（▲）で説明している、まず半分にピクセル寸法を落としてからという部分と、次にもう一度画像解像度の変更を行って72dpiにするというのが良くわかりません。Webにアップする場合、72dpiにせず、300dpiでアップするのは良くないのでしょうか？
初心者がNetで調べながら覚えているところなので、多分、基本的なところがかけてるかもしれませんが、回答のほうよろしくお願いします。

お礼日時：2016/11/10 10:47

No.4 回答者： そらたに 回答日時： 2016/11/07 20:33

>ここで400dpiなど、大きい数値を入れるのはどうなのでしょうかね？

試しにやってみてください
４００とか８００とか１６００とか数値を変えて

この回答へのお礼

400と、1000の数値をdpiに入力して、epsファイルをPhotoshopで開きました！するとね、画像のサイズが違いました。サイズが大きくなっても画像が鮮明なのには驚きましたが、これって、ラスタライズされているから、Webにアップする時に画像解像度を縮小した時点で、やはり粗くなったりするのでしょうか？

お礼日時：2016/11/08 10:18

No.3 回答者： そらたに 回答日時： 2016/11/06 17:58

PSで開く時にウインドウが出るでしょ？

その時に、解像度をとりあえず、300dpiにして取り込めばいいよ

画像はCS2ね

この回答へのお礼

ありがとうございます。それと、画面解像度というのもありますが、今のところ、Webで表示するサイズよりも大きめの画面解像度にしていると、表示がきれいなようです。
EPSを取り込むのは、Illustratorから書き出すのも、Photoshopで取り込むのも同じ解像度を選択出きるのでしょうか？

お礼日時：2016/11/07 09:11

No.2 回答者： そらたに 回答日時： 2016/11/06 16:03

＞しかし、Photoshopでepsを読み込む時、ラスタライズされます。

ラスタライズされると、画質が落ちますので、それは避けたいです

解像度を上げればいいやん。

そもそもがｗｅｂ画像という画質の低いデータの作成なんですから　(^_^;

この回答へのお礼

私はまだ初心者ですのですみませんが、「解像度を上げればいいやん」というところを、もう少しわかりやすく順番に説明していただけないでしょうか？

お礼日時：2016/11/06 16:53

No.1 回答者： そらたに 回答日時： 2016/11/06 13:21

PhotoshopでEPSが読み込めるので、１の作業は不要です

この回答へのお礼

しかし、Photoshopでepsを読み込む時、ラスタライズされます。ラスタライズされると、画質が落ちますので、それは避けたいです。

お礼日時：2016/11/06 15:35