PhotoshopでのWeb 2.0インターフェイスのデザイン
以下のチュートリアルを理解することはそのテクニックを理解することです、それであなたはあなた自身がウェブサイトのためのいくつかのグラフィカルユーザインタフェースを描くことができます. サイドナビゲーション, ボタン, ヘッダー, 例えば。すべてのWeb 2.0スタイル.
新しいキャンバスを起動します。任意のサイズ450x300pxよりも大きいものはいいでしょう。を選択 角丸長方形ツール 上の画像のように大きな長方形を描きます.
角丸長方形のレイヤーをダブルクリックして ブレンドオプション. 以下のスタイルの設定を変更します.
影を落とす
不透明度：31％距離：1pxスプレッド：0％サイズ：5px
ベベルとエンボス
奥行き：100％サイズ：0ピクセル柔らかくする：0ピクセル
グラデーションオーバーレイ
グラデーションをダブルクリックして、次の停止点を設定します。場所：0％、＃1378cd場所：100％＃4da5f0
ストローク
サイズ：5ピクセル位置：内側色：＃54abf6
テキスト、キャッチフレーズ、URLなどを挿入しましょう。ロゴを左側に配置できるように、中央にして右に揃えます。テキストをスタイルしましょう。私はLucida Sans Unicodeを使っています。 55pt;なめらか文字トラッキング（文字間隔）の場合は-120。テキストレイヤーをダブルクリックして、以下を設定します。 ブレンドオプション.
グラデーションオーバーレイ
グラデーションをダブルクリックして、次の停止点を設定します。場所：0％、＃9ec7eb場所：100％ecf6ff
その後、テキストの左側にロゴを挿入する必要があります。ロゴを表すために、半径5ピクセルの丸みを帯びた長方形を使用します。これが ブレンドオプション 角丸長方形の設定.
内側の影
不透明度：45％距離：0ピクセルサイズ：43ピクセル。
ベベルとエンボス
奥行き：100％サイズ：0ピクセル柔らかくする：0ピクセルハイライトモード不透明度：50％シャドウモード不透明度：100％
グラデーションオーバーレイ
グラデーションをダブルクリックして、次の停止点を設定します。場所：0％＃0e2f4a場所：47％＃001a31場所：48％＃002545場所：100％＃0f4b7f
ストローク
サイズ：5ピクセルグラデーションをダブルクリックして、次の停止位置を設定します。場所：0％＃1468af場所：100％＃50abf8
少し光沢のある効果を与えましょう。ホールド CTRL 角丸長方形を左クリック レイヤーのサムネイル. 丸みを帯びた四角形全体を選択すると、 長方形マーキーツール, ホールド ALT 選択された領域の後半部分を引き出す。上の画像のように.
新しいレイヤーを作成してください。それを上にドラッグして、すべてのレイヤーの上にくるようにします。選択した部分を白[#ffffff]で埋めます。不透明度を15％に変更.
チュートリアルはここで終わります。このデザインをどのように利用するかはあなた次第です。サイズや色を少し変えることで、Webヘッダーやボタンとして使うことができます。ここにいくつかの例があります.
ウェブサイトのヘッダー
ウェブサイトのボタン
