このチュートリアルでは、Photoshop（フォトショップ）とImageready（イメージレディー）を使って、太陽のアニメーションを作る方法を紹介します。

• Step1 ： 夜明けの画像に太陽を描く
• Step2 ： 太陽が空にのぼるようにマスクする
• Step3 ： 朝焼け色のレイヤーをつくる
• Step4 ： アニメーションをつくる
• Step5 ： 完成

暗い夜明けのように見えるように、「フィルタ」−「描画」−「照明効果」を適用したものです。

新規レイヤーを作り、円を描きます。
太陽っぽく輝かせます。

太陽を描いたレイヤー上で右クリックし、「新規スマートオブジェクトに変換」を選択します。
これにより、これから作るマスクは動かなくなります。

レイヤーの右下にアイコンが出てきます。
レイヤーがスマートオブジェクトであることを表しています。

レイヤーにマスクを追加します。

新しくマスクを選択し、ブラシツールに切り替えます。
不透明度を30%くらいに低く設定しておきます。
太陽と山が重なっている部分は完全にマスキングし、山からはみ出ている部分はマスクを少しだけにしておきます。
これにより、アニメーションをかけたときに、太陽が昇るにつれて明るくなるように見えます。

参考までに、私のレイヤーはこのようになっています。

新規レイヤーを作り、描画モードをカラーに変えます。
再びブラシツールを選択し、明るいオレンジ色で写真の空や木や岩を塗っていきます。
不透明度は0%に設定しておきます。

「ウィンドウ」−「アニメーション」を選択します。

アニメーションを作るには、アニメーションパレットでフレームを複製し、太陽レイヤーを少しずつ上げていきます。
私は、11レイヤー作りました。
6番目からオレンジ色のレイヤーの不透明度を2〜3%ずつあげていきます。

オレンジレイヤーの不透明度の例です。

アニメーションで太陽が動き、色が変化します。

アニメーションをクリックすると、再生して確認することができます。
「ファイル」−「web用に保存」で、「.gif」の拡張子で保存します。

引用:Web Design Library　著者:Lombi　翻訳：なかけん

世界最大級のホームページテンプレート販売サイト「テンプレートモンスター ジャパン」のサイト紹介です。

• Step1 ： 高品質デザインに自信があります！
• Step2 ： テンプレートを検索してみよう！
• Step3 ： テンプレートを編集してみよう！
• Step4 ： 各種CMSテンプレートが充実！
• Step5 ： テンプレート編集パートナー制度って何？
• Step6 ： アフィリエイト制度があるの？
• Step7 ： 「テンプレートモンスター ジャパン」まとめ

テンプレートモンスターのデザインは全て高品質デザインであると自信を持って自負します。
販売しているテンプレートは1サイト分丸ごと入って8,000円程度と、とてもリーズナブルです。
HTMLやFlashを使用したテンプレートのほか、各種CMSに対応したテンプレートなど、23000点以上もの高品質テンプレートを販売しています。

是非、今すぐに「http://www.templatemonster.jp/」へアクセスしてデザインをご覧ください。
テンプレート一覧＞テンプレート詳細　とご覧頂き、テンプレート詳細ページの中で動いているFlash内の全ページ、詳細ページからリンクしているデモ内の全ページ、詳細の上部にあるプルダウンにある全ページを含んでいます。

どんな拡張子のファイルが入っているのか、編集や公開をするにはどんなソフトウェアやサーバが必要なのかはテンプレート毎に異なります。必ず詳細ページ内の「付属しているファイルの拡張子」「編集に必要なソフトウェア」を確認してからお買い求めください。

各ジャンルのテンプレートは、サンプルも公開しています。ダウンロードしてお試しください。

テンプレート検索の方法は、各種カテゴリ検索やキーワード検索など、各種用意しています。
テンプレートカテゴリの一例を、ニーズ別に簡単にご紹介します。

