- ベストアンサー
光沢のあるボタンの作り方について
光沢のあるボタンの作り方について デザインド素人です、Photoshop Elements7を使用しています。 ホームページのメインメニューなどにweb2.0風？(光沢のあるかっこいいやつ)の画像を作成したいのですが、ネットをみてもphotoshopを使用してるものしか見つからず、やってはみるもののElementsにはない機能がいつもでてきて、いつも途中で挫折してしまいます。 ネットでは色を指定したら自動で作成するものもありますが、後学のためにやはり自分で作ってみたいです。 作り方をご存知の方ご教授お願いします。もしくはElementsでも作成できるサイトのご紹介をお願いします。
- devilconan
- お礼率80% (64/80)
- 画像・動画・音楽編集
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.3です。 http://www.dougamanual.com/blog/82/436/e2340.html elementsを使ったこと無いので詳しいことは言えませんが、上記サイトを参考にしてみてください。 本家Photoshopだとレイヤースタイルでベベルをかけて、レイヤーでグラデーションかけて透明度を調整するだけなんですけどね。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
この場合の背景画像の作り方は他の方の説明を参考にしてください。私は別のソフトを使っている。 ポイントは添付のように、４種類のグラデーション画像を縦に４つならべたものが外との設定上はとても楽です。 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"> <!-- html,body{margin:0px;padding:0px;} div#Top{ margin-top:30px; } div.documentInfo ul#siteNav{ display:block;width:100%;min-width:520px;margin:0px;padding:2px; position:absolute;top:0px;left:0px; } div.documentInfo ul#siteNav li{ display:block;list-style:none; float:left; line-height: 24px;font-size: 16px; width:19%;min-width:100px; border:solid gray 2px; background-color: rgb(100,100,100); } div.documentInfo ul#siteNav li a{ display:block; width:100%;height:100%; color:white;text-align:center; background-image: url(../images/green.png); background-repeat: repeat-x; background-position: 0px -50px; } div.documentInfo ul#siteNav li a:visited{ background-position: 0px -350px; } 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; } --> </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>
お礼
なるほど全ての画像を最初から表示させて、マウスイベントで画像をずらすことで表示の遅れをなくし常に見れるのですね。 勉強になります。 画像は他の方のやり方を参照させていただき、完成したらこのコードを参考にさせていただきページを作成してみます。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞エドウィンHPのトップページにある黒光りしているメニュー(MEN'SとかLADIES'とか書いているところ)のようなイメージのものを作成したいです。 あれは、画像ではなく、背景画像です。 詳しくは帰ってきてから・・今から出かける。
補足
すいません、エドウィンのHTMLタグみたらCSSで指定している背景画像でした。 お手数おかけしますが宜しくお願いします。
- B-WING2
- ベストアンサー率46% (262/561)
http://www.webdesignlibrary.jp/2008/07/website-banner.php こんなの？ ベベルとグラデをうまく使えば簡単にできるよ。
補足
回答ありがとうございます。 こういう感じです。一番作ってみたいのは今のエドウィンHPのトップページにあるメニューの感じです。 ベベルとグラデをどのように利用すれば作れますか？ きいてばっかりですいません・・。
http://gigazine.net/index.php?/news/comments/20061113_web2_logomaker/ ができないのだとすると、視点を変えて LogoShader http://homepage2.nifty.com/pyonpyonpyopyon/ を使うとか。 --- http://aska-sg.net/psegogo/index.html http://www.detarame.jp/index.html http://www.geocities.co.jp/SiliconValley/4634/agreeable.html http://www.geocities.co.jp/MusicStar-Guitar/7240/ http://courier.adobe.co.jp/pse/ http://labaq.com/archives/51344221.html
お礼
回答ありがとうございます。 なるほど別ツールを使ってみるのもひとつの手ですね。 一度チェックしてみます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どのような画像なのか？？イメージがわきません。 ご自身ではおわかりなのでしょうが・・・具体的にこのサイトとかを
補足
すいません、肝心なことを言い忘れていました。 エドウィンHPのトップページにある黒光りしているメニュー(MEN'SとかLADIES'とか書いているところ)のようなイメージのものを作成したいです。
お礼
指定URLのサイトではよくわからなかったのですが、 >本家Photoshopだとレイヤースタイルでベベルをかけて、レイヤーでグラデーションかけて透明度を調整するだけなんですけどね。 をヒントに試行錯誤してみたらできました。 ありがとうございました。