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

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

A 回答 (3件)

一般的にホームページ上で使用する画像の解像度は 72dpiです。

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

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

回答ありがとうございます。
なんとなくわかってきたかも・・・。
ところで、最近のMACのモニタもWINと同じ96dpiが標準とは!?
それは知らなかったです!
早速自分でも調べてみます。

お礼日時:2005/02/27 18:44

まず、インターネットは基本的にディスプレイで観覧しますよね。



もし、インターネットで使う画像がディスプレイ解像度よりも高い場合、データ量は増えますが、ディスプレイでの画質が良くなるわけではありませんし、画像を縮小表示させるためブラウザにも負担が掛かり、極端な場合は極悪サイトと呼ばれかねません。

逆にディスプレイ解像度よりも低い場合は、画質が落ちてしまいますので、見た目を損なうことになります。

つまり、ディスプレイ解像度と同じ解像度の画像サイズ(Photoshopで100%表示)がインターネットでは、最適となります。そして、ディスプレイ解像度で表示させるための方法が、pixel指定になります。

Mac用のディスプレイは、元々72dpiで設計されていましたので、Mac用Photoshopのデフォルト値も、これに合わされています。これに対し、後発のWindows用ディスプレイは、75dpiで設計されました。
最近では、更に解像度が上がり、17インチ「1280x1024」で96dpiになっています(参考URLをご参考ください)ので、質問のような差があるわけです。

完成した画像(GIFやJPG)を含むホームページを印刷した場合、Photoshopで設定した解像度は、無視されてしまいますし、HTMLで表示させるには、前記した通りpixelサイズで指定する方が最適なので、どちらの解像度で作成しても問題はありませんが、お使いのディスプレイ解像度に合わせて置くのが理にかなっているのでないでしょうか。

参考URL:http://birdis.main.jp/palm/reso.htm
    • good
    • 3
この回答へのお礼

ご返答ありがとうございます。
とても参考になりました。
お礼が遅くなってしまい、すみません。

お礼日時:2005/03/13 04:05

解像度は関係ありません。


dpiが関係してくるのは、印刷物くらいです。
解像度(dpi)をいくつに設定しても、表示される画像の大きさには関係ないので。
注意すべき項目は、ピクセル数の方です。
    • good
    • 1
この回答へのお礼

回答ありがとうございます。
大事なのはピクセル数ですか・・・ちょっとまだそのへんの知識も足りないので、自分でもう少し調べてみます。

お礼日時:2005/02/27 18:40

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

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

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

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

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

Q★ホームページに載せる写真の解像度について★

現在、ホームページを作成中です。
デジカメで撮影した写真をたくさん載せる予定なのですが、
どのくらいの解像度にすればいいのかが分かりません。
写真を並べて少し文章を付け加えて、
その写真をクリックすると拡大されるようにしたいのですが・・・
何枚も並べたページの写真は、画面では8×6CMです。
拡大した写真は、12×9CMにする予定です。

また、1ページはどのくらいの重さに抑えればいいでしょうか?

初心者なもので、簡単な質問ばかりでごめんなさい。
回答、よろしくお願いします!

Aベストアンサー

#1 です。

dpi は、Dot Per Inch の略ですね。pixsel と言う言葉は、ほぼ dot と同じ意味なので、72pixels/inchとして頂ければ良いと思います。

ホームページ作成ソフトを利用すると、大量のスタイルシートやレイヤーを生成してしまう場合が多いので、どうしてもサイズ大きくなってしまう傾向があります。
(HTMLは、)一度コツを覚えると、とても簡単なものなのですが、慣れるまではやはり難解に映るのかも知れませんね。
ページをある程度作っていけば、徐々に「ここ、どうやっているんだろう?」などと興味を持つと思います。そう言う時に、少しづつでも HTML を覚えて頂ければ良いかな。と思います。

QPhotoshop で8bit /チャンネル と 16bitどちらを選ぶべき?

Photoshop 6の、イメージ→モードで、CMYKカラーやRGBカラーを選択しますが、同様に8bit /チャンネル, 16bit /チャンネルというものがあります。これはどちらを選んでおくべきでしょうか?
使用目的としては、photoshopで写真をレタッチしてから保存し、それをイラストレータに配置して印刷会社に出します。

Aベストアンサー

レタッチの内容とパソコンのスペックで使い分けて下さい。
8ビットと16ビットの違いは、階調数の違いです。たとえば1チャンネル当たり白から黒まで8ビット階調で表すなら2^8=256階調使えますが、16ビット階調なら2^16=65536階調使えます。チャンネルはRGBやCMYKのそれぞれのプレーン(RGBなら3原色だから3つ・CMYKなら4原色だから4つ)に相当します。
写真の明るさやコントラストなどを調整したり、色の濃淡をいじると、トーンジャンプを起こします。修正の前後でトーンカーブを見比べると一目瞭然ですが、修正後はトーンカーブが櫛の歯状になり画像の階調が失われたことがわかります。櫛の歯の山と山の間ではグラデーションが滑らかにつながらず、色の段差が発生するのです。軽い補正ならまずわかりませんが、大きく補正した場合にたとえば青空の緩いグラデーションに色の段差が見えることがあります。
16ビット階調のメリットは、このトーンジャンプを軽減できることです。16ビットモードに変換してから補正すると、トーンカーブのでこぼこが小さくて済みます。階調がほとんど失われずに画像補整が可能になります。
デメリットとして16ビット階調の方が当然データ量は倍になるので、パソコンに負担がかかります。また16ビット階調の画像を扱えるソフトは多くはないので、他の人にデータを渡す場合は、補正後に8ビットに変換して戻しておく必要があります。
Illustratorに配置する場合も8ビットに戻して置く方が無難です。