- シンプルなテンプレートが欲しい → 医療
- 画像を多く掲載したい　→　フォトギャラリーの多いアート
- Flashにしたいけれど、SEOも更新も諦めたくない　→　更新時はテキストエディタでxmlを更新すればOK！ なFlash＋XML

また、テンプレートに多く含まれる色から検索をする「カラー検索」も可能です。

テンプレートを購入すると、購入時の登録メールアドレスへ、ダウンロードURLを含むメールが届きます。
ダウンロードしたzipファイルを解凍すると、更にsourceを含む名称のzipを含んでいます。
source.zipにはパスワードを付けていますので、パスワード対応の解凍ソフトウェアで解凍してください。
（ロゴテンプレートなど、一部テンプレートタイプにはパスワード付きsource.zipを含んでおりません）

主なテンプレート構成について、簡単にご紹介します。
（各種CMSテンプレートやロゴテンプレートの構成は異なります。）

- fontフォルダ　→　はじめに、編集するコンピュータへインストールしてください
- sourceフォルダ　→　編集に必要なflaやpsdなどのデータを入れています。
　編集完了後、下記のsite、site_flashフォルダ内の該当ファイルと置換ください。
（psdファイルは編集後に、jpg、gifなどに書き出して置換ください。
　flaファイルは編集後にパブリッシュし、生成されたswfファイルを置換ください）
- site（Flash不要の方）、site_flash（Flashを要する方）
　→　編集完了後、このフォルダのみをサーバにアップしてください
（Flashを要するか否かで必要フォルダが異なります。一方のみ必要とします）

テンプレートモンスターには、各種CMSのテンプレートが充実しています。
下記でCMSの一例を、簡単にご紹介します。

- osCommerce（オーエスコマース）テンプレート　→　テンプレート数が最も多いショッピングテンプレートです
- Zen Cart（ゼンカート）テンプレート　→　Zen Cart日本語版でもご利用いただけるテンプレートです
- PrestaShop（プレスタショップ）テンプレート　→　多言語でのショッピングサイト運営に適したカートです。日本語のLanguagePackが無料提供されています
- Joomla!（ジュームラ） テンプレート　→　多言語CMS「ジュームラ」のテンプレートです
- WordPress（ワードプレス）テンプレート　→　無料のブログCMS「ワードプレス」のテンプレートです。各種プラグインが充実しています

テンプレートモンスターでは、テンプレートをテンプレート購入者の代わりに編集してくださるプロを
「テンプレート編集パートナー」として無料でご紹介しています。

テンプレート編集を行ってくださるプロの方は、どなたでも登録可能です。
「テンプレート編集パートナー」のご登録はこちらからどうぞ。

テンプレートモンスターには、独自のアフィリエイト制度をご用意しています。

アフィリエイトプログラムに登録いただくと、即日からバナーやテンプレート表示ツール（javascript）を利用することが可能です。あなたからの紹介で訪問者がテンプレート購入を行った場合、あなたにテンプレート売り上げの10％をキャッシュバックします。

また、あなたの紹介した訪問者がアフィリエイト会員となった場合、その訪問者はあなたの「サブアフィリエイト会員」となります。サブアフィリエイト会員からの紹介で訪問者がテンプレート購入を行った場合、あなたにもテンプレート売り上げの5％をキャッシュバックします。
「アフィリエイトプログラム」のご登録はこちらからどうぞ。

写真素材販売サイト「Photooo（フォトー）」など、姉妹サイトが次々と増えるテンプレートモンスター ジャパン。
各種サービスを活用して、より充実したWebクリエイターズライフをお過ごしください。

著者:Web Design Library

• Step1 ： はじめに
• Step2 ： それぞれの色の働き
• Step3 ： Webサイトにおける色の役割

ウェブサイトのデザインには、入力からレイアウトや色に至るまで、数々のスキルの積み重ねを要します。色は、ユーザーによる第一印象を決める、特に重要な要素です。色遣いが正しければユーザーに好印象を与え、色遣いを間違えるとユーザーに悪印象を与えます。

