メニュー：立体的グラデーション

ここではulとliでメニューを組み背景に立体的グラデーションを使っている素材を解説しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：200px　高さ：30px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

ひとつの画像で作るメニュー

今回のメニュー画像はひとつの画像で作るので文字サイズを想定して作ります。paddingなどである程度調整はできます。
まずグラデーションで中央部分が盛り上がった感じを作ります。

上の画像のように長方形選択ツールを使い上半分を選択し、グラデーションをかけます。グラデーションは上側を薄く、中央側を濃くします。
今回の場合は青を基準に作成しています。本来は横幅は200ピクセルありますがここでの画像の場合すべてを掲載できないのでカットしています。実際は右側にさらに画像があります。

次に上半分をコピーアンドペーストし同じものを作ります。コピーアンドペーストした場合、新しくレイヤーが作られます。コピーアンドペーストした状態では重なっているので移動ツールを使い上の画像のようにずらします。

さらに上部メニューのイメージから回転→「レイヤーを上下に反転」を選択し下半分の画像を上下反転させます。すると上の画像のようになると思います。

さらに立体的にするために一番上の1ピクセルに周りの色よりもさらに薄い色で塗りつぶします。

今度は一番下の1ピクセルに周りよりも濃い色で塗りつぶします。
できたらすべてのレイヤーを結合しておきましょう。

↓完成画像

三角形をつける

せっかくのひとつの画像なのでメニューにワンポイントを加えてみます。
まず新規レイヤーを作成しそこに新しい三角形を作ります。

上の画像のように左端に三角形を作ります。
真ん中あたりにまず基本の三角形を作りその下の辺に白色で影を作りくぼんだ感じに仕上げています。
このあたりは各自好きなように作成してみてください。

さらに出来上がった画像の一番右の1ピクセルを塗りつぶし立体的にします。
これで完成となります。

↓完成画像

CSSで配置

htmlです。

<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>

cssです。

ul{
margin:0;
padding:0;
list-style:none;
width:200px;
color:#ffffff;
}

li{
margin:0;
padding:5px 0 0 10px;
background:url("画像へのパス") no-repeat;
height:25px;
}

結果

解説

今回のメニューは繰り返しは行わずひとつの画像でメニューを構成しています。
特徴は中央部分を盛り上がらせた感じの立体的なグラデーションです。

中央部分と上下の色を区別しすぎているため少しきつい印象を受けますが、色の変化を少なくしたり、上下反対にするだけではなく上と下で幅を変えたりするなどすればさらに見栄えはよくなると思います。

▲トップ