web制作で画像がぼやける問題について
- web制作において、画像がぼやける問題に悩んでいます。
- イラストレーターで作成した地図画像が保存する度にぼやける箇所が変わるため、混乱しています。
- 写真画像もjpegで保存すると少しぼけてしまうため、どのような処理をすれば画像のクオリティーを保つことができるか知りたいです。
- ベストアンサー
web制作 画像がぼやける
初めてHPの制作をしています。 今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。 ですが、イラストレーターで作った地図（主に線と文字、モノクロ）はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。 .jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが… さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。 web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…？ ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。 HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします！
- szk04
- お礼率94% (16/17)
- CSS
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
勝手に減色されるために起きている と推測されます。 Web用PNGで保存すると 使用色数は256色に抑えられます。 そのためそれ以上の色数を使っていると 勝手に色数が減らされるのでこの現象が発生しているはずです。 ではどうすればいいか ・最初から256色の画像を用意すればいい のです。 http://help.adobe.com/ja_JP/Illustrator/14.0/WSEFB85FE0-1C50-4b02-8392-D30DF1962EF5.html このへんの ・GIF および PNG-8 最適化オプション ・GIF および PNG-8 画像のカラーテーブルのカスタマイズ 辺りを参考にしてください。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ディスプレイでの表示と印刷は分けて考えること。 地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。 ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi) 印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの２,３倍、もしくは６倍程度で作成して、HTML上でサイズを指定します。<img src="[URL]" width="300" height="200">なら、900×600ピクセルあたりで作成する。 ただし、ブラウザが破壊的に縮小するため、ぼやけます。それを防ぐためには画像を背景にし、スタイルシートで変更すると良いですが、印刷時に背景を伊刷する設定をしなければならない。スタイルシートで画像を置き換える方法もありまずが、古いブラウザは対応していない。
お礼
web用画像は表示させたいサイズで作っておくのがいいという曖昧な知識で作業していましたが、目的や用途によって工夫が必要なのですね… 色々ためしてみます。大変勉強になりました。 どうもありがとうございました！
２種類のスタイルシートの活用という手段もあります． １．普段のブラウジングでは， 閲覧用スタイルシートを使って， 閲覧用の軽い画像が表示されるように設定します． ２．印刷用スタイルシートを併用すると， プリントアウト時には，プリントアウトされる様に， 印刷しても綺麗なファイルサイズが若干大きめの画像に置き換わるように指定すればいいのではないでしょうか．
お礼
なるほど…！ まだまだ勉強中で分からない事だらけですが、試してみます。 ありがとうございました！
- qualheart
- ベストアンサー率41% (1451/3486)
Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。 pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。 つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。 これは、画面上の解像度が72dpiになっている以上仕方のないことです。 もし印刷でも品質良くしたければ、画像そのものを大きく作って、HTML上では縮小して貼り付けることです。 この場合、元々大きな72dpiの画像を縮小していることになりますから、HTMLをそのまま印刷すると画像が綺麗に出る可能性があります。（縮小していることで、解像度が高くなりますから） ご参考まで。
関連するQ&A
- イラストレータ WEB フォント 可読性
web用画像(テキストの表)をイラストレータで制作、アウトライン化し、jpeg保存しているのですが、ブラウザで確認すると高さ13ピクセルほどの文字がどうしても汚くなってしまいます。文字のサイズから仕方がないかもしれませんが、いろんな方のHPを見ると画像の中の小さな文字ももう少しくっきりしています。どういった方法があるのでしょうか？詳しい方いらっしゃればお教えいただけると嬉しいのですが。よろしくお願いいたします。
- ベストアンサー
- グラフィックソフト
- イラレでWebおよびデバイス用に保存にすると画像が荒くなる
イラストレーターCS3（Win）でイラレデータを「Webおよびデバイス用に保存…」にするとGIF、JPEG（最高画質でも）、PNG、どんな形式に選んでも画像やテキストがゲジゲジに（荒く）書き出されてしまいます。 以前はこのようなことは全くなかったのですが、最近こうなるようになってしまいました。私がどこか設定をいじったのかアプリケーションが壊れてしまったのでしょうか。どなた様か宜しくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- ウェブ素材の制作で、正しい色で書き出されない。
MacOS 10.4.3 Tiger / Apple Cinema Display Illustrator CS / Photoshop CS / Dreamweaver イラストレーターで制作した、ウェブ素材をコピーして、フォトショップ上で新規書類を開いて、ペーストしたモノをWeb用保存すると、すごくどす黒い色になって書き出されてしまいます。 （例えば、イラストレーターやフォトショップ上では鮮やかなオレンジなのに、Web用保存したときだけ、どす黒くなる） ロゴなどのイラストレーターデータを、画像データとして使用したいのですが、色が変換されてしまうので、困っています。 また、フォトショップにコピペせず、イラストレーター上で完了してしまえば、色の問題はほとんどないのですが、PSにコピペするより、少しぼやけたカンジになるので、イラレ→PSという流れで制作しています。 両ソフト間では、同じカラー設定です。 RGB:AdobeRGB(1998) / CMYK:Japan Color 2001 Coated やはりイラレ→PSという流れは、良くないのでしょうか？ 現在はイラレにWeb用保存がありますが、ver.8の時代はどのようにされていたのでしょうか？ 私自身は、紙媒体を主に仕事しているのですが、ウェブ制作の現場の方の意見をお伺いしたいと思います。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- イラストレーターでWeb用画像を保存
イラストレーターでWeb用画像を保存したいのですが、「Web用に保存」で画像のサイズを確認すると、縦横とも制作時のサイズより１～２ピクセル大きくなってしまいます。 「画像タブ」をクリックしてサイズをリサイズして保存して、作られたものを確認してみると、制作されたサイズより１～２ピクセル小さい画像になっており、すき間が出来てしまっています。 キャンバスを画像にフィットさせるようなことが出来ればいいのですが。。。 ちなみに、作った画像は、GIFファイルです。 どなたか、この現象の解決方法をご存知の方、よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- web制作初心者です。画像は何で保存すると美しく表示できるのでしょうか？
web作成初心者です。イラストレーターで作った地図のデータをhtmlデータに貼り付けると粗くてきれいに表示できません。 GIFよりもJPGの方がきれいに表示できると聞き、イラストレーターで作って.aiで保存したデータをフォトショップで開きJPG保存してみたのですが文字は読めなく画像が粗くなってしまいます。フラッシュで作ったデータはきれいに表示するようですが、動画でもないので… なにか方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- IllustratorでのWEB用保存がうまくいきません
Illustrator10.0(9.0でも）でホームページに使用する画像を作っています。（写真も含みます） 画像全体をWEB用で保存して、その画像をホームページビルダーで 取り込もうと思っており「WEB用に保存」で保存をかけました。 写真もあるので、形式は「PNG-24」にしました。 背景は透過されて保存されているハズなのですが（透明部分にチェックは入れてあります） 実際にホームページビルダーで画像を挿入すると、透過されている ハズの背景が透過されず薄いグレーのような背景になってしまいます。 「PNG-8」にすればきちんと透過され、ホームページビルダーでの 背景（壁紙）がきちんと見えます。 ただ、PNG-8にしてしまうと画像全体が荒く写真などザラザラです。 PNG-24で保存した画像をホームページビルダーで透過させて表示 させるにはどのようにしたら良いでしょうか？ HPには背景を使いたいです。
- ベストアンサー
- その他(ソフトウェア)
- イラストレーターで文字画像(背景透明)をキレイにweb用書き出ししたい
イラストレーターで文字画像(背景透明)をキレイにweb用書き出ししたいのですが。 イラストレーター10.0 OS WindowsXP イラストレーターでテキストを入力し、 それを背景透明でweb用にgif画像で書き出ししました。 サイズは横177px,縦70pxです。 その中に文字を3行。1行目はフォントサイズ24くらい。 2,3行目はその細くなのでフォントサイズ10くらいです。 作っている画面では拡大してももちろんきれいなのですが、 そのきれいに見えているまま、書き出せないものでしょうか？ プレビューされる画像はギザギザで文字もほぼつぶれてしまっています。 これをキレイにつぶれないように書き出すにはどうしたらいいでしょうか？ やってみたこと アンチエイリアスにはチェックがついています。 アウトラインってのもよくわかりませんが、しました。 最終的にやりたいことは、 HPで背景を塗りつぶした表があり、その1行目のタイトル部分は画像にしたいです。 文字の色は白、背景を透過させて書き出したいと思います。 背景に色を付けてjpegというのは今回はやらずにいたいと思います。 質問するのに説明不足でしたらすいません。 あまり知識がないので、必要な情報があったら聞いてください。 よろしくお願いします。
- 締切済み
- 画像・動画・音楽編集
- WEB用に保存するとサイズが小さくなります。これの解決方法を教えてください。
はじめまして、今パワーポイントで企画書の作成をしているのですが、その際、キャラクター画像などをillustratorで作成して「WEB用に保存」でPNGとかJPEGに保存してから、パワーポイントの挿入で貼り付けています。 しかし、illustratorでA4サイズのドキュメントで目一杯のサイズにした画像もパワーポイントに貼り付けるとなぜか5分の4位の大きさに、少し小さk縮小されてしまいます。 上記の解決方法をご存知の方は教えていただけないでしょうか？
- ベストアンサー
- グラフィックソフト
- 画像に矢印と文字など書き込みたいのですが。
いつもお世話になります。 WEB上の画像をキャプチャして、 キャプチャした画像から切り取った画像を、 コピー＆ペーストでOpenOfficeの図形ソフトに貼り付け、 矢印や文字を書き込んで、 それをまたキャプチャして、PNGファイルで保存して、 メールに添付して送ろうとしています。めんどくさいです。 OpenOfficeからPNGかJPEGファイルで保存できるならいいのですが。 矢印や文字が描き込めて、JPEGかPNGで保存できるソフトをご紹介ください。 単機能で使い方が簡単なものがよいのですが。
- ベストアンサー
- フリーウェア・フリーソフト
- HP制作での質問です。
HP制作に関しての質問です。 全体の背景色を単色指定し、横センターに画像を配置したいと思っています。 横幅サイズの指定はしていないのですが、windowを横にのばした時に画像が常にセンター表示されるようにするにはどうしたらよいでしょう？
- 締切済み
- CSS
お礼
正直PNGやGIF形式に関して全く知識がなかったのでとても参考になりました。 教えていただいたサイトは今後も役立ちそうです。 ありがとうございました！