良いウェブサイトを作るために、ウェブデザイナーは人に印象を与える色の働きについて知る必要があります。人は無意識のうちに色に反応したり、色に対して異なる感情や感覚と関連付けたりします。色は、単に人の感情や感覚を刺激してサイトの見え方に影響を与えるのではなく、ユーザーをサイトの特定のセクションへ誘導するために巧妙に使われます。

最近インターネットで使えると思われるそれぞれの色について言えることは、正しい色を選ぶのは大仕事であるということです。ここでは色が特定の反応をどのように引き起こすかについて簡単に概要を紹介します。

緑色（グリーン）：
自然、平和、心遣い、オーガニックと関連付けられた色です。またリラックス効果を与えます。緑色のスペクトルの淡い側の色はサイトにリラックスした感覚を与えます。

白色（ホワイト）：
純粋、簡素、無、純真と関連付けられた色です。サイトのメインの色に使われると、クリーンでシンプルな感じになります。

青色（ブルー）：
自信、冷静、沈着、水、平和、誠実と関連付けられた色です。ビジネス系のサイトによく使われています。世界で最も知られた色で、強さや自信を印象付けるために多くの企業で使われています。

黒色（ブラック）：
神秘、洗練と関連付けられた色です。デザインや写真のウェブサイトに非常によく使われ、コントラストをつけたり他の色を引き立てたりするために使われます。

灰色（グレー）：
敬意、謙虚、衰退、退屈と関連付けられた色です。多くの場合、グレーはウェブサイトデザインの中で輝きのあるグラデーションを作るために使われ、プロフェッショナル、普通という印象を与えます。

橙色（オレンジ）：
スピリチュアルやヒーリングと関連付けられた色です。仏教を象徴する色であり、穏やかなエネルギーがあります。オレンジ色をサイトに使うとデザインに若々しさを与えます。

紫色（パープル）：
誠実、スピリチュアル、傲慢、豪華と関連付けられた色です。暗めの紫は、深くて官能的なイメージを与えます。明るめの紫は、ロマンスや優美を表します。この色はあまりサイトでは使われません。

エネルギー、活気、刺激にあふれているため、ウェブサイトのデザインにはオレンジ色が最適です。オレンジ色は、デザインに若々しさを加えるために使われます。

色の役割は、ウェブサイトの見た目を良くするだけではありません。閲覧者から感覚や感情を引き起こします。エンドユーザーを煩わせる色を選ぶとウェブサイトにダメージになり、適切な色を選ぶとウェブサイトはユーザーの期待に応えることができます。

引用:Web Design Library　著者:Vipin　翻訳：菊池

このチュートリアルでは、葉っぱの壁紙を作る方法を紹介します。

• Step1 ： はじめに
• Step2 ： 葉っぱをつくる
• Step3 ： 葉っぱを複製する
• Step4 ： グラデーションを適用する
• Step5 ： 白い花を加える
• Step6 ： ベリーを加える

暗いグリーンを使います。

新規レイヤーを作成してください。
ペンツールを使い、葉っぱの形を作ってください。左右対称でない方がいいでしょう。

葉っぱのレイヤーに、下記のレイヤースタイルを適用してください。
光彩（外側）: 黒、オーバーレイ、50〜70%、10〜15px
光彩（内側）: 白、オーバーレイ、20〜40%、15〜25px

描画色を、黒に近い暗い緑に変えてください。
新規レイヤーを作成し、ペンツールを使って描いてください。

葉っぱができあがるまで、葉脈を描きます...

このレイヤーに、下記のレイヤースタイルを適用してください。
描画モード : スクリーン
光彩（外側） : 黒、オーバーレイ、10〜20%、5〜8px

葉っぱのパーツを含んだレイヤーを一つのグループにまとめ、たくさんコピーして下さい。
グループを選択し、Altを押しながら、グループをクリック&ドラッグして移動させると、スピードアップすることが出来ます。
Altを押しながらグループをドラッグする度に、Photoshopはグループのコピーを作成するでしょう。

