スライスの作成と書き出し

スライスの作成

このグローバルナビは、文字がPhotoshop上で作られた画像テキストなので、
CSSでロールオーバーを設定すると、それぞれ1つずつa:hoverに違う背景画像を指定しないといけません。
なので今回は、JavaScriptのロールオーバーを作成、つまり個別に各画像を書き出していきます。

作成するボタンの種類は「通常」「ロールオーバー」「訪問中」の3種類で「マウスダウン」は作成しません。

「スライスツール」を選択します。
ヘッダースライスの左下から「HOME」ボタン1個を囲みます。
右側は影が切れるところ、下は背景画像から影が伸びる5px分下になります。

「スライスオプションウィンドウ」を開き、
名前を「gnav_01」縦横値「X:40px/Y:160px」そして高さを「55px」に設定します。…(1)
※横幅の数値は、各自の文字数やフォントによって変わってきます。

同じように次のナビボタンも、スライスで囲みます。
右端は境界線2px幅の真ん中で区切ります。

1pxずれて、横のスライスと重なってても見た目ではわかりずらいので、
必ず「スライスオプションウィンドウ」で数値で確認、または拡大表示で確認をしてください。
もし重なっていると、ナビボタンの左右幅の合計値が変わってきてしまうので、
レイアウトに隙間ができて、崩れる原因となります。

残りのタイトルナビは、メニューボタンのdivボックスに入れるので、
メニューボタンの幅に合わせます。

名前と数値は以下の通りです。…(2)

保存形式の確認

まず、今まで変更された画像を確認すると、

さらにこれから新しく書き出す画像は、

となります。とりあえずグローバルナビについては、
「ロールオーバー」や「訪問中」画像から先に書き出さないといけないので、
レイヤーを可視状態にしておきます。

この状態で「ファイル」→「WEBおよびデバイス用に保存」を選択します。
ここで一度、画像によって保存形式が違うので1つずつ選択して確認します。
問題がないようであれば、「完了」ボタンを押してウィンドウを閉じます。

そして、「ファイル」→「保存」でセーブします。
これで保存形式を含めた編集データの保存が完了しました。

スライスの書き出し

これからは、ヘッダー背景を書き出したときのように、
重複してる画像を非表示にして、スライスを削除し、
保存しないで閉じることになります。 >>重複スライスの書き出し

まずは「titleフォルダ」を非表示にして、「スライスツール」でロゴスライスを削除します。

再度「WEBおよびデバイス用に保存」を選択して、
以下の各スライスを「shift」を押しながら複数選択していきます。
1px部分が選択できないときは「⌘+space拡大/⌘+space+option縮小」表示ができます。
※書き出す保存形式がgifとjpg両方になるので、右側のプリセットは非表示になります。

「保存」で「imagesフォルダの一つ上のフォルダを選択」「選択したスライス」で書き出すと、
さきほどの更新画像については「上書きしますか?」と聞いてくるので「OK」にする。

グローバルナビに関しては今回「訪問中」の「visited」画像だったので、データ名の末尾に「v」を付けます。

そして、次に「ロールオーバー」画像を書き出すので、「visitedレイヤー」を非表示にします。
「WEBおよびデバイス用に保存」で「gnav01〜06」を選択し、同じ設定で書き出します。

最後に「通常」画像を書き出すので、「rolloverレイヤー」を非表示にします。
また同じように「gnav01〜06」を書き出します。
今回のデータ名はそのまま使用するので、名前を変更することはありません。
以上で、全てのデータが書き出されました。

この編集用のpsdデータは、ロゴスライスを削除しているので「保存しない」で閉じて下さい。

>>前へ >>目次に戻る >>次へ