ImageReadyでのボタンの作り方



パソコントラブル解決・過去ログTOP  >  ログTOP

◇-?Image Readyでのボタンの作り方-ちび。-11/03-12:15(109)-No.304341
　┗?!Re:Image Readyでのボタンの作り...-白茶-11/03-18:05(104)-No.304405
　　┗?!?Re:Image Readyでのボタンの作�...-ちび。-11/03-18:21(103)-No.304414
　　　┗?!?!Re:Image Readyでのボタンの作...-白茶-11/03-18:37(103)-No.304417
　　　　┗?!?!?Re:Image Readyでのボタンの�...-ちび。-11/03-19:19(102)-No.304433
　　　　　┗?!?!?!Re:Image Readyでのボタンの...-白茶-11/03-20:24(101)-No.304448
　　　　　　┗?!?!?!?Re:Image Readyでのボタン�...-ちび。-11/03-21:09(100)-No.304458
　　　　　　　┗?!?!?!?!Re:Image Readyでのボタン...-白茶-11/04-19:53(78)-No.304691
　　　　　　　　┗?!?!?!?!?Re:Image Readyでのボタ�...-ちび。-11/04-21:57(76)-No.304715
　　　　　　　　　┗?!?!?!?!??Re:Image Readyでのボタ...-ちび。-11/05-16:11(57)-No.304874
▲このページのトップに戻る
304341Image Readyでのボタンの作り方ちび。 URL2005/11/03-12:15

メーカー名：日立製作所
ＯＳ名：WindowsXp HomeEdition
パソコン名：Prius
ソフト名：Image Ready
ソフト関連：ソフトの使い方がわからない
使用回線：光
--
ただいまＨＰを作ろうとしています。それで、触れると文字が変わるメニューボタンを
Image Readyで作ろうと思うんですが、Image Readyで画像を開いて、スライスツール
でボタンにする部分を切って、ロールオーバーメニューで新規ロールオーバーステート
を作成するんですよね？そこからいきなりわからないのです。
「マウスが触れると文字が変わる部分を」一体どこで作成するんだろうと。。。
ＨＰのＵＲＬを書いておきました。トップページにボタンにする画像を貼り付けて
おきましたので、お手数ですが見ていただけるとわかりやすいかなと。

▲このページのトップに戻る
304405Re:Image Readyでのボタンの作り方白茶 2005/11/03-18:05

記事番号304341へのコメント
ちび。さんは No.304341「Image Readyでのボタンの作り方」で書きました。

こんにちは。

ロールオーバーウインドウに
新規作成したステートメントの名前(「通常」とか「Over」とか)が、
ありますが、これをクリックするとプルダウンでDownやUpやOutなど、
そのステートメントが、どのマウスタイミングのを意味するのかを選べます。
名前の右に小さなプルダウンマーク「▼」が付いてますので、
すぐ分ると思いますが。

各ステートメント毎に対応する画像を編集し、
ひとしきり出来上がったら、「ファイル」→「最適化ファイルを保存」などで、
HTML保存ができます。
これで保存すると、各種画像ファイルを収めたフォルダと、
ロールオーバーのjavascriptを記述した.htmファイルが出来上がります。

あとは必要なパーツだけ使えばｏｋかな。と。

▲このページのトップに戻る
304414Re:Image Readyでのボタンの作り方ちび。 2005/11/03-18:21

記事番号304405へのコメント
白茶さんは No.304405「Re:Image Readyでのボタンの作り方」で書きました。

白茶さん返事ありがとうございます。「各ステートメント毎に対応する画像を編集」なんですが、
私の画像の場合、長いこげちゃの木の上に「ＳＨＯＰ」などの文字が白字で書いてあります。
「ＳＨＯＰ」部分をスライスツールで囲って、「Over」等に設定をして、画像を編集（私の
場合マウスで触れると文字が大きくなるようにしようかなと）したら、「通常」の方にも、大きくした
文字が現れてしまうんです（・・；）