レタッチの内容とパソコンのスペックで使い分けて下さい。
8ビットと16ビットの違いは、階調数の違いです。たとえば1チャンネル当たり白から黒まで8ビット階調で表すなら2^8=256階調使えますが、16ビット階調なら2^16=65536階調使えます。チャンネルはRGBやCMYKのそれぞれのプレーン(RGBなら3原色だから3つ・CMYKなら4原色だから4つ)に相当します。
写真の明るさやコントラストなどを調整したり、色の濃淡をいじると、トーンジャンプを起こします。修正の前後でトーンカーブを見比べると一目瞭然ですが、修...続きを読む

QWeb上での標準的な画像サイズ(容量・表示サイズ)とは

現在ASP.NETでWEBアプリケーションを作成しています。

クライアントから画像ファイルをアップロードし、アップロードされた画像は別の画面で表示されるようにしているのですが、その際、画像に対して以下の編集処理を行おうと考えています。

 1.画像のデータサイズを軽量化する
 2.画像の縦横のサイズを一定のサイズに縮小(または拡大)する。

目的は、1については、アップロード先のフォルダの容量を抑えるため、2については表示したときに一定の大きさに統一することで見た目をよくしたいため、です。
(ホームページサービスやブログなどでも、画像アップロードにて自動的に画像の表示サイズやデータサイズが自動調整されているかと思いますが、それらと同じイメージです。)


そこで質問なのですが、上記の機能を考えた場合、
Webアプリケーションの標準仕様として、

Q1.画像のデータサイズは通常どれくらいまでとすべきか(データサイズの一般的な上限は)?
→画像の圧縮率を上げる場合、画質が劣化してしまうが、どの程度までなら許容されるか?

Q.画像の縦横サイズを編集する際、どれくらいのサイズで表示するのが一般的か?(長辺短辺比は1.4くらい、とどこかで読みましたが・・・)
→できるだけ元の解像度を引き継ぎたいが、下げざるを得ない場合は、解像度の最低ラインはどれくらいとすべきか?

いろんなサイトをみてはいるのですが、見れば見るほどいろいろあって、迷ってしまいます。

画像表示に関する一般的、標準的なルールなどがあれば、ぜひお教え願います。もしくは、そのような情報が載っているサイトなどがありましたら、教えていただけるとありがたいです。

以上、よろしくお願いいたします。

現在ASP.NETでWEBアプリケーションを作成しています。

クライアントから画像ファイルをアップロードし、アップロードされた画像は別の画面で表示されるようにしているのですが、その際、画像に対して以下の編集処理を行おうと考えています。

 1.画像のデータサイズを軽量化する
 2.画像の縦横のサイズを一定のサイズに縮小(または拡大)する。

目的は、1については、アップロード先のフォルダの容量を抑えるため、2については表示したときに一定の大きさに統一することで見た目をよくしたいた...続きを読む

Aベストアンサー

どのへんに基準を合わせるかにもよります。
ナローバンドにも対応する場合、ISDNで64Kbpsですから、画像は8~16KB程度でないときついでしょうね。(複数枚一変に表示する場合はもっとサイズを落とさないといけない)
ADSL1Mに合わせれば128K~256KBくらいですかね・・・
(どちらとも理論値で1~2秒程度で表示できる)

サイズは表示するデザインと合わせればいいと思います。
最近は画面解像度が800*600以上で見ている人がほとんどなので、それ以下にしておけば問題ないでしょう。

縦横比は、元画像の同じ比で、横か縦のサイズを合わせればいいと思います。

画像表示の一般的ルールというものがないので、サイトを作るときは困ったりします。
最終的にはどこまでの人をカバーするかになると思いますが。
最近の携帯まで視野に入れると画像サイズが小さくなりますしね。

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

Qフォトショップ 白黒画像を反転させるには?

フォトショップ(CS3)を使い始めたばかりの初心者です。

黒のバッググラウンドに白文字で書かれたイメージを、白地に黒文字へと反転させたいのですが、どのように操作すればよいのでしょうか?

アドバイスを頂けましたらと思います。
どうぞよろしくお願いいたします!

Aベストアンサー

Winなら「Ctrl」+「I」キーで、
Macなら「コマンド」+「I」キーで反転できます。

Q1ピクセルって何ミリですか?

