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