ウェブデザイナーへの道のり【第5話】画像サイズと解像度とは!?~Photoshopで画像サイズと解像度を変更してみよう~

・Photoshopで画像サイズと解像度を変更するやり方について詳しく知りたい!!

・Photoshopでイメージ通りの雰囲気に合わせた解像度の流れを1から理解して変更してみたい!!

・Photoshopで印刷目的に合わせたサイズの変更を1から流れを知りたい!!

そんなあなたに!!この記事ではPhotoshopでの画像サイズと解像度を変更方法について1から詳しく紹介しています

 

※全話まとめ一覧はこちらからどうぞ↓↓(随時更新中♪♪)
目指せウェブデザイナー!!ド素人が1から初めてみた!?Photoshopマスターになるまでの道のり!?
・ウェブデザイナーとして、Photoshopを1から勉強してPhotoshopを使いこなせる方法を知りたい!! ・どこよりも分かりやすいPhotoshopの勉強法と使い方を知りたい!! ・隙間時間を利用しつつ、Photo...

 

※前回お話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第4話】加工した画像を保存してみよう!!~Photoshopでのtiffとjpgへの書き出しとは?~
・Photoshopで画像を保存する際のやり方について詳しく知りたい!! ・PhotoshopでTiFFとJPEGに書き出すため、やり方としての流れを1から分かりやすく知りたい!! そんなあなたに!!この記事ではPh...

 

 

 

 

めいちゃん
めいちゃん

今回は画像サイズと解像度について紹介していくよ!!

みぃちゃん
みぃちゃん

はーい!!

 

 

スポンサーリンク

画像サイズと解像度を学ぼう!!

 

 

めいちゃん
めいちゃん

加工した写真を実際にWebなどで使いたい際に画像サイズを変更したり、それに合わせて解像度を変更する必要があるからこそ、しっかり学ぶ必要があるんだ!!

 

みぃちゃん
みぃちゃん

そっかぁ!!頑張るぞー!!

 

「解像度」と「ビットマップ画像」とは?

 

みぃちゃん
みぃちゃん

そういえば、「解像度」ってなんなんだろう?

めいちゃん
めいちゃん

「解像度」とは、ビットマップ画像の細かさのことをいうんだ!!

みぃちゃん
みぃちゃん

ビットマップ画像?

 

めいちゃん
めいちゃん

ビットマップ画像とは点の集まりで構成される画像のことをいうよ♪

 

みぃちゃん
みぃちゃん

画像って点で出来てるの?

 

めいちゃん
めいちゃん

そうそう!!点の集まりで作られているため、拡大していく際に画像が荒くなってしまう特徴がある一方で、きめ細やかな色表現ができる良さもあるんだよ♪

 

みぃちゃん
みぃちゃん

そうなんだ~!!写真や画像は基本的には点で出来てるってことなのかな?

 

めいちゃん
めいちゃん

そうだね♪基本的にビットマップ画像でできているね~♪

みぃちゃん
みぃちゃん

そっかぁ~。ということは!!この点に着目して、変更していくということなのかな?

 

めいちゃん
めいちゃん

そうそう!!解像度はビットマップ画像の細かさを示しているというのは理解できたと思うから、この解像度の単位を見ていくのだけど、1 インチあたりのピクセル数(ppi)としてで示されるのさ!!

 

みぃちゃん
みぃちゃん

ほうほう!!

めいちゃん
めいちゃん

要するに、「解像度」が高いということは、1 インチあたりのピクセル数が増加する。すなわち解像度は高くなるということなのさ!!

みぃちゃん
みぃちゃん

なるほど~!!

 

スポンサーリンク

実際にPhotoshopで画像サイズと解像度を変更してみよう!!

めいちゃん
めいちゃん

ではでは実際にPhotoshopで画像サイズと解像度について触れていこう!!

 

みぃちゃん
みぃちゃん

はーい!!

 

1.画像の「解像度」や「サイズ」を確認をしてみよう!!

 

めいちゃん
めいちゃん

まずは解像度について今の画像がどのくらいの解像度なのか、また画像サイズがどのくらいなのか確認してみよう!!

 

 

めいちゃん
めいちゃん

まずはPhotoshop画面の左上にある「イメージ」をクリックして、「画像解像度」を選択しよう♪

 

みぃちゃん
みぃちゃん

押したよ~!!

 

めいちゃん
めいちゃん

次の画面で、画像解像度の画面が出てくるのさ♪

みぃちゃん
みぃちゃん

出てきた~!!

めいちゃん
めいちゃん

この画面により、画像の幅・高さ・解像度がまとめて確認できるよ♪

みぃちゃん
みぃちゃん

ホントだ!!ひとまとめになってるから確認できるね♪

 

 

2.解像度を変更してみよう!!

 

めいちゃん
めいちゃん

お次は解像度を変更していくよ!!

みぃちゃん
みぃちゃん

はーい!!

めいちゃん
めいちゃん

解像度を変更についてだけど、2通りのやり方があるんだ!!

みぃちゃん
みぃちゃん

ほうほう

2.①画像サイズを変えずに解像度を変更する方法

 

 

めいちゃん
めいちゃん

まずは画像サイズを変えずに解像度を変更していくよ!!

 

めいちゃん
めいちゃん

先程と同様に、Photoshop画面の左上にある「イメージ」をクリックして、「画像解像度」を選択さ!!

みぃちゃん
みぃちゃん

はーい!!

めいちゃん
めいちゃん

