初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが…
さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。

web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…?
ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。

HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (4件)

勝手に減色されるために起きている


と推測されます。
Web用PNGで保存すると
使用色数は256色に抑えられます。

そのためそれ以上の色数を使っていると
勝手に色数が減らされるのでこの現象が発生しているはずです。

ではどうすればいいか
・最初から256色の画像を用意すればいい
のです。

http://help.adobe.com/ja_JP/Illustrator/14.0/WSE …
このへんの
・GIF および PNG-8 最適化オプション
・GIF および PNG-8 画像のカラーテーブルのカスタマイズ
辺りを参考にしてください。
    • good
    • 2
この回答へのお礼

正直PNGやGIF形式に関して全く知識がなかったのでとても参考になりました。
教えていただいたサイトは今後も役立ちそうです。
ありがとうございました!

お礼日時:2011/10/21 17:17

ディスプレイでの表示と印刷は分けて考えること。


地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。
ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi)
印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの2,3倍、もしくは6倍程度で作成して、HTML上でサイズを指定します。<img src="[URL]" width="300" height="200">なら、900×600ピクセルあたりで作成する。
 ただし、ブラウザが破壊的に縮小するため、ぼやけます。それを防ぐためには画像を背景にし、スタイルシートで変更すると良いですが、印刷時に背景を伊刷する設定をしなければならない。スタイルシートで画像を置き換える方法もありまずが、古いブラウザは対応していない。
    • good
    • 0
この回答へのお礼

web用画像は表示させたいサイズで作っておくのがいいという曖昧な知識で作業していましたが、目的や用途によって工夫が必要なのですね…
色々ためしてみます。大変勉強になりました。
どうもありがとうございました!

お礼日時:2011/10/21 17:10

2種類のスタイルシートの活用という手段もあります.



1.普段のブラウジングでは,
 閲覧用スタイルシートを使って,
 閲覧用の軽い画像が表示されるように設定します.

2.印刷用スタイルシートを併用すると,
プリントアウト時には,プリントアウトされる様に,
印刷しても綺麗なファイルサイズが若干大きめの画像に置き換わるように指定すればいいのではないでしょうか.
    • good
    • 0
この回答へのお礼

なるほど…!
まだまだ勉強中で分からない事だらけですが、試してみます。
ありがとうございました!

お礼日時:2011/10/21 17:12

Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。



pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。
つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。
これは、画面上の解像度が72dpiになっている以上仕方のないことです。

もし印刷でも品質良くしたければ、画像そのものを大きく作って、HTML上では縮小して貼り付けることです。
この場合、元々大きな72dpiの画像を縮小していることになりますから、HTMLをそのまま印刷すると画像が綺麗に出る可能性があります。(縮小していることで、解像度が高くなりますから)

ご参考まで。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHPに画像をアップすると粗くなりぼやける。

お世話になります。
HP作成初心者です。

【使用ソフトなど】
イラストレーターVer9・フォトショップVer6・Win XP

【手順】
イラストレーターで絵を描いて、
文字等を入れ(アウトラインやアンチエイリアス加工をしています)
完成した画像をフォトショップで解像度を調節してから
「WEB用で保存(jpg/高画質)」を選択して保存し画像をアップ
しています。

HTMLでの画像サイズのタグは、小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)、画像がぼやけたり粗くなってしまいます。

初心者で、このサイトを見て色んな保存形式に変えてみました。
png形式でもダメでした。

手順は間違っているでしょうか?
宜しくお願いします。

Aベストアンサー

> 「WEB用で保存(jpg/高画質)」を選択して保存し
この時点ではぼけとかは気にならないですか?
Jpegは最高画質で保存しても少しはぼけます。
色数が少ない、ハッキリしたものならGIFで保存。
写真のような色数多いのはJpegで。

> 小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)
ブラウザにもよるけど、本来のサイズ以外で表示すると汚くなります。
小さいのを大きく見せるのはもちろん、逆に大きいのを小さくしてもです。
1/2や2倍のようなきっちりとしたサイズではなく、中途半端な拡大/縮小では特に顕著です。

Photoshopの画像解像度の【バイキュービック法】での拡大縮小するような高度な処理は行われていません。
ブラウザでは【ニアレストネイバー法】のような単純な方式で行われます。


面倒でも適切なサイズの画像を用意することをお勧めします。

Qwebアイコンで、ぼやけない文字の作りかた。

イラストレーター9(OS-WINDOWS)で、
ホームページのアイコンを制作してるのですが、
WEB用に(GIF、JPG)書き出しすると、
文字がぼやけたようになってしまいます。
小さなアイコンを作りたいので、文字がはっきりした
アイコンをつくりたいです。

ドットで書かれたような、
(今表示されているこの文字みたいな)
はっきりとした文字のアイコンは
どうすれば作れるのでしょうか?

教えてください。
よろしくお願します。

(フォトショップ7も使用可能です。)

Aベストアンサー

