WEB素材のための解像度の話

解像度って難しい。WEB素材の為の解像度の話をしてみよう。

1画素(1pixel)を見よう

フォトエレなど画像加工ソフトで写真など画像を開こう。

画像をめいっぱい(たぶん1600%)拡大してみると、四角がいっぱいあるのが確認でるでしょうか?
この四角1個が、日本語で1画素(やすぴ的には1粒とか点って発想)、英語では1ピクセルまたは1ドット。一色なのです。

※ピクセルは色のついたの点で、ドットはただの点。同じ点だけどちょっと違う。でも点という意味では一緒だ。

dpiってなんだ?


解像度の単位はdpi。dはドット pはパー iはインチ

訳して1インチあたりのドット数。

つまり「1インチ(約2.5cm)にドット(粒)をいくつにします」を表す単位。

左図を見てみよう。1インチあたり8粒で8dpi。

パソコンの画面にも解像度がある

パソコンの画面の解像度

パソコンの画面には、画面の解像度がある。Windowsのパソコンなら、解像度は96dpi。Macなら72dpiだ。
画面1インチあたり96ドットか72ドットならんでいるのね。

上記で1画素を見てもらった。あの画像の1粒(ピクセル)をパソコンの画面の1粒(ドット)にちょうど「1対1」に映すともっとも綺麗に見える。 WEB(またはホームページ)はパソコンの画面を通して閲覧するものなので、WEB用に素材を作ったり写真を加工する場合は、パソコンの画面の解像度と同じ解像度で作成するといい。

パソコンの画面の解像度に合わせてつくる

72dpiでつくろう

では解像度は96dpiと72dpiと両方あるけどどっちで作ればいいかというと、72dpiでつくろう。

Photoshop Elementsで「新規」(3.0の場合「新規」→「白紙ファイル」)から新しくファイルを作成する。
好きなサイズにしたい場合、ドキュメントサイズを「カスタム」にして幅や高さの単位は「ピクセル」で、解像度は「72」にしよう。

Photoshop ElementsでWEB用素材として保存する場合、「WEB用に保存」で保存する。この方法で保存すると自動的に解像度を72dpiにしてくれる。便利だね。

「1対1」=100%


100%表示

慣れないうちは、パソコンの画面に表示される実物大で作成した方がいい。実物大とは100%表示にすればいい。

1個の画素(ピクセル)をパソコンの画面の1個に映す「1対1」で映すのが綺麗といったけど、それは、画像を拡大したり縮小したりできるソフトで閲覧している場合の「100%」と同じだ。

パソコンで閲覧するものをパソコンで作るのだから、作りたい大きさは「100%」表示でみたまんま好みの大きさに作成する。大きすぎたから小さくしたいと思ったときはフォトエレでサイズ小さくしてつかおう。WEB作成ソフトなどでページに画像を入れてから大きさを調整するの「1対1」で映すのを崩すので、おすすめできないよ。

※何%で表示しているかは画像のウィンドウの上部で解る。デジカメの写真を100%にすると、どえらく大きくなるが、WEB用に小さくする作業で大きさが把握しやすいよ。

トップへ
Written by Estudio Yasuya
2004 Estudio Yasuya All Rights Reserverd.