次に、「再サンプル」チェックを入れて解像度を「350ppi」に変更してみよう!!

 

みぃちゃん
みぃちゃん

なんだか画像が荒くなったような…

めいちゃん
めいちゃん

そうなのさ!!幅や高さを変えないまま解像度を上げてしまうということは、画質は落ちてしまうということになるのだ~

みぃちゃん
みぃちゃん

うーん…どうしたら画質を下げずに済むのかな?

めいちゃん
めいちゃん

そのためにもう一つの方法があるよ!!

 

2.①画像サイズを変えて、解像度を変更する方法

 

めいちゃん
めいちゃん

次は、画像サイズを変えて、解像度を変更するやり方を紹介するよ!!

 

 

 

めいちゃん
めいちゃん

こちらも同様に、Photoshop画面の左上にある「イメージ」をクリックして、「画像解像度」を選択しよう!!

みぃちゃん
みぃちゃん

うんうん

 

めいちゃん
めいちゃん

次に、「再サンプル」チェックを外して解像度を「350ppi」に変更してみよう!!

みぃちゃん
みぃちゃん

はーい!!

 

 

みぃちゃん
みぃちゃん

画像が小さくなった?

めいちゃん
めいちゃん

そうなのさ!!再サンプルを外すことで画像サイズは小さくなるものの、Pixelの数値は変わらないことで、画質がそのまま保たれることになるよ!!

 

 

スポンサーリンク

「画像サイズや解像度」の変更が簡易的な方法でもできる

 

めいちゃん
めいちゃん

お次は、簡易的な方法で画像サイズや解像度を変更してみよう!!

みぃちゃん
みぃちゃん

簡易的な方法?

めいちゃん
めいちゃん

そうそう!!画像サイズや解像度を変更する方法として簡易的な方法があるのさ!!

 

みぃちゃん
みぃちゃん

そうなんだ!!これは知っておきたいな~!!

めいちゃん
めいちゃん

そうだね♪ではでは始めるよ~!!

みぃちゃん
みぃちゃん

はーい!!

 

 

スポンサーリンク

簡易的な方法で画像サイズや解像度を変更してみよう!!

 

 

めいちゃん
めいちゃん

まずは画面左側にある切り抜きツールを選択して、画面上部に比率という文字が出てくるのを確認しよう!!

 

 

めいちゃん
めいちゃん

次に画面上部の比率の側にある矢印を選択してその中にある幅×高さ×解像度をクリックだよ♪

みぃちゃん
みぃちゃん

押したよ~!!

 

 

めいちゃん
めいちゃん

その調子だよ~♪そうしたら、画面上部の幅×高さ×解像度の数値を入力していくのだけど、例えば「はがきサイズ」としてみていくよ!!

みぃちゃん
みぃちゃん

はーい!!

めいちゃん
めいちゃん

幅×高さ×解像度の数値はそれぞれ「100mm×48mm×350px/inに設定する必要があるよ!!

 

みぃちゃん
みぃちゃん

なるほど~!!一気にサイズが設定されるんだね~!!

 

 

 

 

めいちゃん
めいちゃん

そうだね♪もう一つ例に挙げてみるね~!!例えば「Webサイズ」としてみていくよ!!

みぃちゃん
みぃちゃん

うんうん!!

 

めいちゃん
めいちゃん

幅×高さ×解像度の数値はそれぞれ「1000mm×700mm×72px/in」に設定する必要があるのさ!!

みぃちゃん
みぃちゃん

ほうほう!!こちらもサイズが簡単に設定されるから便利だね~♪

めいちゃん
めいちゃん

うんうん!!そうだね~♪

 

 

スポンサーリンク

傾きを調整しよう!!

 

めいちゃん
めいちゃん

サイズが決まったら、今度は傾きを調整していくよ~!!

 

 

みぃちゃん
みぃちゃん

はーい!!

 

 

 

めいちゃん
めいちゃん

画像の右上にカーソルを置いてスライドさせることで傾きを調整できるのさ~♪

 

 

みぃちゃん
みぃちゃん

ほんとだ!!画像が動いた~!!

 

 

めいちゃん
めいちゃん

傾きの角度が決まったら、画面上部にある「〇」をクリックして確定だよ~!!

みぃちゃん
みぃちゃん

わーい!!出来たぁ~!!

めいちゃん
めいちゃん

うんうん♪またひとつ前に進んだね~!!

 

スポンサーリンク

使う形態に見合った、使いやすいやり方を選ぼう!!

 

めいちゃん
めいちゃん

一通り見てきたけど、「イメージから再サンプルを外して解像度を変更する」のか、「切り抜きツールを使って解像度を変更する」のか使う形態に見合った、使いやすい方を選ぶ必要があるね~!!

 

みぃちゃん
みぃちゃん

うんうん!!使う形態に見合った方法や自分にとって使いやすい方法など使用状況に応じて使っていけば良いんだね!!

 

めいちゃん
めいちゃん

うんうん!!

みぃちゃん
みぃちゃん

またひとつ賢くなった気分で嬉しな~♪

めいちゃん
めいちゃん

うんうん♪この調子で次も頑張っていこう!!

 

 

※第6話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第6話】ポストカードサイズとして印刷!!~Photoshopで印刷してみよう~
・Photoshopで印刷する方法について詳しく知りたい!! ・Photoshopを使って、ポストカードサイズでの印刷する方法を1から知りたい! そんなあなたに!!この記事ではPhotoshopを使った、ポストカード...