#1です。
Illustratorから、PhotoShopに書き出してはいかがですか?このときのポイントとしては、Web用なので72dpi(または96dpi)とする。アンチエイリアス・レイヤー保持には、チェックを。
「テキスト編集を可能にする」にチェック!(アウトラインとなっていないのが条件です)
以降はPhotoShopで開き、テキストを#1回答の手順にて。

テキスト部分をラスタライズした状態でアンチエイリアスをかけないということが条件ですので(表現が変なのは、お許しを)。私個人の意見ですが、PhotoShopのほうがWeb用には有利な気がします(状態の確認ができますし)。パスのみはIllustratorで作成などを含めてです。

PhotoShopは苦手ということなので、補足をいただければ分かる範囲内で回答させていただきます。

がんばってください。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QWEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちら

WEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちらが良いでしょうか?
いつもお世話になります。
イラストレーターCSを使ってホームページの見出し部分を作成していますが、実際にWEB上に表示させると、文字が若干滲んだようになってしまい、綺麗に表示されていない気がします。
同様にフォトショップで出力してみても大差はありませんでした。

一般的にはフォトショップもイラストレーターもDTP目的で使うと思いますので、WEB用に使うのが間違っているのかもしれませんが、できればFireworksではなく、上記どちらかのソフトで作成したいと考えております。

もしイラストレーター、もしくはフォトショップから画像に落とし込んだ際に文字を綺麗に(くっきり)出力させる方法があればご教授いただけないでしょうか?
もしくは、上記以外のフリーのソフト等でオススメがあれば是非教えてください。

初心者質問で恐縮ですが、宜しくお願いいたします。

Aベストアンサー

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(アドビ版のドリームウィーバー)でwebしましょうって感じだったんですよ。
なのでフォトショで全然問題ないです。

実際現場でもフォトショ使う人も多いし、もちろんファイヤーワークス使う人も多いです。

イラレは…webってピクセル単位で気を使うというか、ドット絵的な作業もあるので、
正直向いてないと思います。(ベクターやラスターで調べてください)

まぁ、逆に印刷ものつくるならイラレベースじゃないとできませんね。
(画像処理だけフォトショ→イラレに貼り付け)

それと、ロゴなどを作る場合は、イラレで作ってフォトショに貼り付けて微調整しますね。
フォトショのパスツールやシェイプはヘボイので。。

まぁ・・今はフォトショのが素材とかも多いし、高機能だしやりやすいかもしれません。
ただ、ファイヤーワークスのが簡単につくれます。

あとフォトショで作るときに注意する点は、シェイプを使うときにオプションの「ピクセルにスナップ」にチェックしましょう。
じゃないと稜線がぼけます。

さらに、ぼけずに作っても大きさを変更するとまたぼけるので注意です。

フォトショ素材等
http://weblibrary.s224.xrea.com/weblog/photoshop/photoshop_2.html

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(ア...続きを読む

Qphotoshopで作成した画像文字(jpg)がぼやける

photoshop初心者です。
ウェブ上で表示している文字画像があり、それを修正する必要が出たため、photoshopでjpg画像を開き、前の文字を消して上書きし、再度、web用に保存しました。

しかし、保存した画像を見ると色が若干変わり、文字もぼやけたようになり、きれいに表示されません。
フォントは同じものを使用しており、保存する前はきれいに見えます。

背景は透過処理されており、文字は1色です。

ちょっとした修正、のはずが実現できず困っています。
ご存知の方いらっしゃいましたら、よろしくお願いいたします。

Aベストアンサー

#,2,3です。

保存の際はweb用に保存を選択していますか?
この際の設定がちゃんとなっているか確認してみましょう。

あと、元画像がgifだったということで…
その画像を開いたとき、インデックスカラーになっていると色が限定されてしまいます。
画像を開いたらRGBカラーになっているかチェックしましょう。
なっていなかったら上のメニューからイメージのモードを選択してください。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

QPhotoshopの縮小機能のぼやけについて

Photoshopって元データがでかい画像を取り込んでcomand+Tで縮小すると、
ものすごい画像が粗くなってぼやけてるみたいになってしまうんですけど、
これに対してなにか対策ってありますか??

回答よろしくおねがいします!

Aベストアンサー

当方Windowsなのでcomand+Tと言われてもわかりませんが、画像を縮小するとぼけるということでしょうか。
そういう場合はシャープをかけます。
アンシャープマスクかスマートシャープでよいと思います。

Qひとつの画像をWEBで異なる小さいサイズでキレイに表示させる方法

元画像が大きいものを、通常HTMLを使ってWEB上で小さく表示指定するとゲジゲジした不鮮明な画像になります(逆はもっと荒くなりますが)。
しかしそうなっていないWEBサイトを見かけるのですが、どういう手法で可能になるのでしょうか。

たとえばブラウザーで80や200ピクセルくらいなのに、それをコピーして確認すると700ピクセルあり、同じ画像を異なるサイズで表示できています。

Aベストアンサー

縦横の比率を元画像に合わせれば(例:縦100×横200の画像を→縦50×横100にするみたいな)
画像が不鮮明になる事は少ないと思われますが
古いIEブラウザーをお使いだと、もしかしたら画像にジャギーが出るかもしれませんね?


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報