グローバルナビゲーション（Photoshop）

しろうさぎの作品

東急電鉄

「東急電鉄」のグローバルナビゲーションを参考に「Photoshop」で作成


ボタン作成時間：1時間30分
HTML+CSSコーディング時間：30分

総作業時間：2時間

背景画像

「１px×１px」の正方形を斜めに並べて斜線を作成

「コピー＆ペースト」をしながら。。。

色はグラデーションツールを使用してつける

下地の色は斜線よりも濃い色でグラデーションツールを使用してつける
]

下線をつける

レイヤーを順番に重ねると

 a:link用

「角丸長方形ツール」の「角の丸みの半径」を「３px」に設定

遠近法で上の左右を「４px」内側にづらす

グラデーションツールで下線を作る。レイヤーは「乗算」にする

レイヤーを順番に重ねると

 a:hover用

「角丸長方形ツール」の「角の丸みの半径」を「３px」に設定


レイヤーを順番に重ねると

 完成
  • font : A-OTF 新ゴ Pro R 13px
  • color : #333333; / #000000;
  • a:link






  • a:hover






■しろうさぎの作品
「一人前のwebデザイナーを目指して｜web designbook」にアップ中！！