今日はPhotoshopを使用したメニューボタンの作り方をご紹介です。
まず横のガイド線を1本入れます。
その後新規レイヤーを1枚作成し、ガイドに重なる位置に[長方形選択ツール]で
適当な大きさ範囲選択を作りお好きな色で塗りつぶしをかけます。
[選択範囲]メニュー→[選択範囲を変更]→[滑らかに]で3pxかけた後
Shift+Ctrl+Iキーで範囲選択を反転し、Deleteキーで背面を削除します。
角が取れた丸みのある四角が出来ます。
no comment
ISAパソコンスクール渋谷STAFF BLOG
カラダとココロがアクティブになれる街★渋谷がもっと楽しくなれるBLOG
Browsing in デザイン－Design
今日はリストとCSSを使ってナビゲーション用のタブを作ってみます。
少々長くなりますので興味の無い方はスルーしてください（笑）
まず最初にxhtmlファイルを作成します。
<div>タグでナビゲーションのボックスを作りますが記述は以下のようになります。
***************************************************************************
<div id=”navi”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Company</a></li>
<li><a href=”#” class=”active”>Business</a></li>
<li><a href=”#”>Careers</a></li>
<li><a href=”#”>Information</a></li>
</ul>
</div>
<div id=”main”>CSSでタブナビゲーションを作る</div>
***************************************************************************
ナビゲーション部分のボックスはID：navi 本文部分のボックスはID：mainとしました。
現在アクティブになっているページ（Business）のliはclass名：activeにしていますが
これは各ページごとに変わってきます。例えばHomeのページではHomeのliに
class=”active”を設定するわけです。
リンクはダミーリンクで#を入れていますが実際はリンク先のアドレスを入れてください。
ただしこれではリスト形式で以下のように文字が表示されるだけです。
渋谷ブログがスタートして1ヶ月ほど経ちましたが、
そろそろデザインネタが欲しい！と店長から要望がありました。
渋谷校ではWEB・DTP分野をメインに担当しておりますが
実際のホームページ制作で使える本格的なテクニックは
ブログで載せますと大変な量になってしまいますので（＾＾；）
小技tips系などをシリーズで少しずつUPしていきたいと思います。
1回目の今日はPhotoshopを使ってのおすすめAQUA風ボタンの
作り方をご紹介します。
まず最初に、[角丸長方形ツール]（シェイプレイヤー）で
適当な大きさの角の丸い四角を描きます。角丸の半径の値は16pxにしました。
この時自動的に作られたレイヤーをダブルクリックして、
レイヤースタイルの[光彩（内側）]をオンにします。
描画モードは[乗算]で、不透明度は40%程度、色は黒にします。
