Web フォトギャラリーの作成

Web フォトギャラリーとは、サムネール画像が表示されるホームページと、フルサイズ画像が表示されるギャラリーページとで構成される Web ページを作る機能です。どちらのページにも、Web ユーザーがサイト内を移動するためのリンクが設定されています。例えば、ビジターがホームページのサムネール画像をクリックすると、そのサムネールに対応するフルサイズ画像のギャラリーページが読み込まれます。画像のセットから Web フォトギャラリーを自動的に生成するには、「Web フォトギャラリー」コマンドを使用します。

Photoshop には、ギャラリーに使用できる多種多様なスタイルが用意されています。これらのスタイルを選択するには、「Web フォトギャラリー」コマンドを使用します。HTML に精通しているユーザーなら、一連の HTML テンプレートファイルを編集して新しいスタイルを作成したり、スタイルをカスタマイズすることもできます。

ギャラリースタイルのテンプレートごとにオプションが異なります。プリセットされたスタイルを使用している場合、スタイルによっては一部のオプションがグレー表示され、利用できないことがあります。

Web フォトギャラリーの作成

Adobe Bridge を使用した Web ギャラリーの作成

Adobe Bridge では新しい Web ギャラリー機能を提供しています。手順については、Adobe Bridge ヘルプでWeb フォトギャラリーの作成を参照するか、以下のチュートリアルを参照してください。

従来のオプションの Photoshop プラグイン

カラーの一致の確認

ProPhoto RGB や Adobe RGB などの色域が広い作業用スペースで写真を処理する場合、埋め込みカラープロファイルを読み取ることができないブラウザーで Web ギャラリーを表示したときに画像のカラーが変化する可能性があります。このような場合は、画像のプロファイルを sRGB（ほとんどのブラウザーで初期設定として使用される）に変換してから、最適化したり、Web フォトギャラリーに含めたりしてください。次のいずれかの方法でプロファイルを sRGB に変換します。この場合、画像のコピーを作成して使用することをお勧めします。

• 1 つの画像を変換するには、編集／プロファイル変換を選択し、「sRGB」を選択します。詳しくは、カラープロファイルの割り当てまたは削除（Illustrator、Photoshop）を参照してください。

• 画像のフォルダーを変換するには、イメージプロセッサーを使用します。ファイル／スクリプト／イメージプロセッサーを選択します。詳しくは、イメージプロセッサーでのファイルの変換を参照してください。

イメージプロセッサーを使用すると、ファイルを必要なサイズで直接 JPEG 形式に保存することができます。その場合、Web フォトギャラリーのオプションの「画像」にある「画像のサイズ変更」はオフにしてください。

Web フォトギャラリーのオプション

ファイル拡張子、エンコーディングおよびメタデータに関するオプション。

ファイル名の拡張子として .htm または .html を使用します。

UTF-8 エンコーディングを使用します。

HTML 上でサイズを指定し、ダウンロード時間を短縮します。

メタデータ情報を保持します。

ギャラリーの各ページに表示するバナーのテキストオプション。次の各項目にテキストを入力します。

ギャラリーの名前。

ギャラリーの写真のクレジットに載せる個人または組織の名前。

電話番号や所在地など、ギャラリーに関する情報の問い合わせ先。

ギャラリーの各ページに表示する日付。初期設定では、現在の日付が使用されます。

（一部のサイトスタイルで使用可能）バナーテキストのオプション。

ギャラリーの各ページに表示するメイン画像のオプション。

（一部のサイトスタイルで使用可能）各ギャラリーページの上部に横書きで、1 から始まり、ギャラリーの総ページ数で終わる連番を配置します。各数値はそれぞれのページへのリンクです。

ギャラリーページに配置するソース画像のサイズを変更します。ポップアップメニューからサイズを選択するか、ピクセル単位でサイズを入力します。「固定」では、サイズを変更するときに固定する画像の方向を指定します。「JPEG 画質」で、ポップアップメニューからオプションを選択するか、0 ～ 12 の値を入力します。または、スライダーをドラッグします。値が高いほど、画質が向上し、ファイルが大きくなります。

画像の枠線の幅をピクセル単位で指定します。

（一部のサイトスタイルで使用可能）各画像の下にキャプションを表示するためのオプションを指定します。ファイル名を表示するには「ファイル名」を、ファイル情報ダイアログボックスの説明テキストを表示するには、「説明」、「クレジット」、「タイトル」および「著作権」を選択します。

（一部のサイトスタイルで使用可能）キャプションのフォントとサイズを指定します。

サムネール画像のサイズなど、ギャラリーのホームページに関するオプション。

