ウェブデザイナーへの道のり【第4話】加工した画像を保存してみよう!!~Photoshopでのtiffとjpgへの書き出しとは?~

・Photoshopで画像を保存する際のやり方について詳しく知りたい!!

・PhotoshopでTiFFとJPEGに書き出すため、やり方としての流れを1から分かりやすく知りたい!!

そんなあなたに!!この記事ではPhotoshopを使ったTiFFとJPEGへの画像の保存方法を詳しく1から紹介しています

 

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

 

※前回お話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第3話】まずはここから始めよう~Photoshopで色調補正「色相・彩度」とは~
・前回の話に続きPhotoshopの色調補正について、より詳しく知りたい!! ・Photoshopの色調補正の「色相・彩度」に着目し、よりわかりやすく知りたい!! そんなあなたに!!この記事では、Photoshopを...

 

 

 

 

 

めいちゃん
めいちゃん

今回は加工した写真や画像を必ず必要になってくるのは保存方法について紹介していくよ!!

 

 

みぃちゃん
みぃちゃん

うんうん!!せっかく加工した写真が消えちゃったら困るもんね!!

 

 

めいちゃん
めいちゃん

そうだね!!大切なことだからしっかり覚えていこうね!!

 

 

みぃちゃん
みぃちゃん

はーい!!

 

 

スポンサーリンク

画像の保存形態について

 

めいちゃん
めいちゃん

まず、画像を保存するにあたって、書き出しをしていく必要があるんだ!!保存形態はいくつかあるのだけど、どんなものがあるか紹介していくね

 

みぃちゃん
みぃちゃん

書き出し?

めいちゃん
めいちゃん

そうそう!!使いたい場所に合わせた形状で保存していくということだよ!!

みぃちゃん
みぃちゃん

なるほどね~

 

めいちゃん
めいちゃん

画像を保存する方法としてあげられる形式はJPEG、GIF、PNG、SVG、Tiffといったものがあるよ!!

 

みぃちゃん
みぃちゃん

なんだか沢山あるんだね~

 

めいちゃん
めいちゃん

そうだね~。今回はPhotoshopを使っていく上で、特によく使われる「JPEG、PNG、Tiff」に注目して紹介していくよ!!

 

1.JPEGとは!?

めいちゃん
めいちゃん

まず、Webで使われることの多い画像の形態として有名なものとしては「JPEG」があげられるよ!!

 

みぃちゃん
みぃちゃん

ほうほう!!

 

めいちゃん
めいちゃん

JPEGは高画質で、画質指定をして保存もできる上、ファイルサイズがコンパクトなのが魅力的だよ!!

 

みぃちゃん
みぃちゃん

これは、使い勝手がよさそうだね!!

 

めいちゃん
めいちゃん

うんうん!!表現できる色の種類が1670万色と多彩ながら、高画質を保ったまま画像を圧縮と保存できるからかなり便利なのさ!!

 

 

みぃちゃん
みぃちゃん

写真など多くの色を必要とする画像に良さそうだね!!

 

めいちゃん
めいちゃん

そうだね!!JPEGはデジカメやスマホの撮影画像でもこの形式が多く用いられているからね~

 

みぃちゃん
みぃちゃん

そうなんだ~

めいちゃん
めいちゃん

1つ気をつけるとしたら、JPEGは不可逆圧縮な保存方法なので注意が必要なのさ!!

 

 

みぃちゃん
みぃちゃん

不可逆圧縮?

 

めいちゃん
めいちゃん

「不可逆圧縮」とは、一度画像を圧縮すると画質を元に戻せないという圧縮方法さ!!

 

みぃちゃん
みぃちゃん

元の画像には戻らない!?

 

めいちゃん
めいちゃん

そうそう!!加工する際は元画像をコピーしておくなど、注意しながら使う必要はあるものの、使い勝手が良いからしっかり覚えておく必要があるね!!

 

 

 

2.PNGとは!?

 

めいちゃん
めいちゃん

お次はPNGについてだけど、表現できる色の種類が最大280兆色とかなり多彩だよ!!

 

みぃちゃん
みぃちゃん

ものすごい多彩!!

めいちゃん
めいちゃん

うんうん!!その分ファイルサイズが大きいから容量が重くなてしまうところがあるよ~

 

みぃちゃん
みぃちゃん

そっかぁ~。

めいちゃん
めいちゃん

ただ、JPEGとは違って、圧縮によってデータが捨てられてしまうことがない可逆圧縮形式だから可逆圧縮を重視したい画像を作成するのに適しているのさ♪

 

みぃちゃん
みぃちゃん

なるほど!!写真が元に戻るのは安心感があるね♪

 

めいちゃん
めいちゃん

そうだね♪PNGは、漫画やアニメのように色数の少ないものから写真まで幅広く対応できるから用途が広がるのも良いところだよ

 

 

みぃちゃん
みぃちゃん

なるほどね~

 

 

めいちゃん
めいちゃん

だからこそ、PNGはJPEG形式とともに、インターネットで標準的に用いられる画像形式として広く普及しているのさ♪

 

 

 

3.Tiffとは!?

めいちゃん
めいちゃん

最後にTiffについてだけどTIFFはJPEGのように圧縮によってデータを損なうことがないのが特徴だよ!!

みぃちゃん
みぃちゃん

ほうほう。そのまま保存するってこと?

