Webページでタブのような画像を表示させたい

質問

こんにちは。

Webページ作り初心者です。
タブのような画像を表示させたいと思いました。
イメージ的には
http://www.apple.com/jp/
Appleのトップページの上のほうにあるような、あんな感じ。
あれを作るためには画像をどのように用意してどのように貼り付けるのが楽なのでしょうか？

全部ひとつの画像でまとめて作ってから切り分けているのか（Photoshopではスライスというのですよね？）、それともそれぞれの画像ファイルをバラバラに用意してからブラウザできれいに表示できるように並べているのか（継ぎ目がスムースに見えるようにするためにはどんな工夫が必要なんだろう？）、ナド。
また、どのタブがアクティブになっているのかによって見た目が変わるので、同じタブの画像でもアクティブになっているバージョンとなっていないバージョンとで、2種類の画像を用意する必要がありますよね？ そんなことはないのでしょうか？

えと、AdobeのCreative Suite 2を持っているので、Photoshop、Illustrator、GoLiveがそろっています。
GoLiveは最近使い始めたばかりなので微妙ですが、PhotoshopとIllustratorなら使えます。
回答よろしくお願いします。

回答No.4

fivetec · ベストアンサー

#2です。
>レイヤーかなにかの機能を使って2つの画像を重ねて合成する、ということでしょうか？

ソースを見たらおわかりと思いますがstyle="background-image
を使用してテーブルの背景を指定して文字ボタンを並べられています。

>レイヤーはずれやすいという質問を教えて！gooで見たような気がしますが…平気かな？
HPビルダーなら考えられますが、CSであれば大丈夫ででしょう。

>あとはテーブルよりもスタイルシートのほうが最近はいいみたいだという話を聞いたのですが、そのへんについてはいかがなのでしょう？

確かにサイト全体的に統一性があればスタイルシートを使用した方が楽でもあると思いますが、アップルのサイトはタブごとに下の色が異なるのでいかがなものでしょうか？

バラバラ、スライスいずれの方法でも、開いたサイトのボタンバーは色を変えなければならないので結構な手間だとは思います。

お礼

テーブルの背景に、テーブルと同じ大きさの画像を指定することができるのですね。
勉強になります。

ありがとうございます。

回答No.3

times3

大きいのを作って小さく切って切り出してもいいし、１個づつ作ってもいいし、どちらでも構いません。

　お好きなほーで、どーぞ(^_^)v

レイヤーというのが使えますから、文字だけ入れ替えたのを作って統合して保存、保存が出来たらヒストリーで戻って別の文字で保存

このほーが効率は良いですよね？

リンクしてるとき、用のの色を変えたバージョンも作っておけば楽でしょう。

先のHPはDreamweaverで作っていますが、まあGoliveでも出来ますのでがんばって作業してください。

お礼

times3さんの書き方ですと、どうやらひとつずつ作るほうの方法を採用されているようですね。

ですが今 私は、まとめて作ってそれをスライスする方向で作業中です。
というのは手描きのをスキャンしてそのまま使おうと思っていて、ばらばらに作ると継ぎ目が面倒だと思うからです。

回答ありがとうございました。

回答No.2

fivetec

素人丸出しの方法です。
上は２種類のボタンバーをそれぞれのページのテーブルに並べて作っていますが。
下の方は、まず背景に使用するボタンバーを準備して、そのボタンバーに文字を配置して文字ボタンを作ります。
テーブル全体に文字を入力していない元の画像を背景として指定して、その上に文字ボタンを並べたらいかがでしょうか？
面倒くさかったら背景だけ指定してテーブルを分割して文字を配置しリンクさせる方法もあります。

当然、上のタブは色の異なる２種類の画像で済みますが、下の場合は色の異なる何種類もの文字ボタンが必要になります。

お礼

レイヤーかなにかの機能を使って2つの画像を重ねて合成する、ということでしょうか？
レイヤーはずれやすいという質問を教えて！gooで見たような気がしますが…平気かな？
あとはテーブルよりもスタイルシートのほうが最近はいいみたいだという話を聞いたのですが、そのへんについてはいかがなのでしょう？

回答No.1

altern8

appleのページでは（恐らくですけれども）全体の画像をスライスで切り出していると思います。分割された画像をHTML上でテーブルないしはスタイルシートを用いて合体させています。
また、選択しているタブで色が変わっているような部分は、それぞれ画像を用意しています。

詳しい操作方法については、下記リンク先を参照ください。
→スライスを使った基本操作（Photoshop CS）
http://support.adobe.co.jp/faq/qadoc/AJ25.nsf/0/3618320e3c52e71849256e7600334e63?OpenDocument

→Photoshop CS で作成したスライス画像を GoLive CS に取り込む方法
http://support.adobe.co.jp/faq/qadoc/AJ25.nsf/900f7bf03cd385244925696900084026/61bb6a9bdeee828f49256e7600334486?OpenDocument

以上、ご参考まで。よろしくお願いします。

お礼

こんにちは。
リンクも含め、大変参考になりました。ありがとうございます。
手書き風にしたいと思っているのでIllustratorとかよりPhotoshopをつかって作業したいと思っていて、
でもそれってちょっと大変なのかな？とかって思ったり。
いろいろ実験してみたいと思います。