CHAPTER1-05 自分で撮影した写真をWebサイトで使用する | デザインってオモシロイ -MdN Design Interactive-

CHAPTER1-05 自分で撮影した写真をWebサイトで使用する

2024.5.17 FRI

【サイトリニューアル!】新サイトはこちらMdNについて


05 自分で撮影した写真をWebサイトで使用する
>POINT1 キャリブレーションについて >POINT2 画像解像度を調整して使用する

05-1 キャリブレータを利用してディスプレイの色を調整する

ここまで紹介してきた方法で撮影した写真を、Webサイトで使用するときのポイントを解説する。撮影した写真は、必要に応じてトリミングしたり、画像編集ソフトウエアを使用して修正や加工を行おう。このとき、注意してほしいことが2点ある。ひとつ目は、修正と加工をする前にディスプレイを調整(キャリブレーション)しよう。ふたつ目は、写真を適切なサイズ、ファイル形式で保存することだ。

撮影した写真は、PCのディスプレイを見ながら画像編集ソフトウエアを利用して修正・加工するが、このときディスプレイの明るさや色が、適正でなければ意味がない。自分のディスプレイではきれいに見えても、Webサイトを見る人には違う色に見えてしまう可能性もある。そのため、撮影した写真を確認するディスプレイには、キャリブレーションを行う必要がある。そこで正確なキャリブレーションを行うには「モニタキャリブレータ」の利用がお薦めだ。ディスプレイに計測器を装着するだけで、自動的に調整してくれるとても便利な製品だ。またWebサイト用の写真をレタッチするときは、ディスプレイの表示設定を「sRGB」に合わせておく。キャリブレータはレベルや性能によって価格差が大きいが、安いものなら1万~3万円程度で購入できる。


ディスプレイに当てているのが「カラーキャリブレータ」だ。画面に表示した色をキャリブレータで検出し、本来の色とのずれを測定する。この製品はエックスライト(社)の「i1Display 2」(実勢価格 38,000円)


「i1Display 2」 で利用するキャリブレーションソフト「Eye-One Match」 の画面。指定した色(この場合は、65,000Kでガンマ値が2.2)になるよう自動的にディスプレイを調整し、カラープロファイルをつくってくれる


05-2 画像サイズを縮小してWebサイトに使用する

撮影した写真のトリミング、修正、加工が終了したらデータを保存しよう。このとき、オリジナルデータと、オリジナルデータのコピーをつくろう。そうすれば、コピーデータに不具合があったり、誤って削除してしまっても慌てずにすむ。

次に、Webサイトで使用するために画像サイズを縮小する。「Adobe Photoshop」を使用する場合は、イメージメニュー→“画像解像度”で、画像サイズをピクセル数で指定して縮小する。このとき[スタイルを拡大・縮小]と[縦横比を固定]と[画像の再サンプル]にチェックを入れて[バイキュービック法-シャープ(縮小に最適)]を選択しよう。縦横比の調整はトリミングで行う。画像サイズの縮小は、ファイルメニュー→“Web用に保存”でも行えるが、元画像が大きいと処理に時間がかかってしまうので、あらかじめ縮小しておくのが効率的だ。画像を縮小したらファイルメニュー→“Web用に保存”を実行しよう。ただし、Photoshopのバージョンによって個々の表記が異なるため注意してほしい。

ファイル形式は[JPEG]にし、画質は「60」から「80」に設定する。画質を上げるとファイルサイズが大きくなり、ダウンロード時間がかかるし、画質を落としすぎるとディテールが失われ写真のクオリティが下がってしまうので、十分に注意して設定しよう。あとはサイズ調整を行った画像を任意のフォルダに保存すれば完了だ。

今回紹介した撮影テクニックと、撮影した画像をWebサイトで使用する方法を身につけて、イメージどおりのWebサイトを制作しよう。


Photoshopを使って画像サイズを縮小する際は、Webサイトで使用する画像の幅と高さを考慮して、ピクセル数を決める


Photoshopでは、Webサイトでの使用を前提にした保存が行える。画像のクオリティに気をつけて画質を設定し、Webサイトに適した画像サイズにし、しかるべきフォルダに保存する。作業中の画像は別途Photoshop形式で保存しておくと、修正が必要なときに便利
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在