▲このページのトップに戻る
304417Re:Image Readyでのボタンの作り方白茶 2005/11/03-18:37

記事番号304414へのコメント
ちび。さんは No.304414「Re:Image Readyでのボタンの作り方」で書きました。

ステートメント毎に変えられる部分はレイヤーの「目玉」のon、offです。
レイヤーそのものの枚数や内容までは個別に変えられません。

背景など、画像のどのステートメントでも同じ物を使う部分については
同じレイヤーを使用し、
ステートメントに寄って異なる部分についてはそれぞれ別レイヤーで管理し、
「このステートメントではこのレイヤーは表示」
「こっちでは非表示」
という具合に、
レイヤーの「目玉」のon、offで管理して下さい。

例：
通常のステートメント
１．「×」太文字
２．「○」普通文字
３．「○」背景

Overのステートメント
１．「○」太文字
２．「×」普通文字
３．「○」背景

という具合です。


▲このページのトップに戻る
304433Re:Image Readyでのボタンの作り方ちび。 2005/11/03-19:19

記事番号304417へのコメント
白茶さんは No.304417「Re:Image Readyでのボタンの作り方」で書きました。

そうなんですね！わかりやすいです。しかし、やってみたのですが。。。
　すべての「ＳＨＯＰ」「ＧＡＬＬＥＲＹ」などをスライスして、やってみました。
そして2アップで見てみたんですが、最初「ＳＨＯＰ」に触れると、「ＧＡＬＬＥＲＹ」など
の他のボタンまで一気にでっかくなりました。でもどのボタンも「通常」は普通の
大きさにしてあります。なぜでしょうか・・・

▲このページのトップに戻る
304448Re:Image Readyでのボタンの作り方白茶 2005/11/03-20:24

記事番号304433へのコメント
ちび。さんは No.304433「Re:Image Readyでのボタンの作り方」で書きました。

スライスはあくまでHTML保存した後にバラバラのパーツに分ける為のものです。
ロールオーバーと混同して考えてしまわないように気を付けましょう。
Image Ready上での編集中は、まずレイヤーを基準に考えて、
同じような作業を繰り返す必要があります。

デフォルトの画像。
SHOPにマウスオーバーした時の画像
GALLERYにマウスオーバーした時の画像
PROFAILにマウスオーバーした時の画像
CONTACTにマウスオーバーした時の画像
と、5枚のレイヤーが必要になりますが、
そのようになっていますか？

それを踏まえて、更に、
SHOPスライスについてのロールオーバーステートメント
GALLERYスライスについてのロールオーバーステートメント
PROFAILスライスについてのロールオーバーステートメント
CONTACTスライスについてのロールオーバーステートメント
と各スライスについてロールオーバーステートメントを
設定する作業が４回必要になります。


▲このページのトップに戻る
304458Re:Image Readyでのボタンの作り方ちび。 2005/11/03-21:09

記事番号304448へのコメント
白茶さんは No.304448「Re:Image Readyでのボタンの作り方」で書きました。

>スライスはあくまでHTML保存した後にバラバラのパーツに分ける為のものです。
それは知りませんでした(^^;)ロールオーバーするにはスライスからはじめるものだと
勝手に思っていました。
レイヤーは、
バックの木の画像
SHOPの画像
GALLERYの画像
PROFAILの画像
CONTACTの画像
SHOPにマウスオーバーした時の画像
GALLERYにマウスオーバーした時の画像
PROFAILにマウスオーバーした時の画像
CONTACTにマウスオーバーした時の画像
というふうになっています。ロールオーバーメニューは、「通常」「Over」「Out」で、
Over時に文字が大きくなるようにしました。2アップで見ると、ＳＨＯＰに触れると
GALLERYの画像
PROFAILの画像
CONTACTの画像の4つが大きくなって、PROFAILに触れるとCONTACTのみが一緒に大きく
なってしまいます。ということは、どうやら右側の画像に反映されてしまっているので
しょうか・・・。どこをどう直したら正しくなるのやら(T_T)