めいちゃん
めいちゃん

そうだね♪非圧縮式なので、画像を圧縮せずに保存するということだね~

みぃちゃん
みぃちゃん

ねるほど!!ファイルがとっても大きくなっちゃうってことかな?

めいちゃん
めいちゃん

そうだね~画質の品質は良い分、ファイル容量が極端に大きくなってしまうね~

みぃちゃん
みぃちゃん

そっかぁ~。どんなものに向いているのかな?

めいちゃん
めいちゃん

画質良くそのまま保存出来るからこそ、異なるOSやパソコン機器で画像ファイルを交換するのに向いているね

 

みぃちゃん
みぃちゃん

他のOSなどと共有するのに向いているんだね~!!Webなどホームページとかには使いにくいのかな?

 

 

めいちゃん
めいちゃん

そうだね~無圧縮でホームページに使えない形式だからこそ、先ほど紹介したJPEGなどに変換する必要があるね♪

 

みぃちゃん
みぃちゃん

なるほどね!!

 

スポンサーリンク

実際にPhotoshopで画像を保存してみよう!!

 

めいちゃん
めいちゃん

「JPEG、PNG、Tiff」について説明してきたけど、実際にPhotoshopで保存してみよう!!

みぃちゃん
みぃちゃん

よーし!!頑張るぞ!!

 

 

1.「JPEG」に書き出してみよう!!

 

めいちゃん
めいちゃん

まずはJPEGの書き出しだよ~♪

 

めいちゃん
めいちゃん

まずは、画面左上の「ファイル」をクリックして、「書き出し」→「書き出し形式」と進めていこう!!

みぃちゃん
みぃちゃん

はーい!!

 

めいちゃん
めいちゃん

書き出し形式の場面が登場するよ!!

みぃちゃん
みぃちゃん

ホントだ~!!出てきた~!!

めいちゃん
めいちゃん

この中の右上にあるファイル設定の中で「PNG」を「JPG」に直そう♪

みぃちゃん
みぃちゃん

直したよ~!!

めいちゃん
めいちゃん

そしたら、Webで使うことを想定して画像サイズを変えていくよ!!画像サイズを「幅1000px」に変えてね!!これにより、自然に「高さが750px」に変更されるよ♪

 

みぃちゃん
みぃちゃん

ホントだ~!!自然に変わった~!!

めいちゃん
めいちゃん

うんうん♪あとは書きだしを押せば出来上がりさ!!

みぃちゃん
みぃちゃん

わーい!!出来た~!!

 

2.「PNG」に書き出してみよう!!

 

めいちゃん
めいちゃん

次は「PNG」を書き出していこう~!!

 

みぃちゃん
みぃちゃん

はーい!!

めいちゃん
めいちゃん

まずは、画面左上の「ファイル」をクリックして、「別名で保存」と進めていこう!!

みぃちゃん
みぃちゃん

はーい!!

めいちゃん
めいちゃん

コンピューターまたはクラウドドキュメントに保存する選択画面が出てくるから、ひとまずここは「コンピューターに保存」を選択しよう♪

みぃちゃん
みぃちゃん

押したよ~♪

 

めいちゃん
めいちゃん

そうしたら、出てきた画面下にある「ファイル名」を入力後、「ファイルの種類」を選択してその中にある「PNG」を選択して「保存」したら完成さ♪

みぃちゃん
みぃちゃん

わーい!!これで「PNG」への書き出しも完璧だ~♪

3.「Tiff」に書き出してみよう!!

 

めいちゃん
めいちゃん

「PNG」と同じく、画面左上の「ファイル」をクリックして、「別名で保存」と進めていこう!!

 

 

みぃちゃん
みぃちゃん

押したよ~!!

 

めいちゃん
めいちゃん

次も「PNG」と同じく、「コンピューターに保存」を選択しよう♪

 

 

みぃちゃん
みぃちゃん

はーい!!

 

 

 

めいちゃん
めいちゃん

またまた「PNG」と同じく、出てきた画面下にある「ファイル名」を入力後、「ファイルの種類」を選択してその中にある「Tiff」を選択して「保存」したら完成~♪

 

みぃちゃん
みぃちゃん

やった~!!出来た~!!これで保存出来るようになったから嬉しい~!!

 

めいちゃん
めいちゃん

みぃちゃんがまた1つレベルアップしたね!!

 

スポンサーリンク

目的に合った保存方法を選択していこう!!

 

めいちゃん
めいちゃん

保存について紹介してきたけど、用途に合わせて保存方法を考えていくことが必要だね~!!

 

みぃちゃん
みぃちゃん

そうだね♪今回紹介してもらった「JPEG、PNG、Tiff」の特徴を生かしながら使っていく必要があるんだね!!

 

ろっぷくん
ろっぷくん

みぃちゃん~、ぼくに柿ピーの写真を「Tiff」の書き出しで送って~

 

ソラくん
ソラくん

ろっぷくん…柿ピーのことになると、何気に使いこなしてる…

 

 

 

※第5話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第5話】画像サイズと解像度とは!?~Photoshopで画像サイズと解像度を変更してみよう~
・Photoshopで画像サイズと解像度を変更するやり方について詳しく知りたい!! ・Photoshopでイメージ通りの雰囲気に合わせた解像度の流れを1から理解して変更してみたい!! ・Photoshopで印刷目的に合わ...