（クリックして拡大）

15〜20回コピーをしたら、Ctrl+Tを押して、角度と大きさを変えてください。

さらに、15〜20回コピーをしたら、Ctrl+Tを押して、角度と大きさを変えてください。

（クリックして拡大）

30〜40分間コピーを続けたら、画像いっぱいに葉っぱで埋め尽くされ、背景は見えなくなります。
すべてのレイヤーとグループを一つのレイヤーに結合してください。
（その前にPSDファイルを保存しておくと良いでしょう）。

そして、次のレイヤースタイルを適用してください。
グラデーションオーバーレイ : 円形グラデーション、黒から白へ、オーバーレイ、比率：150%、不透明度：20〜25%

壁紙に花を加える場合は、新規レイヤーを作成してください。
描画色を白にし、ペンツールを使って、今までと同様にシェイプを描いてください。

パス選択ツールを使ってシェイプを選択し、コピー（Ctrl+C）、ペースト（Ctrl+V）、180度回転させて、下に移動してください。

すべてを選択し、コピー、ペースト、回転を繰り返してください。
（回転させている間、Shiftを押し続けてください。）

下記のレイヤースタイルを適用してください。
ベベルとエンボス : シャドウ = 黒、不透明度：10〜15%
光彩（外側）：黒、15〜20%、2〜3px

このレイヤーをコピーして、回転やリサイズを繰り返します。

この花にも、葉っぱが必要です。
このチュートリアルの最初で葉っぱのために作ったレイヤーをコピーし、花の下のレイヤーにペーストしてください。

コピー、ペースト、回転を繰り返します。

レイヤーをコピーし、回転、リサイズをします。
（私は、色を少し明るくしました。）

新規レイヤーで、花の別のパーツを作ります。
ペンツールを使って、曲線を描いてください。
そしてまた、コピー、ペースト、回転を繰り返します。

花ができました！

花のパーツを含んだすべてのレイヤーを、一つのグループにまとめてください。
そしてまた、コピー、移動、リサイズ、回転を繰り返します。

花の代わりに、ベリーをつけたスペシャルバーションも作りましょう。
描画色を赤にし、シェイプツールの楕円形ツールを選択し、円を描いてください。
（正円を描くために、Shiftを押してください。）

下記のレイヤースタイルを適用してください。
グラデーションオーバーレイ：白から黒へ、オーバーレイ、10〜15%
光彩（外側）：黒、オーバーレイ、30〜40%、4〜6px

新規レイヤーを作成し、描画色を白にして、ブラシツールを選択してください。
小さなハードブラシを選択し、円の上側に小さな点を一つ描いてください。
そして、新規レイヤーを作成し、その描画モードをオーバーレイにしてください。
より大きく、柔らかいブラシを選択し、円の下側にもう一つ円を描いてください。
そして、Ctrl+Tを押し、水平に形を変えてください。
（だから、円ではなく、楕円なのです。）

もう一つ新規レイヤー（描画モードをオーバーレイ、不透明度を40〜60％）に、黒と白のブラシを使い、より立体的に見えるようにしてください。

これらのすべてのレイヤーを一つのグループにまとめてください。
そしてまた、コピー、移動、リサイズを繰り返します。

ベリーにも葉っぱが必要です。
先ほどと同じ方法ですが、ここでは少し形を変えて葉っぱを作ります。

このステップもまた、このチュートリアルの最初と同じです。

新規レイヤーに、大きな黒いブラシで影をつけてください。

このようになります。

最後に、コピー、移動、回転、リサイズを繰り返して完成です。

（クリックして拡大）

引用:Web Design Library　著者:Vlad Gerasimov　翻訳：日下部

このチュートリアルでは、昼間の写真を夜の風景に変える方法を紹介します。

• Step1 ： 空を切りぬき別のレイヤーに移す
• Step2 ： 風景を青っぽくする
• Step3 ： 月を加える
• Step4 ： 星を描く
• Step5 ： 最後に

