PhotoshopでWeb 2.0タブをデザインする

以下のガイドでは、Web 2.0スタイルのPhotoshopで素敵なタブメニューをデザインする方法について説明します。.

ステップ1

白い[#ffffff]背景を持つ任意のサイズで、できれば長方形の新しいキャンバスを作成します。タブを描くのに適しています。その後に切り替えます チャンネルタブ （Windows - > Channels）、クリック 新しいチャンネルを作成 右下に.

ステップ2

選択したチャンネルレイヤー上で、多角形なげなわツールで同様の形状を描きます。白色で塗りつぶします[#ffffff]。多角形領域の選択を解除します（任意のマーキーツールを選択して画面の1つをクリックします）。形を与える ガウスぼかし 半径6.0px.

ステップ3

CTRL-L 上の画像のように、Level Dialogを呼び出し、左右の矢印を押して中央の矢印に合わせます。この意志 “なめらか” あなたのぼやけた形を上にしてあなたに素敵な丸みを帯びた角の形を与えます.

ステップ4

チャンネルタブ, Ctrlキーを押しながら, クリック チャンネルのサムネイル アルファ1の新しい図形が選択されます。 レイヤータブ, 新しいレイヤーを作成 そして選択した領域を黒く塗りつぶします[＃000000].

ステップ5

ボットの左下と右下の角の丸い部分を取り除き、左に移動して上図のように配置します。次に黒い色のタブに注目します.

ステップ6

新しいレイヤーを作成してください。選択する 角丸長方形ツール （半径8px）、長方形を描き、この層を黒いタブ層の後ろに置きます。右クリックして選択 ブレンドオプション 以下の設定を挿入します.

影を落とす

• 不透明度：31％
• 距離：0ピクセル
• 普及率：0％
• サイズ：2px

ベベルとエンボス

• 深さ：100％
• サイズ：0px
• 柔らかくする：0px

グラデーションオーバーレイ

• カラーストップの設定はこちら.
• カラー：#aaaaaa、ロケーション：0％
• 色：#ffffff、位置100％

ステップ7

全体的なWeb 2.0の外観を見るためにテキストを入れてください。フォントサイズは32ptと25ptです。そして、あなたのタブは完成しました！タブの色の組み合わせで自由に遊んでみてください.

チュートリアルをダウンロードする