サムネールのサイズを指定します。ポップアップメニューからサムネールサイズのオプションを選択するか、各サムネールの幅をピクセル単位で入力します。

ホームページに表示するサムネールの列数と行数を指定します。このオプションは、横フレームまたは縦フレームスタイルを使用しているギャラリーには適用されません。

各サムネールの枠線の幅をピクセル単位で指定します。

（一部のサイトスタイルで使用可能）各サムネールの下にキャプションを表示するためのオプションを指定します。ファイル名を表示するには「ファイル名」を、ファイル情報ダイアログボックスの説明テキストを表示するには、「説明」、「クレジット」、「タイトル」および「著作権」を選択します。

（一部のサイトスタイルで使用可能）キャプションのフォントとサイズを指定します。

ギャラリーの要素のカラーに関するオプション。要素のカラーを変更するには、各項目のカラーボックスをクリックして Adobe カラーピッカーから新しいカラーを選択します。各ページの背景色（「背景」オプション）やバナーの色（「バナー」オプション）を変更することができます。

各画像の上に盗用を防止するテキストを表示します。

表示するテキストを指定します。カスタマイズしたテキストを入力するには、「カスタムテキスト」を選択します。ファイル情報ダイアログボックスのテキストを表示するには、「ファイル名」、「説明」、「クレジット」、「タイトル」、「著作権」を選択します。

キャプションのフォント、カラー、配置を指定します。

画像上に配置するテキストに角度を付けます。

Web フォトギャラリースタイル

Photoshop は、Web フォトギャラリーを様々なスタイルで提供します。HTML に精通している方は、一連の HTML テンプレートファイルを編集して新しいスタイルを作成したり、スタイルをカスタマイズすることもできます。

Photoshop 付属の Web フォトギャラリースタイルは、次のパスのフォルダーに個別に格納されています。

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery。

Adobe Photoshop CS5/Presets/Web Photo Gallery。

上記パスに位置するフォルダー名は、Web フォトギャラリーダイアログボックスのスタイルメニューに、オプションとして表示されます。各フォルダーには、Photoshop のギャラリーの生成に使用される、次の HTML テンプレートファイルが含まれています。

ホームページの各サムネールの下に表示するキャプションのレイアウトを決定します。

ページの表示に使用されるフレームセットのレイアウトを決定します。

ホームページのレイアウトを決定します。

フルサイズの画像が含まれるギャラリーページのレイアウトを決定します。

Thumbnail.htm ホームページに表示するサムネールのレイアウトを決定します。

それぞれのテンプレートファイルには、HTML コードと変数が格納されます。変数とは、Web フォトギャラリーダイアログボックスで対応するオプションを設定したときに置き換わるテキストストリングです。例えば、テンプレートファイルに、囲まれたテキストとして変数を使用する次のような TITLE エレメントが含まれているとします。

<TITLE>%TITLE%</TITLE>

Photoshop は、このテンプレートファイルでギャラリーを生成するときに、変数 %TITLE% を、Web フォトギャラリーダイアログボックスの「サイト名」に入力されたテキストに置き換えます。

HTML エディターで HTML テンプレートファイルを開くと、既存のスタイルをより詳しく知ることができます。HTML ドキュメントの作成には標準の ASCII 文字だけが使用されるので、これらのドキュメントを開いたり、編集または作成を行ったりするには、ノートパッド（Windows）またはテキストエディット（Mac OS）などの標準のテキストエディターを使用できます。

Web フォトギャラリースタイルのカスタマイズについて

Web フォトギャラリースタイルは、HTML テンプレートファイルを編集することによってカスタマイズできます。スタイルをカスタマイズする際は、Photoshop でギャラリーが正しく生成されるよう、次のガイドラインに従ってください。

• スタイルフォルダーには、Caption.htm、IndexPage.htm、SubPage.htm、Thumbnail.htm、FrameSet.htm が含まれている必要があります。

• スタイルフォルダーの名前は変更できますが、このフォルダー内の HTML テンプレートファイルの名前は変更できません。

• Caption.htm ファイルを空のまま保持し、キャプションのレイアウトを決める HTML コードと変数を Thumbnail.htm ファイルに格納することができます。

• テンプレートファイルの変数を適切なテキストまたは HTML コードに置き換えることができるので、オプションは、Web フォトギャラリーダイアログボックスを使用しなくてもテンプレートファイルから設定できます。例えば、変数を値として使用する、次のような背景色属性を持つ BODY エレメントがテンプレートファイルに存在するとします。

  bgcolor=%BGCOLOR%

  ページの背景色を赤に設定するには、変数 %BGCOLOR% を「FF0000」に置き換えます。

