５）Photoshopでガイドを設定 ４）で書き出したPSDデータをPhotoshopで開き、「photo」レイヤーの周囲にガイドを設定します。このときに「photo」レイヤーをアクティブにしてガイドのスナップをONにしておくと、楽にガイドが設定できます。 茶色のエリアに写真が入る ６）各パーツの切り出し ガイドに沿って額縁のパーツをgifに切り出します。上と下のパーツは横方向に一つのパーツにし、左右のパーツは上下の間の部分だけにします。ここではスライスツールで切り出す部分を指定。ファイル名は連番にしておくと、後工程での作業がしやすくなります。 上下のパーツは１つのgifにしてOK ７）テーブルにはめ込む 額縁をはめ込むhtmlファイルに[行数=3行 / 列数=3列 / 幅=額縁の幅 / セル内余白=0 / セル内間隔=0 / ボーダー=0 ]のテーブルを挿入します。1行目と3行目はそれぞれ列方向にセルを結合し、ひとつに連結して額縁のパーツを挿入します。2行目の1列目と3列目にはそれぞれ横の額縁パーツを挿入します。2列目に画像をはめ込んで完成です。 上下のセルは横方向に連結 どうしても縦長と横長の写真を混在させたい時は、それぞれのサイズで額縁を作ります。 完成サンプルはこちら>> 写真が変わっても額縁のパーツは同じものを使い回しているのに注目。 イラストの中に写真をはめ込む 額縁の要領で、イラストの中に写真をはめ込むこともできます。あらかじめ写真のサイズと場所を決めてからイラストを描くことで、写真との一体感が出せます。 またイラストにインターフェイスを作っておけば、オリジナルのミニブラウザのできあがり。モニタ風の枠を作って、中にムービーファイルを埋めばテレビみたい！　その他アイデア次第でいくらでも……。 多少大きめのイラストでもキャッシュの恩恵があるので、2ページ目以降は表示速度が速くなります。 完成サンプルはこちら>> イラストの中の番号をクリックしてもページが変えられます。 [ ←BACK ]　[ NEXT→ ]