はじめに、元の画像から空を取り除きます。
空を取り除く作業には、ペンツールを使っても、他の選択ツールを使っても構いません。
取り除くべき部分を、下記に赤い矢印で示しました。
私はペンツールで空を選択しました。

これが空を取り除いた画像です。
取り除いた空は別のレイヤーにペーストします。

「レイヤースタイル」−「カラーオーバーレイ」を選び、描画モードは「カラー」に設定してください。
色は#56c1ffを選びます。

次に「レイヤースタイル」−「グラデーションオーバーレイ」を選び、グラデーションを「黄−緑−青」に設定してください。
描画モードは「焼き込みカラー」を選びます。

先ほどペーストした空のレイヤーを合わせると、このような画像になります。

空のレイヤーに、先ほどと同じ「カラーオーバーレイ」と「グラデーションオーバーレイ」を適用します。
このような画像になります。

ここで月を加えます。

月の描画モードを「スクリーン」に変えます。

「レイヤースタイル」−「光彩（外側）」を月に適用します。

「レイヤースタイル」−「光彩（内側）」を月に適用します。

月に「サテン」を適用します。

月に「カラーオーバーレイ」を適用します。

月に「グラデーションオーバーレイ」を適用します。

小さなサイズのブラシ（1〜2px）で星を描きます。

星に「光彩（外側）」を適用します。

全体に「レベル補正」を適用します。

完成です。

引用:Web Design Library　著者:PSDrockstar.com　翻訳：幕澤

このチュートリアルでは、Vista（ビスタ）風レイアウトを作成する方法を紹介します。

• Step1 ： はじめに
• Step2 ： ヘッダーをつくる
• Step3 ： ナビゲーションをつくる
• Step4 ： メインをつくる
• Step5 ： フッターをつくる
• Step6 ： 完成

透明な背景の新規ドキュメントを、800x950ピクセルで作成してください。

長方形選択ツールを選び、高さ215ピクセル、幅800ピクセルの長方形を描いてください。
次に、その長方形を黒とダークグレーの線型グラデーションで塗りつぶします。
ペンツールを選び、ブラシサイズを2〜6ピクセル、色を#4c842dにセットしてください。くねくねと曲がった線を描きます。
描いた線へ、レイヤースタイルの「光彩（外側）」を下記のように適用してください。

こんな感じになっているはずです。

再度ペンツールを選び、#389fa4の色で別の線を描いてください。
「光彩（外側）」を下記のように適用します。

こんな感じになっているはずです。

先ほどの色を使って1本ずつ、さらに2本の線を描きます。
今回はレイヤースタイルを適用せず、「フィルター」−「ぼかし」−「ぼかし（ガウス）」で線を3〜5ピクセルほどぼかします。

次に角丸長方形ツールを選び、ヘッダーの上部に長方形を描きます。
黒で塗りつぶし、下記の設定の線を追加します。

こんな感じになるはずです。

引き続き角丸長方形ツールを選び、右上部に小さなボタンを描きます。
下記のレイヤースタイルを適用してください。

同じ作業を繰り返します。
今回はボタンを先ほどのボタンの右に描き、下記のレイヤースタイルを適用してください。

楕円形選択ツールを選択し、下記のように白い楕円を描きます。

選択範囲を反転させ、レイヤーの不透明度を20％に設定してください。両方のボタンに行うと、こんな風になります。

角丸長方形ツールを選択してヘッダーの下の部分に長方形を描き、下記のレイヤースタイルを設定してください。

下記のような長方形です。

角丸長方形ツールを選び、ナビゲーションボタンを作成します。
最初に作成したグリーンのボタンと同じスタイルを適用してください。

ヘッダーとナビゲーションバーはほぼ完成です。
サイトのタイトルとキャッチフレーズ、ナビゲーションのタイトルを書き込みます。

長方形選択ツールを選び、ヘッダーの下部から始めて、ナビゲーションの一部が被るようにページの残り部分を選択し、白で塗りつぶします。

