Photoshop 6 を使用しています。
Webサイト制作で使いたい写真をPhotoshopで切抜いて、「Web用に保存」する際の、途中段階で解像度は上げるべきかどうかについての質問です。
今やっている手順としては次の通りです。
(1) 自分で撮った写真をPhotoshopで開く。(解像度を確認すると72pixel/inchと表示されています。)
ピクセル寸法 幅 1600 pixel 高さ 1200 pixel
ドキュメントのサイズ 幅 56.44 cm 高さ 42.33 cm
解像度 72 pxel/inch
(2) 被写体(マグカップなど)の外周に沿って切り抜く。
(3) (1)と同じ状態の各数値のまま「別名で保存」する (Photoshop *PSD *PDD 形式で)
(4) 外周をなくす為トリミングする「イメージ」⇒「トリミング」
各データは次のように変わります。
ピクセル寸法 幅 1089 pixel 高さ 966 pixel
ドキュメントのサイズ 幅 38.42 cm 高さ 34.08 cm
解像度 72 pxel/inch
(5) つづいて、写真の大きさを実際にWebサイトのページに掲載する大きさに変えます。
「イメージ」⇒「解像度」で「縦横比を固定」 「画像の再サンプル」にチェックを入れて
「バイキュウービック法」(元からこれになっていた為)を選択して 、
ドキュメントサイズを自分で決めた大きさの幅8cmに指定します。
8cmに変えると、各数値は次のように変わりました。
ピクセル寸法 幅 227 pixel 高さ 201 pixel
ドキュメントのサイズ 幅 8 cm 高さ 7.1 cm
解像度 72 pxel/inch
(6) (5)の状態で「Web用に保存」しました。
形式はjpegで、きれいに見せたいので最高画質または、値の指定を100にしました。
切抜いていますが、GIF形式ではないので透過できない為、「マット」で下地の色と同じ色を指定しました。
現在、このような流れで写真を切抜いて、Web用に保存しています。
【 質 問 】
上記(5)の段階で、「画像の再サンプル」にチェックを入れて、「解像度」の欄を350と入力すると次のようになります。
ピクセル寸法 幅 1102 pixel 高さ 978 pixel
ドキュメントのサイズ 幅 8 cm 高さ 7.1 cm
解像度 350 pxel/inch
( 350というのは、紙に印刷する際に350にしていたので72よりもきれいにする為には350かな?と思いこの値を入力しました。)
解像度は 72 pxel/inchのまま、350 pxel/inch のどちらにするのがよいでしょうか?
一般的にはこう・・・で、例外として・・・場合もある、など、教えてください。
また、これ以外に上記の流れの中で、おかしなやり方をしていたら、ご指摘ください。
よろしくお願いします。
No.4ベストアンサー
- 回答日時:
> pixel寸法の欄にpexelの値を入力して
そうです。
> 実際の長さがわかるという理由
> 必要な写真の大きさを的確につかむ為に
初期のMacintoshではモニタ解像度も72dpiで固定されていて、72ピクセル線を書いてやるときっかり1インチ(2.54cm)になりました。
当時としてはプリンタの解像度を72dpiにすると画面上がサイズも全てそのまま印刷出来て便利。
今のモニタは解像度(dpi)はバラバラで同じ大きさで表示される事はまずありません。
同じ12インチでも800×600のもあれば、1024×768以上のもあります。
1cmとかで作ってもそれは印刷すればそのサイズにはなりますが、画面上ではそうではないです。
画面に定規を当ててみれば分かりますよ。
余程厳密に設定されたブラウザ&画像の大きさをCSS利用してcmやinchで指定でもしていない限りは、実際のサイズとは程遠い大きさになります。
ブラウザ上では原則 ピクセル寸法で表示されるから、ドキュメントサイズで指定しても意味が無いし、dpiをちょっと変えるだけで表示される大きさも大幅に違ってきます。
ですから、貴方が綺麗だろうと思っていた350dpiで、8×7.1cm(拳程度)の画像を作ると,
ブラウザ画面上では1102×978 pixelと画面いっぱいのサイズになります。
72dpiなら予想していたのに近いかもしれないけど、それでも8×7.1cmにはなりません。
ピクセル寸法で指定した方がより分かりやすいです。
Photoshop等で等倍(100%)表示した時のサイズがそのまま利用される訳ですから。
解像度が指定(固定)されている印刷関係(DTP)であれば、貴方のやり方は正しいですが、Webでは通用しません。
失礼かもしれませんが、Web作っている人は解像度(dpi)?ドキュメント寸法にcm?という人の方が多数で、貴方のようなやり方は稀でしょうね。
↓以下が参考になるかな?
解像度/同人野郎のためのWEBサイトづくり
http://rinrin.saiin.net/~aor/hms/reso
追加の質問へ返信いただきありがとうございます。
書かれていた事を実際にやってみて、理解できました!
1回目の回答を受けた後はドキュメントのサイズ(cmなど)ではなくpexel寸法(pixel)で入力すべきだと知ることができましたが、画面に表示される時の大きさのイメージをpixelからどうやってつかむのかわかっていませんでした。
8×7.1cmの画像を72dpi, 350dpiそれぞれで作ってみると、72dpiの方はほぼ実際と近い大きさになり、 350dpiの方は画面いっぱいの大きさになってしまい、あらためて解像度、ドキュメントサイズ、画面で見えるサイズの関係を理解しました。
いままであまりにも無頓着でやっていました。
また、決め手は、『ピクセル寸法で指定すれば、Photoshop等で等倍(100%)表示した時のサイズがそのまま利用される。』という言葉でした。
いままで、PhotoshopでCtrl, Alt, スペースのキーで倍率を何気なくカシャカシャ変えて使っていましたが、今何パーセントの表示で見ているのか意識していませんでした。
Photoshopで100%の画面にして、それをWebページを見ている大きさだと意識して、そのままの見た目でPixelを増減させて、良いと思った大きさに決めればそれがネット上でも(同じパソコンのディスプレイなら)おなじ見た目になるという事を理解できました。
「同人野郎のためのWEBサイトづくり」も拝見しましたが、わかり易く、他にもためになる項目があり、とても勉強になります。
このたびは色々とご指導いただき、どうもありがとうございました。
No.3
- 回答日時:
72dpi
これは、以前のmacintosh(マック)で使用されていたモニタの解像度が、モニタサイズにかかわらず、72dpiに固定されていたことによるものです。
現行モニタは解像度が統一されていませんので画像解像度は何でもいい(決められない)ということになります。
「管理がしやすいようにビューアなどの解像度は72dpiだということにしましょう」ということです。
350dpi
これは、紙などの媒体に印刷したときの画素(ピクセル)サイズで、肉眼視限界の一番大きいピクセルサイズが300ppiだったことによるものです。(現場ではスポットサイズやインク滴サイズのdpiではなく、ppi:ピクセルパーインチです。)
WEB表示ではモニタ解像度に依存する表示なので、ダウンサンプルされた表示になってしまいます。
せっかく作った72dpiの画像でも、ページに2倍に拡大して貼り付けるとそれだけで36dpiになりますが、ビューアの補正で72dpiになりボケます。
結局は、どんなものでもモニタに表示されてしまえばすべての表示がモニタ解像度のピクセル(画像画素サイズ=モニタ画素サイズ)になっているということです。72dpiで貼り付けておけばモニタ画素サイズと一致するので綺麗なのです。
実際には「Web用に保存」とは等倍貼付用の最終成果物ということなので、解像度を高めに作っておき、高機能WEB編集ソフトでの機能で最終的に自動で72dpiにするというのが最善ではあります。
長くなってしまいました。
(中途半端とも思えた)72dpiという数値が、昔のマッキントッシュのモニタの解像度から由来していて、また、350ppiは印刷物を見たときの肉眼視限界の一番大きいピクセルサイズが300ppiで(それに余裕をもたせた数値で)ある、とのお話、興味深いです。
・ 現行モニタは解像度が統一されていない。⇒画像解像度は何でもいい(決められない)
・ 管理がしやすいようにビューアなどの解像度は72dpiだということにしましょう、ということになっている。
・ 結局は、どんなものでもモニタに表示されてしまえばすべての表示がモニタ解像度のピクセルになっている。
色々と教えていただき、どうもありがとうございました。
No.2
- 回答日時:
解像度(dpi)は1インチ(2.54cm)を何個点で表現するかという意味です。
印刷物なら点の密度が高い=解像度が高い方が綺麗に見えます。
72dpiだと点々が見えますが、300dpi以上だった肉眼ではなかなか区別できません。
Webページ等モニタ上で見るものは、ハッキリ言って解像度を無視して構いません。
350dpiだろうが72dpiだろうがそのピクセル数で表示されるので関係ないです。
極論、1dpiにしても画面上で見る限りは画質は全く変わりません。
webページで利用する画像は72dpiで利用したいピクセル寸法にして下さい。
印刷するなら、300~350dpiでドキュメントサイズを設定。
画像の再サンプル」にチェックを入れて「バイキュービック法」で。
「バイキュービック法」は他よりも演算に時間がかかるけど、ピクセル補完する事でいくらかは綺麗に拡大縮小できます。
この回答への補足
とてもわかりやすく解説していただき、ありがとうございます。
72pixel/inchのままやっていくようにします。
特に 『極論、1dpiにしても画面上で見る限りは画質は全く変わりません。』 この原則を頭にいれておきたいと思います。
すみませんが、『72dpiで利用したいピクセル寸法にして下さい』 について教えてください。 これは、ドキュメントサイズを入力するのではなく、pixel寸法の欄にpexelの値を入力して、ドキュメントサイズの幅と高さのcmはそれに伴って自動的に与えられるものを使うということでしょうか? 私はいつも実際の長さがわかるという理由で、ドキュメントサイズの縦横の長さでcmで指定していて、ピクセル寸法はそれに伴って自動的に表示されるままに使っていました。
Webサイトのページに写真を配置した後は、それを拡大縮小しないでその大きさをそのままページ上に使うようにしている為、その必要な写真の大きさを的確につかむ為にやっていました。
すみませんが、ピクセル寸法を指定する、事について私の認識の間違いを教えてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Photoshop(フォトショップ) 写真のサイズ変更 1 2022/08/07 16:00
- Excel(エクセル) excelの列幅高さが勝手に変わる(特定のPCだけ) 8 2022/07/14 16:51
- Photoshop(フォトショップ) Photoshop に代わるソフトはありますか? 5 2023/01/26 13:24
- Photoshop(フォトショップ) 【大至急】写真加工に強い方、お願いします。 現在、自作のブックカバーをプリンパさんに依頼しています。 6 2023/06/10 11:51
- 美術・アート 【Photoshop】設定したサイズが正しく反映されない事象の解決方法 1 2022/08/31 22:53
- その他(AV機器・カメラ) 【大至急】写真加工に強い方、お願いします。 現在、自作のブックカバーをプリンパさんに依頼しています。 2 2023/06/07 21:30
- Photoshop(フォトショップ) Photoshopの画像が重すぎるので軽くしたいです 7 2022/05/13 20:13
- モニター・ディスプレイ ワイドモニターの解像度が合わずMacの画面が横に伸ばされて表示されてしまう 2 2022/08/09 07:53
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のピクセル、KB、データ量...
-
500ピクセルって何ミリ?
-
10cmって何ピクセルですか?
-
VBの画面サイズについて
-
エクセルのピクセルは何センチ?
-
3m角の印刷に必要な画像サイズ
-
エクセルで拡大縮小せずA4め...
-
フォトショップの画像で、縦横...
-
エクセルでセルの幅や高さを数...
-
フォトショップ 指定したサイ...
-
1ピクセルって何センチ?
-
ドット、画素数、ピクセル、cm...
-
Photoshop使用時にPDFへ保存す...
-
イラストレーターで簡単にドッ...
-
Wiiの解像度は横720×縦480だそ...
-
ビットとピクセルの違い
-
イラストレータでピクセル指定...
-
JPEGの容量が大きくなる原因は...
-
データ量の求め方
-
pixel/inchとpixel/cmの使い分け
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
10cmって何ピクセルですか?
-
500ピクセルって何ミリ?
-
画像のピクセル、KB、データ量...
-
エクセルのピクセルは何センチ?
-
VBの画面サイズについて
-
フォトショップの画像で、縦横...
-
1ピクセルって何センチ?
-
エクセルで拡大縮小せずA4め...
-
1cmは何ピクセルか
-
フォトショップ画像の縦横比率...
-
JPEGの容量が大きくなる原因は...
-
画像のピクセルの縮小による解...
-
4cmの画像をパソコンで作成した...
-
エクセル2003の高さ、幅の...
-
イラストレータでピクセル指定...
-
フォトショップ 指定したサイ...
-
写真について 縦4cm×横3cmって...
-
エクセルでセルの幅や高さを数...
-
ビットとピクセルの違い
-
Illustratorで書いた線が出力後...
おすすめ情報