ベストアンサー

光沢のあるボタンの作り方について

2010/02/23 17:31

光沢のあるボタンの作り方についてデザインド素人です、Photoshop Elements7を使用しています。ホームページのメインメニューなどにweb2.0風？(光沢のあるかっこいいやつ)の画像を作成したいのですが、ネットをみてもphotoshopを使用してるものしか見つからず、やってはみるもののElementsにはない機能がいつもでてきて、いつも途中で挫折してしまいます。ネットでは色を指定したら自動で作成するものもありますが、後学のためにやはり自分で作ってみたいです。作り方をご存知の方ご教授お願いします。もしくはElementsでも作成できるサイトのご紹介をお願いします。

devilconan
お礼率80% (64/80)

画像・動画・音楽編集
回答数6
ありがとう数8

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

B-WING2
ベストアンサー率46% (262/561)

2010/02/24 16:30 回答No.5

No.3です。 http://www.dougamanual.com/blog/82/436/e2340.html elementsを使ったこと無いので詳しいことは言えませんが、上記サイトを参考にしてみてください。本家Photoshopだとレイヤースタイルでベベルをかけて、レイヤーでグラデーションかけて透明度を調整するだけなんですけどね。

質問者

お礼 2010/02/25 09:12

指定URLのサイトではよくわからなかったのですが、 >本家Photoshopだとレイヤースタイルでベベルをかけて、レイヤーでグラデーションかけて透明度を調整するだけなんですけどね。をヒントに試行錯誤してみたらできました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/02/25 00:02 回答No.6

この場合の背景画像の作り方は他の方の説明を参考にしてください。私は別のソフトを使っている。　ポイントは添付のように、４種類のグラデーション画像を縦に４つならべたものが外との設定上はとても楽です。 1) 一つの画像の立て幅は４つないし５つのグラデーションをならべたもの 2) 上からデフォルト、フォーカス、アクティブ、訪問済み、(現在のページ)とする。　　順番は任意です。 3) 各画像の立て幅は100pxが扱いやすい 4) 横幅は1px以上　添付画像では５色(red,yellow,green,blue,gray)を説明 HTMLの該当部分は、サイト内ナビゲーションですから下記のようにマークアップしてある。 <div class="documentInfo"> 　　<ul id="siteNav"> 　　　　<li><a href="./index.html">Top</a></li> 　　　　<li><a href="./info.html">Infomation</a></li> 　　　　<li><a href="./product/index.html">Product</a></li> 　　　　<li><a href="./siteMap.html">SiteMap</a></li> 　　　　<li><a href="./contactUs.html">Contact</a></li> 　　</ul> ★ 検索エンジンや携帯電話などCSSを理解しないブラウザのために、ナビゲーションリストとしてマークアップしてある。 CSS部分 div.documentInfo ul#siteNav li a:visited{ 　background-position: 0px -350px; }/* 訪問済みは上から3番目の背景画像 */ div.documentInfo ul#siteNav li a:focus, div.documentInfo ul#siteNav li a:hover{ 　background-position: 0px -150px; 　color:black; }/* フォーカスされた時の背景 */ div.documentInfo ul#siteNav li a:active{ 　background-position: 0px -220px; }/* アクティブな時 */ 以下HTML全体 ★タブは全角スペースで置換してある。テストするときは元に戻す ★細かい説明はしない。自分でそれぞれのプロパティは調べること ★下記検証サイトでチェック済み　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> 　　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> 　　<title>サンプル</title> 　　<meta http-equiv="Content-Style-Type" content="text/css"> 　　<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > 　　<link rel="START" href="../index.html"> 　　<style type="text/css">  </style> </head> <body> <div id="Top"> <h1>サンプル</h1> </div> <div class="bodyText"> <p>・・・・・本文・・・・</p> </div> <div class="documentInfo"> 　　<ul id="siteNav"> 　　　　<li><a href="./index.html">Top</a></li> 　　　　<li><a href="./info.html">Infomation</a></li> 　　　　<li><a href="./product/index.html">Product</a></li> 　　　　<li><a href="./siteMap.html">SiteMap</a></li> 　　　　<li><a href="./contactUs.html">Contact</a></li> 　　</ul> 　　<h2>更新履歴</h2> 　　<dl class="document-version"> 　　　　<dt id="FIRST-PUBLISHED">First Published</dt> 　　　　<dd>2005-06-10</dd> 　　　　<dt id="LAST-MODIFIED">Last Modified</dt> 　　　　<dd>2005-06-10 12:00:00 (JST)</dd> 　　</dl> </div> </body> </html>