▲このページのトップに戻る
304691Re:Image Readyでのボタンの作り方白茶 2005/11/04-19:53

記事番号304458へのコメント
ちび。さんは No.304458「Re:Image Readyでのボタンの作り方」で書きました。

>どこをどう直したら正しくなるのやら(T_T)

苦戦されていますね。
でも「惜しい」所まで来ていると思いますよ。
あともう少し頑張りましょう。

今、どのスライスが選択されているのかは、スライスの枠色で判断します。
黄色の枠で囲まれているスライスが、現在編集対象となっているスライスです。
編集対象以外のスライスは青色の枠です。
スライスの選択には「スライス選択ツール」を使用します。
ツールボックスの「スライスツール」の隣です。
「移動ツール」に似たアイコンのヤツです。

って、そんなことは分かってます？

SHOPにマウスオーバーしたときに、SHOP以外が太文字になるのは、
おそらくロールオーバーを設定するスライスの選択を
間違っているからだと思います。
SHOPスライスを選択していたつもりが、別物を選択していたと。
黄色の枠を目印にもう一度頑張ってみて下さい。


もし、一気にやるのがややこしかったら、ですね、
最初にスライス単位毎に小さなpsdファイルを幾つも作っておけば、
スライスのことを考えずにロールオーバーについてだけ考えれば良い
状態で作業が出来ますよ。

ただ、この場合は、
「親」となるhtmファイルに、必要なjavascriptを移植する。
という作業が別途必要になります。
でも、
勉強になるから、その方が良いかもしれませんね。
実際私はそのようにしています。


▲このページのトップに戻る
304715Re:Image Readyでのボタンの作り方ちび。 2005/11/04-21:57

記事番号304691へのコメント
白茶さんは No.304691「Re:Image Readyでのボタンの作り方」で書きました。

黄色を目印に再度挑戦いたしましたがやはり右隣が連携してしまいます。。。
ロールオーバーメニューに選択した箇所が出ますよね。見ながらしてますので
別物を選択していたということはない模様です。しかも、最初に全部スライス
しないで、「ＳＨＯＰ」をスライスしてロールオーバーメニューで作って、
「ＧＡＬＬＥＲＹ」をスライス・・・という具合にしてます。全部スライス
した後で、スライス選択ツールで触っても選択してくれなかったからです(?_?)

htmファイルに、必要なjavascriptを移植???は私には私には難しい・・・

▲このページのトップに戻る
304874Re:Image Readyでのボタンの作り方ちび。 2005/11/05-16:11

記事番号304715へのコメント
ちび。さんは No.304715「Re:Image Readyでのボタンの作り方」で書きました。

白茶さんこんにちわ。
たった今ロールオーバーボタンできました！
ほんとうにありがとうございました！後は自分のＨＰに貼り付けるんですね。
お世話になりました☆

パソコントラブル解決・過去ログTOP  >  ログTOP  >  ImageReadyでのボタンの作り方

A1.本ページは参考になりましたか？　又はアドバイスがありますか？
解決　参考になった　参考にならなかった　アドバイスする

A2.何度目の訪問ですか？
初めて来た　　　数度目(２～４)　５回以上来ている　　 管理人:

A3.何か一言どうぞ(アドレスは書くことができません)

A4.アドレスがあればどうぞ(１つまで)


↑↑↑↑よろしければ押してください↑↑↑↑

何か一言(本ページで参考になったならないを含めて残してあります)
◎：解決　○：参考になった　×：参考にならなかった　！：アドバイスあり

参考回数投稿日時何か一言
(社)日本お助け隊
人間関係のトラブルの相談にのります。
電話相談無料。
和魂カウンセラー認定講座
和魂カウンセラー認定をしています。
全国イベントスケジュール
イベントが登録でき申込みできます。無料。