• テンプレートファイルには、HTML コードと変数を追加できます。すべての変数には大文字を使用し、最初と最後にパーセント記号（%）を付けます。

Web フォトギャラリースタイルのカスタマイズまたは作成

Web フォトギャラリースタイルの変数

Photoshop では、HTML テンプレートファイルの変数を使用して、初期設定の Web フォトギャラリースタイルを定義します。これらの変数によって、Web フォトギャラリーダイアログボックスのユーザー入力に基づいて、ギャラリーが生成されます。

ギャラリースタイルを作成またはカスタマイズするときは、HTML テンプレートファイルに任意の変数を追加できます。ただし、例外として、%THUMBNAILS% と %THUMBNAILSROWS% は IndexPage.htm ファイル以外に追加することはできません。変数を追加する際は、変数が正しく使用されるように、HTML コードもファイルに追加する必要があることを忘れないでください。

HTML テンプレートファイルには、次の変数を使用できます。

アクティブなリンクのカラーを決定します。

画像ファイルの名前を決定します。

インデックスの先頭ではなく、ユーザーが表示している画像のサムネールに戻れるようにします。ユーザーが Home ボタンをクリックしたときに実行されます。

バナーの色を決定します。

バナーテキストのフォントを決定します。

バナーテキストのフォントサイズを決定します。

背景色を決定します。

ホームページの各サムネールの下に表示するキャプションのフォントを決定します。

キャプションのフォントサイズを決定します。

キャプションのドキュメントタイトルをファイル情報から挿入します。

各ページに使用される文字セットを決定します。

電話番号や住所など、ギャラリーに関する問い合わせ先情報を決定します。

Adobe Photoshop CS5 Web フォトギャラリーに拡張します。

キャプションの著作権情報をファイル情報から挿入します。

キャプションのクレジットをファイル情報から挿入します。

現在のホームページのリンクを決定します。

SubPage.htm 内から最初のインデックスページをポイントします。

バナーに表示する日付を決定します。

ギャラリーに関する問い合わせ先の電子メールアドレスを決定します。

キャプション用の説明をファイル情報から挿入します。

画像のファイル名を決定します。HTML テキストとして表示するメタデータに使用します。

画像の URL 上のファイル名を決定します。URL 上のファイル名にのみ使用します。

フレームセットの右のフレームに表示する最初のギャラリーページのリンクを決定します。

フレームセットの左のフレームに表示するホームページのリンクを決定します。

ギャラリーのタイトルを決定します。

ギャラリーページに表示するフルサイズの画像の枠線のサイズを決定します。

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

この変数は、画像の幅を表す数値（のみ）に置き換えられます。

ギャラリーページへのリンクを決定します。

「画像のサイズ変更」チェックボックスがオンの場合、この変数には「大きな画像」パネルの画像ピクセル値が入ります。このチェックボックスがオフの場合、この変数は空の文字列になります。テンプレートの JavaScript でこの変数を使用すると、生成したサイトのすべての画像の最大の高さと幅を表示することができます。

ギャラリーページに表示するフルサイズの画像の URL を決定します。

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

この変数は、画像の幅を表す数値（のみ）に置き換えられます。

リンクの色を決定します。

次のギャラリーページのリンクを決定します。

大きなプレビュー画像から次の大きなプレビュー画像へのリンクを設定します。

次のホームページのリンクを決定します。

サブページに、すべての大きなプレビュー画像への番号付きリンクを挿入します。

現在のページの位置（1/3 ページなど）を決定します。

ギャラリーの写真のクレジットに載せる個人または組織の作成者を決定します。

直前のギャラリーページのリンクを決定します。

直前のホームページのリンクを決定します。

ギャラリーのタイトルを決定します。

ギャラリーのタイトルを決定します。

テキストカラーを決定します。

サムネールの枠線のサイズを決定します。

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

この変数は、サムネールの高さを表す数値（のみ）に置き換えられます。

この変数は、フレームスタイルの Thumbnail.htm ファイルを使用して、サムネールと置き換わります。この変数は、HTML ファイルの改行のない行に単独で配置します。

サムネールパネル内のサムネールピクセル値が入ります。テンプレートの JavaScript でこれを指定すると、生成したサイトのすべてのサムネールの最大の高さと幅を表示することができます。

サムネールへのリンクを決定します。

この変数は、非フレームスタイル用の Thumbnail.htm ファイルを使用して、サムネールの列と置き換わります。この変数は、HTML ファイルの改行のない行に単独で配置します。

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

この変数は、サムネールの幅を表す数値（のみ）に置き換えられます。

ギャラリーのタイトルを決定します。

既に訪れたリンクのカラーを決定します。