白い長方形に、下記のレイヤースタイルを適用してください。

角丸長方形ツールを選び、長方形を3つ描きます。
白で塗りつぶし、下記の設定で線を加えます。

レイアウトはこんな感じになっているはずです。

3つのボックスにそれぞれタイトルを付けます。

「Start Here!」のボックスに、楕円形選択ツールを使って4つの円を描きます。
好きな色を塗り、下記のレイヤースタイルを追加してください。

こんな感じです。

タイトル文字を追加します。

ここで、角丸長方形ツールを再度選択し、一番最初に作成したのと同じボタンを2つ作成してください。
ただし今回はもっと大きなものにして、「Start Here!」ボックスの下に置きます。

これら2つのボックスは、サイトの広告用に使います。

チュートリアル用のエリアを作りましょう。
好きなようにアイコンを作ってください。
私はカスタムシェイプライブラリーのシェイプを使用しました。
それらのアイコンをページの中央に、2セット配置してください。

それぞれのセットに、タイトルを付けてください。
次に長方形選択ツールを選び、色つきの仕切り線を描いてください。

再度、長方形選択ツールを選択し、ページの一番下に黒い長方形を描いてください。
これがフッターになります。
サイトに関する重要な情報を記述してください。

（クリックして拡大）

レイアウトは、これで完成です。

（クリックして拡大）

引用:Web Design Library　著者:Hv-Designs.co.uk　翻訳：幕澤

このチュートリアルでは、マンガに出てくるアヒルを作る方法を紹介します。

• Step1 ： アウトラインを描く
• Step2 ： シェイプを結合する
• Step3 ： アヒルの形を完成させる
• Step4 ： 影とハイライトを入れる
• Step5 ： 背景の水たまりをつくる
• Step6 ： 完成

シンプルな円形や楕円形のシェイプを使用して、次のようなアウトラインを描きます。

翼の付け根は円形のシェイプに、尾の部分はペンツールを使って、三角形のシェイプにします。

楕円形を3つ加えて翼の形を作ります。

ダイレクト選択ツールを使用し、アヒルのくちばしを作ります。

翼の付け根のシェイプを選択し、パスファインダで「合流」を選択して結合します。

パスファインダを使用し、三角形の尾のシェイプを体に結合するとアヒルの形になってきます。 また、3つの円を描いて目を作ります。
円の位置については次の通りです。

色を塗ります。
イラストのふちは太めの黒にします。

はさみツールを使用し、次のようにポイントを切り出します。

ふちが活きるよう、線のオプションを「丸型先端」にします。

パスファインダを使用した後、尾の部分を調整する必要があります。
ダイレクト選択ツールで尾の形を整えます。

くちばしに色を塗ります。

体の部分から2つコピーを作成し、少しだけ上に移します。
パスファインダを使用してシェイプを切り抜き、拡張ボタンをクリックします。

不透明度を調整し、色を程よく仕上げます。

同様に頭の部分へ影を入れます。

白く塗った円を加えてハイライトを入れます。

アヒルの後ろにフリーハンドで青い色の水たまりを作成し、コピーして色は塗らずにふちを作ります。

円形のシェイプを描いてグラデーションをつけ、色を塗ります。

様々なサイズのシェイプを、水たまりの周囲に散らします。

「ウィンドウ」−「ブラシライブラリ」−「ボーダー」−「破線」を選択し、破線のブラシでふちを入れます。

完成です。
水たまりに浮かぶ小さなアヒルが誕生しました。

引用:Web Design Library　著者:aiVault　翻訳：菊池

このチュートリアルでは、カーボンファイバーをはめ込んだナビゲーションを作る方法を紹介します。
これは、テンプレートモンスターのテンプレートからヒントを得て作成しました。

• Step1 ： 背景を作る
• Step2 ： ナビゲーションを作る
• Step3 ： ナビゲーションのボタンを作る
• Step4 ： ナビゲーションの球体を作る
• Step5 ： オンマウス状態の画像を作る
• Step6 ： 完成

