INDEX
目次
前の章に戻るこの章では、ピクセルと画像解像度の関係について学習します。
デジタル画像の最小単位を表す「ピクセル」と、その密度を表す「画像解像度」の関係についての理解は、デザイン制作の基礎知識として非常に重要ですので、しっかりと学びましょう。
【4-1】写真ファイルをPhotoshopで開こう
ダウンロードしたzipファイルを解凍してできた「PS4章画像素材」フォルダの中から、
「vermeer.jpg」をPhotoshopで開きます。
写真ファイルをPhotoshopで開く方法は複数あります。
ここでは、メニューバーからの操作でファイルを開く方法と、ドラッグ・アンド・ドロップでファイルを開く方法の2種類を説明します。
「vermeer.jpg」をPhotoshopで開きます。
写真ファイルをPhotoshopで開く方法は複数あります。
ここでは、メニューバーからの操作でファイルを開く方法と、ドラッグ・アンド・ドロップでファイルを開く方法の2種類を説明します。
方法①「ファイル」から「開く」を選ぶ
1. メニューバーの「ファイル」から「開く」を選びます
2. 開きたいファイルを選択してから、右下の「開く」をクリックします。
3. 上記の手順にて目的のファイルを開くことができます。
方法② ファイルアイコンをドラッグ&ドロップする
1. 開きたい画像のファイルアイコンをPhotoshopのホーム画面上にドラッグ&ドロップします。
2. 目的のファイルを開くことができます。
【4-2】まずは拡大・縮小表示と画面スクロールを覚えよう
ピクセルと画像解像度の説明をする前に、画像の拡大・縮小表示と、画像をスクロール移動する方法を説明します。
画像の編集作業中、頻繁に行う操作ですので、ここで身につけてしまいましょう。
画像の編集作業中、頻繁に行う操作ですので、ここで身につけてしまいましょう。
拡大・縮小表示（ズームツールの使い方）
・ 画像の拡大・縮小表示を行うためには、ズームツールを使用します。
・ ツールパネルから、ズームツール（虫眼鏡）のアイコンを選んで下さい。
・ ツールパネルから、ズームツール（虫眼鏡）のアイコンを選んで下さい。
拡大表示
マウスカーソルを画像の上に持っていき、クリックする度に拡大表示されていきます。
または、画像の上を右下にドラッグすることでも、拡大表示を行うことができます。
または、画像の上を右下にドラッグすることでも、拡大表示を行うことができます。
縮小表示
縮小表示する場合も同じズームツールを使用します。
キーボードのoptionキー（Windowsはaltキー）を押しながら画像をクリックすると、縮小表示されていきます。
または、optionキー（alt）を使わずに、画像の上を左上にドラッグすることでも、縮小表示を行うことができます。
キーボードのoptionキー（Windowsはaltキー）を押しながら画像をクリックすると、縮小表示されていきます。
または、optionキー（alt）を使わずに、画像の上を左上にドラッグすることでも、縮小表示を行うことができます。
ズームツールのショートカットキー
- ツールパネルで他のツールが選ばれているときも、space+⌘（windowsはspace+Ctrl）というショートカットキーを使用すれば、一時的にズームツールに変更することができます。
- ズームツールは、他のツールを使った作業中に、ほんの一瞬だけ使用したい場合が多いため、こちらのショートカットキーを覚えておくと、とても便利です。
スクロール移動（手のひらツールの使い方）
続いて、画像をスクロール移動する方法を説明します。
1. ある程度のサイズまで、画像を拡大表示して下さい。
それから、ツールパネルの「手のひらツール」を選択しましょう。
1. ある程度のサイズまで、画像を拡大表示して下さい。
それから、ツールパネルの「手のひらツール」を選択しましょう。
2. 画面上をドラッグすると、画像を好きな方向にスクロール移動することができます。
手のひらツールのショートカットキー
- ツールパネルで他のツールが選ばれているときも、spaceキーを押している間は、一時的に手のひらツールに変更することができます。
- ズームツールと同様に手のひらツールは、他のツールを使った作業中に、ほんの一瞬だけ使用したい場合が多いため、こちらのショートカットキーを覚えておくと、とても便利です。
【4-3】ピクセルとは
ズームツールと手のひらツールの使い方を覚えたところで、ピクセルについて解説します。
- まずはズームツールで、今開いている画像を限界まで拡大表示して下さい。
すると、画像が右のように表示されます。 - デジタル画像は、小さな正方形の点が集まって構成されているということが、これで分かります。
- この正方形の点のことをピクセルといいます。
- ピクセルはデジタル画像の最小単位であり、各ピクセルは一色の色情報を持っています。
- ピクセルが集合して形成された画像を、ピクセル画像、またはラスター画像、ビットマップ画像と呼びます。
【4-4】画像解像度とは
- 画像解像度とは、デジタル画像データ中のピクセル密度のことをいいます。
- つまり、「画像のきめ細かさ」を表す数値であると考えれば良いでしょう。
- 単位は「ppi」。これは「pixel per inch」の略です。
- プリントされた時に、1インチ（2.54cm）の中に、ピクセルが何個入っているかという「ピクセルの細かさ」を数値で表したものが、「画像解像度」です。
印刷に適切な解像度は300～350ppi
・ 印刷に必要な画像解像度は、300～350ppi（推奨は350ppi）です。
・ デジタルカメラ、スマートフォンで撮影したままの写真や、インターネット上の写真の解像度は、通常72ppi となっているため、解像度が足りず、印刷の仕上がりが粗く不鮮明な印象になってしまいます。
・ デジタルカメラ、スマートフォンで撮影したままの写真や、インターネット上の写真の解像度は、通常72ppi となっているため、解像度が足りず、印刷の仕上がりが粗く不鮮明な印象になってしまいます。
- Webページに使用する画像の解像度は、パソコンのディスプレイの解像度に合わせます。
- 一般的なパソコンのディスプレイの解像度は72～96ppiですので、Webデザインでは72ppiが基準となっています。
- 解像度72ppi の画像と350ppi の同じ画像をディスプレイで表示しても、見た目の違いはありませんが、解像度は高くなるほど、ファイルサイズが大きくなるため、ブラウザでの表示に時間がかかってしまいます。
- そのため、Webデザインの場合は、必要最小限の72ppiで画像を制作することが一般的です。
- ただし、Webサイト上の画像をMacの高解像度ディスプレイでも鮮明に表示させるためには、幅・高さを表示サイズの2倍にした画像を作成する必要があります。
画像解像度を変更してみよう
解像度72ppiの写真を300ppiに変更する
・ デジタルカメラやスマートフォンで撮影した解像度72ppi の写真を、印刷に適した300ppi に変更する場合は、以下のように作業します。
・ その場合、ピクセル数は変えずに解像度のみを変更します。
1. 「burger.jpg」をPhotoshopで開いて下さい。
・ その場合、ピクセル数は変えずに解像度のみを変更します。
1. 「burger.jpg」をPhotoshopで開いて下さい。
2. メニューバーの「イメージ」から「画像解像度」を選びます。
3. 「 再サンプル」のチェックを外します。
4. 解像度を300ppi に変更します。幅、高さが自動で計算されます。寸法のピクセル数は変わりません。
5. 「OK」ボタンをクリックします。
解像度300ppi の写真を72ppi に変更する。
印刷用の300ppi の画像データを、Webページに掲載するため解像度72ppiに変更する場合、ピクセル数を変更して画像を拡大・縮小します。
1. 「pasta.jpg」をPhotoshopで開いて下さい。
1. 「pasta.jpg」をPhotoshopで開いて下さい。
2. メニューバーの「イメージ」から「画像解像度」を選びます。
3. 「 再サンプル」はチェックを入れたままにします。
4. 解像度を72ppi に、幅、高さを希望の数値に変更します。ピクセル寸法が変わります。（Web用の画像の単位はpixelに設定しておきます）
5. 「OK」ボタンをクリックします。
注意事項
- PC やタブレット、スマートフォンで表示させることが目的のWeb画像は、どんなに解像度が高くても、デバイスが持つ画面解像度以上の画質にはなりません。
- 画面表示上重要なのは、解像度よりも縦横のピクセル数となります。