第６弾　■　Photoshopを使ったweb用フォトレタッチ

私の日記に使っている写真、いつも同じように枠付き写真っぽくしてありますよね。

そうそう、こんな風に…。今回は、私の日記用写真データ作りを紹介します。Photoshop 5.5を使ってます。最近のソフトだともっと簡単にできるかもしれないので、参考になるかどうかは微妙〜ですが、人のデータの作り方を見るのって楽しいでしょ。

１ページ目では写真の調整を、１ページ目では写真枠の作り方について説明します。

１．大きさの調整

まずは写真の大きさを調整しなくちゃなりません。デジカメで撮った写真は、私の古〜いデジカメでも1600ピクセル×1200ピクセルの大きさのデータになってます。これをwebに貼ったら写真だけで画面いっぱいになっちゃうわけでして、ちょっとは小さくしないとね。

まずは、今回の元データ。Jelly Belly Museumに行ったときに撮ったジェリービーンズのテイスティングの棚。1600x1200ピクセル。

さて、どれぐらいの大きさにしましょう。たまに聞かれるんですよね、webに貼り付ける画像はどれぐらいの大きさがいいのか…って。以前はファイル容量を小さくすることを重要項目にあげていたんだけど、ブロードバンド時代に突入した今はそれはあまり必要でもなくなりましたね。

一応、化石な目安を書いておくと、１ページのファイル容量が100KBぐらいで収まるように…って感じでしょうか。ダイヤルアップが主流だった頃は１ページ「50KB以下」というのが目安だったけれど、ちょっと増やしてみました（私が決めるのかい？（笑））。いくらブロードバンド時代になったとはいえ、やはりあまり重たいページは好きじゃないからです。eマークがずっとグルグル回ってると（IEの場合）、ついつい「中止」をクリックしたくなるんですよね。なんか腹が立ってきて…。まぁ、ちょっと待てばいいだけなんだけど、私みたいな短気な人間…結構多いんじゃないでしょうか。

でも、現在の私がいちばんの重要項目にあげるのはファイル容量ではなく「見た目の大きさ」。自分のページにその画像を置いたときのイメージを考えましょう。あまりにも小さいと中身が見えないし、あまりにも大きいと写真以外の言葉が読みづらくなる。また、あまりにも写真が大きくてスクロールしないと見えないようでは全体像が見えないのでユーザはフラストレーションが溜まるはず（ブラウザの空間としては740x420程度を考えておくとよい）。

私の場合は、幅450ピクセル程度の日記に載せるので、長い辺が200〜250ピクセル程度になるようにしてます。それぐらいが私の日記ではちょうどいい大きさ。JPEGの中ぐらいの圧縮率で大体20KB程度になります。日記を表示したときに５枚程度の写真を貼り付けても100KBを少し超えるぐらいで収まるかな…という感じで、容量的にもちょうどいい感じ。

…と、このあたりはそれぞれのページの性質や、オーナーの考え方によるのでいろいろと考えてみてください。デザイン的に見やすいというのは、そのページを見てくれている人がフラストレーションを感じない、ということですから、その点をいろいろと考えてみるといいでしょう。

（最近のアクセス解析では、80%ぐらいのユーザが1024×768のディスプレイを使っているようです。それでも800×600ユーザも10%程度いたりするので、この人たちがスクロールせずにコンテンツ全体が見られるように…と考えるべきです。そうなると、やっぱり、写真、文字全体で、横幅は740ピクセル程度まで…というところでしょうか）

ここでは、私の日記用に横幅を230ピクセルに調整します（画像解像度：縦横比固定オン、画像の再サンプルオン）。

この時点で写真が斜めだったりしたら回転やトリミングをしておきます。

２．色の調整

最初の完成品写真と、大きさ調整をしただけの写真を見ると、色合いが全然違うのがわかりますか？もともとの写真は暗くてハリがないですよね。ぼんやりしていて、なんとなくつまらない。まぁ、それでもいいや…という人ならいいんですが、私は色合いがぼんやりした写真を載せいているサイトには、たいてい行かなくなります。見ていてもインプレッションを感じないから。

やっぱり、「お、キレイ」と思われたいですよね〜。ということで、色の調整をします。

私がよく使うのは「自動レベル補正」と「トーンカーブ」。

自動レベル補正は、画像全体の色の調子を見て自動的に色の調子や暗さを調整してくれるもの。ただし、食べ物の写真などで、すでに柔らかい光が当たっているものは、逆に変な色になることもあるので、そういうときには使うのをやめるんですが、たいていは、まず「自動レベル補正」をかけます。上の写真に「自動レベル補正」をかけたのがこれ。

室内での黄色っぽい照明の色が補正されてジェリービーンズの色がわかりやすくなりましたね。でも、これでは、全体が暗すぎて、まだ魅力に欠ける写真のままです。なので、ここでトーンカーブの調整をしてみます。

「明るさ・コントラスト」で調整してもいいんですが、トーンカーブの方が感覚的に使いやすいので私はこっちをよく使います。で、いちばんよく使うのがこんな感じのカーブへの変更。真ん中あたりをちょっと上に上げるだけ。だいぶ画像のコントラストと色がはっきりしているのがわかりますか？

これ以外にも、Photoshopの色調補正メニューにはいろいろなツールが入っているので、いろいろ試してみて自分の使いやすいツールを見つけるといいでしょう。でも、重要なのは、とにかく「キレイだなぁ〜」と思わせる色合いに“戻して”あげること。デジカメ写真は光やレンズの関係で本当の色が再現されていないことも多いんです。そうそう、私の日記の食べ物写真が美味しそうなのは、こうやって「美味しそうな色」に「戻して」あげているからなんですよ、きっと（写真の腕がいいからじゃなくて（爆））。

３．アンシャープネス

さて、色合いの調節をしても、まだなんとなくボケ〜ッとした写真のまま…のような気がしますか？しますよねぇ〜。そうそう、画像の大きさを変更したときに写真自体もちょっとぼやけてしまうんです。

そこで最後の仕上げは「アンシャープネス」です。これは、ものの輪郭を計算して、その部分をはっきりさせてくれる処理なんですよね。

トーンカーブ後の画像（ぼけてる）

アンシャープネス後の画像

アンシャープマスクのダイアログ

私はたいてい半径1.0程度、しきい値0で使ってます。半径、しきい値は小さければ小さいほどシャープさの度合いが強くなります。適用量は大きければ大きいほどシャープさの度合いが強くなります。まぁ、いろいろな値を試してみるといいでしょう。

webに載せる写真は、多少エッジがはっきりしすぎと思えるぐらいのほうがハッキリして見やすいような気がします。

では、最後に今回の写真の色・シャープネス調整の変遷。元のデジカメデータと比べると、見栄えが全然違うでしょ。

続く >>