1ピクセルって何ミリなのでしょう?
至急、お答えお待ちしております。
かなり急いでます。よろしくお願いいたします。

Aベストアンサー

1ピクセルが何ミリかという質問の答えになるかどうか分かりませんが、
WEB制作上に限って言えば、横100ピクセルの画像を作りたい場合、
Photoshop等では単位をピクセルで作れますが、Illustrator等の場合は、
100pointで作ります。
1pointは、0.35277ミリです。

Qイラストレーターのアウトライン化の解除方法??

ウィンドウズのイラストレーターの機能についての質問です。
アウトライン化がすでに実行されている文字の修正をする場合に、アウトライン化の解除はどうようにすれば出来るのでしょうか??
いろいろな本をみると、一度アウトライン化を実行すると、解除ができないと記載されていました。
ご指導頂きたくお願い申し上げます。

Aベストアンサー

それらの本に書かれている通り、一度アウトライン化をすると元には戻せません。

ただし、Ctrl+zやコマンド+zなどで作業を一つ前に戻すなどが出来るので
間違えたり、やり直したかった場合はそれで対処するしかないですね。

アウトライン化したデータを保存してしまった場合はどうやっても解除できないので
アウトライン化したデータを作った場合はアウトラインする前のデータも
別名保存などで残すのが一般的です。

Qイラストレーターの解像度はどこで設定するのでしょうか

イラストレーターV10です。
 外部のビットマップ画像を配置するような図面を作成する時の解像度の設定方法がわからなくて困ってます。
 新規に図面作成する手順として、「ファイル」→「新規」で大きさに適合したアートボードをつくり、その中に長方形ツールで「目安の用紙枠」を作りたいのですが、これがまだ解像度を設定してないので「目安」にはなりません。フォトショップから配置する時、解像度が合ってないので定規の互換性がなく、当然「用紙枠」をラスタライズのダイアログボックスで見てみると解像度が違ってます。
 イラストレーターは解像度の概念がないと聞きますが、ビットマップ画像を配置する以上何か最初に設定手順があるのではないかと思い、質問なのですが、イラストレーターで図面作成を始める時、手順として解像度は何処で、又、どの時点で指定されてますでしょうか? よろしくご指導お願いします。

Aベストアンサー

>イラストレーターの定規上で同じ10cmに配置される場合もありますが、10cmにならない(数倍になったり、数分の1)場合もあって・・・

毎日毎日十何時間もIllustratorをもう何年も使っていますが、そのような事はただの一度たりとも経験した事は有りませんが・・・。
もしかして「画像解像度」と「カンバスサイズ」を混同していませんか?
また、クリッピングマスクを使用していませんか?

Illustratorのリンクパレットの該当する配置画像をダブルクリックしてみて下さい。
情報が表示される筈ですから、そこで配置画像の元サイズから何%拡大、縮小されたかを確認出来ます。

一般的に印刷データとしてならIllustrator上で画像を拡大、縮小する場合25%前後なら殆ど影響が有りません。
縮小の場合は疑似的に解像度が上がるので綺麗にはなりますけどね。

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の方も修正する方法でもよけ...続きを読む

Qillustratorでの金と銀

グラフィックソフトillustratorで金色、銀色の
光っている感じを表現したいのですが
どうしてますか??
初心者なので教えてください。
お願いします。

Aベストアンサー

illustratorで金色・銀色を単色では表現出来ません。
グラデーションで表現します。
仮に長方形ツールで四角を描く>グラデーションパレット内の白黒のグラデーションの四角をクリック>その下のカラーバーの下の中央辺りを間隔を空けて3回クリックして四角を増やす(計5個にする)>各四角をクリックしてカラーパレットで色を変更(位置はグラデーションパレット内の位置の数値を変更)。
シルバーの場合(左端から設定、各数値は色の%、カッコ内はクリックした四角の位置)。
C3・M4・Y6・K10(0%)
C13・M15・Y8・K44(26%)
C0・M0・Y0・K4(52%)
C15・M17・Y11・K49(88%)
C0・M0・Y0・K40(100%)
ゴールドの場合(左端から設定、各数値は色の%、カッコ内はクリックした四角の位置)。
C2・M20・Y94・K0(0%)
C0・M0・Y25・K0(25%)
C20・M40・Y96・K7(60%)
C0・M7・Y51・K8(87%)
C0・M0・Y25・K0(100%)
後は色・位置・グラデーションの角度等を微調整。

illustratorで金色・銀色を単色では表現出来ません。
グラデーションで表現します。
仮に長方形ツールで四角を描く>グラデーションパレット内の白黒のグラデーションの四角をクリック>その下のカラーバーの下の中央辺りを間隔を空けて3回クリックして四角を増やす(計5個にする)>各四角をクリックしてカラーパレットで色を変更(位置はグラデーションパレット内の位置の数値を変更)。
シルバーの場合(左端から設定、各数値は色の%、カッコ内はクリックした四角の位置)。
C3・M4・Y6・K10(...続きを読む


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

人気Q&Aランキング

おすすめ情報