【シリーズ2年前】
写真と本文は2007年9月15日のものです。

あなたに会えてよかったのてんさんから質問がありましたので、私なりの画像加工方法をご説明します。

画像が荒れる原因を考えてみましょう。
結論から言うと、小さいものを大きく引き伸ばしているから荒れてしまうわけです。

例えば、携帯電話のカメラ機能を使って撮影する場合、メールでも気軽に送れるようにと、画像サイズを小さ目にしている方が多いはずです。
上の写真が320×240ピクセルで、携帯の待ち受け画面サイズに調度良いくらいなので、このサイズで撮影したとしましょう。

この320×240ピクセルの画像でブログを作成し、同じ写真を壁紙に設定。
かつ、拡大表示させると、こんな感じに荒れて（ぼやけて）見えるのではないでしょうか？
拡大表示させるとは、320×240ピクセルの画像を1024×768ピクセルや1600×1200ピクセルに伸ばす、つまり、小さいものを大きく引き伸ばしているわけです。

私が1024×768ピクセルで写真をアップしているのは、以前、壁紙に使いたいという要望があったのと、今まで述べたような理由からです。
分かりやすく書いたつもりですが、てんさん、どうでしょう？

【シリーズ2年前】
写真と本文は2007年9月15日のものです。

あなたに会えてよかったのてんさんから質問がありましたので、私なりの画像加工方法をご説明します。

今度は画像の縦横サイズについて。
前記事の最後に1024×768ピクセルというサイズが出てきましたが、中途半端な数字ですね。
このサイズはどこからきたのかというと、パソコンのモニターの画面サイズです。
現在では大型化、ワイド化が進み、1024×768ピクセルのサイズも少なくなってきたかもしれませんが、まだまだ主流と言えるでしょう。
ですので、リサイズする画像のサイズを1024×768ピクセルにすると、壁紙に設定したときに画像が荒れることはありません。

ちなみに、私のモニターですと19インチの1280×1024ピクセルですので、1024×768ピクセルの画像を壁紙に設定し、拡大表示すると、間違いなく荒れます。
上のモグの写真は1600×1200ピクセルにリサイズしてアップしてみました。

【シリーズ2年前】
写真と本文は2007年9月15日のものです。

あなたに会えてよかったのてんさんから質問がありましたので、私なりの画像加工方法をご説明します。

続いて画像のトリミングです。
前記事の元画像のままでは縦横のサイズ、ファイルの容量ともに大き過ぎるし、また、写真としても面白味に欠けるのでトリミングします。
1日1枚アメショーの写真にアップしている画像で、トリミングしていないものはない、と言っても過言ではないです。
ある意味、下手な写真をトリミングでごまかしているっていうところもあります（笑）

今回は、大胆にタムの顔部分だけにしてみました。
最初にこの写真をみた方は、元の画像が前記事の写真だったとは思わないでしょうね。

トリミングする際には、縦横比も変更しています。
元画像は3456×2304ピクセルで3：2の比率。一眼レフデジカメでは一般的です。
個人的に、ウェブ上で公開するには4：3のほうが落ち着くような気がするので、余分な部分をカットすると同時に4：3の比率に変更しています。
この写真は1024×768ピクセル（4：3）です。

【シリーズ2年前】
写真と本文は2007年9月15日のものです。

あなたに会えてよかったのてんさんから質問がありましたので、私なりの画像加工方法をご説明します。

1日1枚アメショーの写真にアップしている画像は一眼レフデジカメで撮影しています。
設定を最大サイズにしているので、撮影した画像のサイズは3456×2304ピクセルにもなります。ウェブやブログで使用するにはかなり大きいですね。
また、最高画質に設定しているので、ファイル容量は4MBを超えることもあります。

ですので、撮影したままの状態でブログにアップすることは不可能。
毎回、トリミング、リサイズなどと画像加工して公開しています。
ちなみに、上の写真は元画像3456×2304ピクセル（2.8MB）を1800×1200ピクセルにリサイズし、ウェブ用に画質を落として100KB以下にしています。
これでも、まだまだ大きすぎです。

Web用に保存　低画質（画質10）　15.31KB

Web用に保存　標準画質（画質30）　15.39KB

Web用に保存　高画質（画質60）　30.14 KB

