Adobe Web Special Pack

Adobe Web Special Pack

Photoshop Elementsで
簡単フォトギャラリー作成

Webフォトギャラリーのダイアログボックス。ごく簡単な操作でこうしたHTMLが作成できるのはやはり便利。また先に紹介したとおり、Photoshop ElementsのWebフォトギャラリー機能はHTMLファイルをテンプレートとして用いているため、このHTMLをカスタマイズすれば自分だけのフォトギャラリーが作成できる。

　最後は肝心のコンテンツとなる、フォトギャラリーを作成しよう。ここで利用するのは、Photoshop Elementsの「Webフォトギャラリー」。これはフォルダ単位で画像を読み込み、サムネイルと拡大表示用の2種類の画像、さらにHTMLまで自動的に作成してくれるという優れものだ。素材さえあれば、ほとんど手間いらずでデジタルカメラの画像をWebサイトで公開できるという便利な機能だ。

　Webフォトギャラリー機能を使う前に、出力されるHTMLのカスタマイズをしておきたい。というのも、デフォルトではWebフォトギャラリー機能で出力されるHTMLは1ページで完結したものになっており、インデックスページに戻るなどのオペレーションは考慮されていないからだ。

　まず、Photoshop Elementsをインストールしたフォルダから「Presets」－「WebContactSheet」－「シンプル」と辿ったところにある「IndexPage.htm」(※1)をGoLiveで開く。このファイルはWebフォトギャラリー機能で出力される際に利用されるテンプレートで、文書中の“％記号”で括られた文字列(%THUMBNAILSROWS%など)が、Photoshop Elementsから出力される際にタグや文字列に変換される部分である。このHTMLのどこかに「<A HREF="../index.htm">目次に戻る</A>」など、目次へ戻るためのリンクを置いておこう。サムネイルをクリックしたときに表示される拡大画像のページにも別のページへのリンクを張りたいときは、同様の手順で「SubPage.htm」を編集する。なお、これらのファイルを編集する前には、忘れずにバックアップを取っておくこと。

※1 IndexPage.htm ちなみにWebフォトギャラリー機能では、出力するHTMLのスタイルを数種類選択できる。ここではスタイルとしてシンプルを使うので、「シンプル」フォルダを選択している。別のスタイルを使う場合は、そのスタイルの名前と同じフォルダ内にあるHTMLファイルを編集する

　カスタマイズが終わったら、次はWebサイトに公開したい写真を、特定のフォルダにコピーしておく。続いてPhotoshop Elementsを起動し、「ファイル」－「自動処理」のメニュー内にある「Webフォトギャラリー」を実行してダイアログを表示する。ダイアログではまず出力するHTMLのスタイルと、「バナー」「ギャラリーの画像」「ギャラリーのサムネイル」「カスタムカラー」のそれぞれのオプション項目、そして画像が保存されているフォルダと、HTMLおよび編集された画像を出力するフォルダを選択する。

　4つのオプションの中で重要なのは、ギャラリーのサムネイルという項目。サムネイルの画像サイズや、HTMLの1ページにいくつのサムネイルを表示するか(列数×行数で指定)などを指定する部分で、サムネイルの画像の数がここで指定した以上であれば、自動的に複数のページに分割される。なおサイト名や作成者、日付を設定するバナーも忘れずに設定しておきたい。またHTMLを出力するフォルダの名前は、LiveMotionで作成したボタンに割り当てたリンク先パスに合わせる。「photo/index.htm」とリンク先パスを記述したのなら、photoフォルダを作成しその中に出力されるように設定する。

完成した(ごくごくシンプルな)トップページ。デジタルカメラで撮影した画像がHDDの肥やしになっているのなら、ここで紹介した方法をベースにWebサイトへの公開にチャレンジされてみてはいかがだろう。

　最後にGoLiveで作成したHTMLファイルがあるフォルダに、Photoshop Elementsで出力したHTMLが入っているフォルダをコピーすればフォトギャラリーの完成だ。もしうまくリンクできていない場合には、LiveMotionで設定したリンク先とPhotoshop Elementsで出力したHTMLのパス、あるいはファイル名などが合っているかどうかを確認してほしい。

　LiveMotionを使ったアニメーションとボタン作り、GoLiveでのオーサリング、Photoshop Elementsでのコンテンツ作りという流れで解説してきたがいかがだっただろうか。
　なお、いずれのアプリケーションでも、ここで紹介した機能やテクニックはホンの初歩の部分。ぜひさまざまな機能に触れて、オリジナリティの高い作品作りにチャレンジしていただきたい。

Adobe Web Special Packの主なスペック

価格	オープンプライス 2万4800円(Adobe Store価格)
発売元	アドビシステムズ
問い合わせ先	カスタマーインフォメーションセンター 03-5350-0407
URL	http://www.adobe.co.jp/