JTrim 007 / 凸凹ボタンの作成(HPのリンクボタン) 簡単なアンケートです。ご協力ください。

Enjoy JTrim > JTrim Lab > 加工アラカルト >
関連項目を見る >>   次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ!

このページではホームページでよく使うメニューの選択ボタンを作ってみましょう。
とっても簡単にできますが,ちょっと工夫をすることによって動きが違ってきます。 下の2つのボタンにマウスを乗せてください。違いがわかりますね。右の方はナチュラルにボタンを 押した感じが出ています。これは 凹 ボタンに文字を入れる際 若干右下に文字全体をずらします。 ちょっと手間がかかりますが,それだけの効果は得られます。
動きの少ない静かなページには左のボタン,動きのあるページには右というように使うとよいかもしれません。
あなたもオリジナルのボタンを作ってみてはいかが!



凸凹ボタンの文字を同じ位置で作成 凹ボタンの文字の配置を右下に少しずらして作成










■作成過程

<No.1>
「ファイル」→「新規作成」で画像縦横サイズとキャンバスの色を決めてOK, ここでは160×20 キャンバス色「白」とします。


<No.2>
「グラデーション」の色1と色2でボタンの色を決めます。(「塗りつぶし」でもかまいません。お好きなほうでどうぞ!)


<No.3>
「イメージ」→「テクスチャ」で好みのボタン地にします。(「テクスチャ」を使うかどうかはお好みで!)


<No.4>
「編集」→「文字入れ」で文字を入力します。このときに「透過」を選択してください。
文字の配置はマウスのカーソルで移動できますので,適宜配置してください。


<No.5>
「加工」→「立体枠をつける」まず 凸 ボタンを作ります。


<No.6>
「ファイル」→「名前を付けて保存」で保存してください。


<No.7>
保存したら「元に戻す」で1回戻ってください。(文字をずらす場合はもう1回戻って文字を一旦消します。 もう一度「編集」→「文字入れ」から文字を配置します。このときに、凹の場合は 右下にちょっとずらすのがコツです。)


<No.8>
今度は 凹 ボタンを作ります。「加工」→「立体枠をつける」で「凹 ませる」にチェックを入れます。


<No.9>
「ファイル」→「名前を付けて保存」で保存してください。



HTMLソースの書き方

HTMLソースには次のように記述します。

<a href="リンク先のURL">
<img src="xxx.gif" border="0"
onMouseover="this.src='yyy.gif'"
onMouseout="this.src='xxx.gif'" alt="コメントを記載">
</a>

xxx.gif : マウスカーソルが乗っていないときの画像
yyy.gif : マウスカーソルが乗ったときの画像


◆このページは Enjoy JTrim 内の「JTrim Laboratory 〜 初心者向け実験室」の一つです。

お立ち寄り記念に簡単なアンケートへご参加ください。 こちらからどうぞ!



to Page top