Web用に保存　最高画質（画質80）　51.17 KB
画像のサイズは360×240ピクセル。
低画質と標準画質のファイル容量は16KB弱でほとんど変わらず。
また、これくらいの画像サイズだと標準画質でも高画質でも画像の粗さの違いがほとんど分かりませんね。
ということは、わざわざ高画質で保存しなくても、標準画質で十分ということになります。

前記事の写真を今まで説明してきた流れに沿って加工
前記事の写真は何の変哲もありませんが、こうやってオナカだけ見せるようにトリミング、色補正をして、リサイズして、文字入れをして、ウェブ用に保存してアップするとこうなります。
イマイチな写真もそれなりに見えるでしょ？（笑）
デジタル一眼レフを使えばキレイ撮れるのは当たり前なので、今度は携帯電話のカメラ機能でどこまでまともな写真がアップできるかチャレンジしてみようと思います！
できるかな？？

「ウェブ用に保存」で最高画質（低い圧縮率）
ファイル容量73.54KB

普通のJPG形式保存で最高画質（低い圧縮率）
ファイル容量95.03KB
これだけ画像の大きさが小さいにもかかわらず、「ウェブ用に保存」と普通の保存（JPG形式）では、20KB以上の差がでます。
画像のサイズがもっと大きくなれば、ファイル容量の差はもっと大きくなります。
見た目はまったく違いが分からないので、ブログやホームページで使う場合は「ウェブ用で保存」がベストです。
（フォトショップ・シリーズでの話しなので、他の画像加工ソフトでは分かりませんが、同様の保存方法があるはず）
ちなみにこの画像、撮ったままでリサイズのみ。
小細工をしていない状態です。
これを、今までお話してきた「イマイチな写真もそれなりに見せる加工術」を施すと・・・

拡大画像
適切なリサイズをする前に文字入れをした画像。
HTMLで強制的に表示サイズを小さくしてるので、文字がつぶれてる。

ちゃんとリサイズした後に文字入れをした画像。

1日1枚アメショーの写真でほとんどやりませんが、「ふきだし」やアフレコなどの文字を入れるタイミングについて。
ブログ上での表示サイズにリサイズしないまま文字を入れると、間違いなく潰れてしまいます（上の写真）。
何ピクセル×何ピクセルと決めているはずですので、そのサイズにリサイズしてから文字を入れるのがベストな方法です。
ですので、大まかな手順は、
トリミング→色補正→リサイズ→（文字入れ→）シャープをかける
となりますね。
残るは「ウェブ用に保存」です。

シャープをかけていない画像
何となくぼんやり

シャープをかけた画像
微妙な違いですが、いくらか鮮明になってます
トリミング→色補正→リサイズと進んだら、最後にシャープをかけて終了です。
シャープの有無で画像の鮮明さに違いが出ます。
多少ピンボケした写真でも、リサイズ（縮小）してシャープをかければいくらかごまかせます。
最初に掲げたテーマ「イマイチな写真もそれなりに見せる加工術」です（笑）

3504×2336の元画像を縦横比4:3の縦長にトリミングし、
縦横サイズ320×240にリサイズ
ファイル容量23KB
現在の携帯電話のスペックでは、縦横サイズ320×240ピクセル程度が最適な画像サイズだと思います。
ですが、パソコンのモニターで見ると物足りなさは否めません。
せっかく良く撮れた写真だから大きく見せたいというときは、「クリックすると拡大写真を表示」する方法がベストですね。
ただ、これも問題で、大きな画像をHTMLで強制的に320×240のサイズに表示させると、画像が荒くなったり、ファイル容量が大きすぎて携帯では表示されない可能性大です。

縦横サイズ640×480にリサイズした画像を、
HTMLで強制的に320×240ピクセルで表示。
画像が荒くなっているのが分かりますか？

なので、この場合は大小2種類の画像を用意し、「クリックして拡大」にしましょう！
極力画像サイズを小さくリサイズすることで、ファイル容量も抑えられ、ブログの表示にストレスがかかりません。
特に、1記事に複数の写真を使っている方はリサイズ必須です！

3504×2336の元画像を480×320にリサイズ

