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

解決済

質問者：devilconan
質問日時：2010/02/23 17:31
回答数：6件

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

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

作り方をご存知の方ご教授お願いします。もしくはElementsでも作成できるサイトのご紹介をお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： B-WING2
回答日時：2010/02/24 16:30

No.3です。

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/02/25 09:12

No.6

回答者： ORUKA1951
回答日時：2010/02/25 00:02

この場合の背景画像の作り方は他の方の説明を参考にしてください。

私は別のソフトを使っている。
　ポイントは添付のように、４種類のグラデーション画像を縦に４つならべたものが外との設定上はとても楽です。
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. … )
　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
<!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>