1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。
描画色を「#bebebf」にして背景色を「#d2d2d2」にしたら、グラデーションツールで線形グラデーションを選択します。

グラデーションを選択したら、キャンバスの上から下に向けてドラッグします。

キャンバスにノイズを追加するときは、「フィルタ」−「ノイズ」−「ノイズを加える」で次のように設定します。

背景にぼかしを入れます。
「フィルタ」−「ぼかし」−「ぼかし(移動)」で次のように設定します。

キャンバスの両端にぼかしが入りすぎました。
選択範囲を作って、ぼかしの入りすぎたところを取り除きます。

キャンバスに作った選択範囲を切り抜きます。
明るいメタルの背景が現れるので、「ぼかし(移動)」の設定を調整してメタルを程よく調整します。

半径10ピクセルの角丸長方形ツールをドラッグし、ナビゲーション用の長方形をキャンバスの真ん中に描きます。

レイヤースタイルを次のように設定します。

すると次のようになります。

カーボンファイバーのテクスチャをカスタマイズします。
4ピクセル×4ピクセルの新規ドキュメントを作成し、次のようにコピーします。

カーボンファイバーのパターンができたら、「編集」−「パターンの定義」を選択して、ナビゲーションの作業に戻ります。

ナビゲーションの周囲の選択範囲を読み込みます。
「選択範囲」−「選択範囲を読み込む」でナビゲーションの長方形のレイヤーを選択します。
ナビゲーションのレイヤーの上に新規レイヤーを作成したら、塗りつぶしツールを選択して、パターンメニューからカーボンファイバーのパターンを選択します。
パターンを選択したら、読み込んだ選択範囲を塗ります。

カーボンファイバーのレイヤーのブレンドモードを「差の絶対値」にします。
次のようになります。

文字ツールでナビゲーション領域の下側に文字を入れます。

文字を入力したら、次のようにレイヤースタイルを設定します。

それぞれの文字の間に、隣接する1ピクセルの線を2本、ナビゲーションの上から下まで入れます。
線の1つを黒にして、もう1つを白にします。
線を作ったらレイヤーの不透明度を50％にし、ブレンドモードをソフトライトにします。

楕円形選択ツールをドラッグしてナビゲーションの文字の上に小さい円を描きます。

グラデーションツールの線形グラデーションを選択して、黒（#000000）からグレー（#828282）を設定したグラデーションをドラッグします。

楕円形選択ツールをもう一度使用し、最初に作った円の内側にもう一つ選択範囲を作成します。

選択範囲を「#8e8e8e」で塗ります。
選択範囲を指定した状態のまま、グレーの円の上に新規レイヤーを作成します。
描画色を白（#FFFFFF）にし、グラデーションツールの円形グラデーションを選択したら、グラデーションのタイプを「白から透明へ」に変更します。

選択範囲をズームし、円形グラデーションを左上の角からドラッグします。
グラデーションを大きくしたくない場合は、ドラッグを短か目にします。

選択範囲が指定された状態のまま、グラデーションのタイプを線形グラデーションに変更します。
もう1つ新規レイヤーを作成し、線形グラデーションで下から上にドラッグします。

それぞれのレイヤーの不透明度やグラデーションの位置を変えてハイライトを加えると、次のようになります。

球体とハイライト全部を複製し、隣のボタンへ移します。
全部のボタンに球体を作ります。

例として、「Portfolio」ボタンを使って説明します。
好みの色で、球体にグラデーションオーバーレイを適用します。

長方形選択ツールで、仕切り線の間へ、ボタンを囲むように選択範囲を作ります。

選択範囲を「#dddddd」で塗ったら、レイヤーのブレンドモードを「オーバーレイ」に設定します。

最後に多角形選択ツールで三角形のシェイプを作り、背景と同じ色で塗ったら、次のような設定でドロップシャドウを入れます。

オンマウス状態の画像ができました。
完成です。

引用:Web Design Library　著者:Hv-Designs.co.uk　翻訳：菊池