ホームページの画像制作について

質問

ウェブ制作の画像について質問があります。

私はホームページの画像を制作する場合、
イラストレーターか、フォトショップを使用しています。
しかし、なぜか画像が荒くなってしまいます。
解像度も高くしても、文字がギザギザしたりしてしまいます。
原因がわかりません。

Fireworksを使用すると綺麗な画像になるのでしょうか。
もしくは、他の方法があるのでしょうか。

お忙しいところ、恐れ入りますが、
回答どうぞよろしくお願い致します。m(_ _)m

回答No.5

monzenkozo · ベストアンサー

画像処理の段階で拡大縮小を多用すると画像が荒くなってしまいますが、そのこととは違いますか。

Photoshopの通常の画像処理というと、イメージ>画像解像度で解像度72、幅・高さを指定し、
画像の再サンプルにチェックを入れてOKを押すと思います。さらにimageReadyでWeb用に重さの加減をします。
普通はこれで問題ないはずです。

>解像度も高くしても、文字がギザギザしたりしてしまいます。
Web画像解像度は72pixelですが、この段階で解像度を上げても効果はありません。

それとご質問にあるFireworksはWebに特化した専用のソフトで、インスタンスという機能を利用すると、いくら画像をいじっても元の画像を維持することが可能です。
これは元の画像をシンボルとしてライブラリに登録して、それをインスタンスとして処理をする方法です。
つまりライブラリが親でインスタンスが子供になります。子供の画像を拡大縮小しても親は元の画像を維持したままということです。
この機能はグラフィックはもちろんWebボタンを作る上でも非常に優れたツールだと思います。
参考まで.........。

お礼

回答ありがとうございます。
お返事遅くなってしまい大変申し訳ございません。

Fireworksにはそういう機能があるんですね！
丁寧に教えてしていただきまして、本当にありがとうございます。
調べてみます。＾＾

回答No.4

valvalval

Illustratorならば、画面をピクセルプレビューで見て下さい。
それがWEBでの表示です。(アンチエイリアスあり)
その大きさならば、粗く見えるのは当然のことです。
小さな文字ならば、アンチエイリアスをオフにした方が、このページの文字みたいにクッキリした表示になります。

例えば、この文章もPrintScreenキーを押して画面を取り込み、ペイントに貼り付けて拡大表示すれば、どういう表示なのか判りますよ。

お礼

回答ありがとうございます。

確かにアンチエイリアスをオフにすると、その文字はクッキリしたように見えますが、
他のイラストレーターの文字がギザギザ画像になってしまいましたぁ。。。

私はMacを使用していますが、ペイントに貼り付けというのは、
フォトショップで確認するような感じでいいですか？
お手数おかけしてしまい、申し訳ございません。m(_ _)m

回答No.3

valvalval

> 画質も100に設定してWEBで保存しているのに、文字がぼやけたりします。
jpegはボケますよ。
小さな文字を扱うなら、GIFかPNGがイイです。

お礼

回答ありがとうございます。

確かに、文字と画像の場合「JPG」で保存していました！！
しかし、「PNG」で保存してみましたがやはり文字が潰れてしまいます。。。＞＜

「通信販売」という文字で
12Q、ヒラギノ角ゴシック、グレーで設定しています。

明朝や画数が多い文字だからボケてしまうのでしょうか。

回答No.2

SortaNerd

文字にアンチエイリアスはかけていますか?

お礼

回答ありがとうございます。

アンチエイリアスはかけています。
文字が小さいと（12Q）かなり潰れてしまったりします。。。

回答No.1

maxmixmax

そのイラストレーターとかフォトショップ上で、
ウェブページに使う大きさまで縮小してる？

imgタグ内で大きさ指定して縮小表示させたりしちゃだめだよ。

お礼

回答ありがとうございます。

タグで縮小はしていないので、大丈夫だと思います。
イラストレーターも文字をアウトラインをかけて、画質も100に
設定してWEBで保存しているのに、文字がぼやけたりします。

不思議です。。。
みなさんはどうやってやっているのでしょう？