900×600にリサイズし、HTMLのwidth（幅）とheight（高さ）で480×320に表示指定
一眼レフデジカメ、コンパクトデジカメ、携帯電話、どんな機材で撮影しようと、ブログやホームページにアップする際は、最適なサイズにリサイズした方が良い（すべき）と考えます。
まずは見た目の問題で、デザインに合わないサイズのままアップしてしまい、崩れているブログをたまに見かけます。
1日1枚アメショーの写真の場合は、640×480までの大きさなら崩れないデザインになっていますが、あまり大きすぎても写真の威圧感が増すし、携帯で閲覧することも考えて480×320にリサイズしてアップしています。
携帯での閲覧を優先するなら360×240くらいがベストかもしれません。
でも、ここまで小さくすると、パソコンで閲覧したときに物足りないので、両方を満足させるのは難しいですね。
ブログによっては、アップする際に自動的にリサイズしてサムネイルを作成してくれるものもあるので、こういった機能は積極的に利用すべきです。

元画像のまま

元画像を少し色補正。口の周りの白が飛んだ悪い例（涙）
トリミングと色の補正の順番は、どちらが先でもいいと思います。
今回はトリミング後に色補正をしてみました。
ひと口に色の補正と言っても、色合い、明るさ、コントラストなど様々な要素があり、これらを完璧に調整するのは至難のワザ。
今のどきのデジカメは優秀で、ホワイトバランスが大きく崩れることもないので、あまり補正しなくてもいいかもしれません。
今回の写真の例のように、補正して悪くなるケースもあります。
逆に、携帯電話で撮影した写真は補正した方が良い場合が多そうです。
トリミング、色補正が済んだら、次はリサイズ（縮小）です。

元画像をもっとトリミング
前記事のトリミングでは、クーの全体が入るように、周囲の余計な部分のみをトリミングしましたが、さらに大胆にトリミング。
こうなると元画像のヘタな面影がなくなりました（笑）
まさに「イマイチな写真もそれなりに見せる加工術」です！
写真撮影に自信のない方、撮影機材に不満のある方は、せめてトリミング術を覚えるだけでも、ブログやホームページの写真が見違えるはずです。

元画像を縦横比率3:4でトリミング
今度は縦横比率を3:4でトリミングしてみました。
3:4という比率はコンパクトデジカメで撮影した画像のほか、パソコンのモニターサイズもそうなので、見ていて落ち着く比率だと思います。
でも、パソコンのモニターもワイド化が進んでいるので、3:4にこだわる必要はありませんね（笑）
1日1枚アメショーの写真も、前は3:4にしてましたが、ここ最近は2:3で加工しています。
ず〜っと3:4を見てると、2:3が横長に見えてしまいますが、「写真」っぽいのはやっぱり2:3かな。

元画像を縦横比率2:3のままトリミング
縦横比率を2:3のままトリミングしてみました。
最初からトリミングしなくても済むように撮影できればいいのですが、なかなかそうは上手く撮れないので、トリミングは不可欠ですね。
これぞ「イマイチな写真もそれなりに見せる加工術」です（笑）
縦横比率は、
・一眼レフ　2:3
・コンパクトデジカメ　3:4
が一般的です。
なので、どちらかに合わせてトリミングすれば違和感はありませんし、仮にプリントアウトする際にも、はみ出し（途切れ）が少なくてすみます。
アメリカンショートヘアーのタム＆クーに応援のクリックを！
ペルシャ猫のモグにはお情けのクリックを♪

まだ元画像（1728×1152ピクセル）ままです。
写真加工の基本的な手順は、
1.トリミング
2.色補正
3.リサイズ（縮小）
4.文字入れ
5.シャープをかける
6.ウェブ用に保存
ではないかと思います。
トリミングと色補正の順番は逆でもいいかもしれませんね。
いずれにしても、リサイズする前に「トリミングと色補正」です。
次で元画像をトリミングします。
アメリカンショートヘアーのタム＆クーに応援のクリックを！
ペルシャ猫のモグにはお情けのクリックを♪

ある方から質問があったので、この写真を題材に、写真の加工について説明していこうと思います。
題して、
「イマイチな写真もそれなりに見せる加工術」
とでもしておきましょうか（笑）
私はこの方法で下手さをカモフラージュしてアップしてます。

実はこの画像は「元画像」といってもすでに加工したもので、デジカメで撮影したままだと3504×2336ピクセル、2.5MBあるので、とてもこのブログにはアップできません。
ですので、1728×1152ピクセルにリサイズ（縮小）し、フォトショップの「ウェブ用に保存」でファイル容量を100KB以下にしています。

• FC2ブログランキング
• 猫ブログ村
• 人気ブログランキング