<参照>を ホーム / すべてボタンチュートリアル /ブログ記事:RIATMP1030-Photoshopのボタンとバナーのチュートリアル

RIATMP1030-Photoshopのボタンとバナーのチュートリアル

2009年5月12日
Button and banner tutorial in photoshop
Photoshopでボタンとバナーのチュートリアル

これはPhotoshopの事前知識の有無に関わらずほとんどの人用に作成された非常にシンプルなチュートリアルです。 私は5分でそれを行うためのステップバイステップガイドラインを持っています。 大きい見るには画像をクリックしてください。

Click here to download

ここで手順は次のとおりです。

ステップ1:860px/ 185ピクセル (ファイル- >新規)の新しいファイルを作成します。

ステップ2:レイヤーのウィンドウが開いていることを確認するとレイヤーウィンドウの右下にある新規レイヤーアイコンを作成]をクリックして新しいレイヤーを追加します。 この新しいレイヤー名"背景"を与える。

ステップ3: 幅が855pxで高さが175pxです。15px、角が丸い長方形について作成し、 色#609590で塗りつぶします。 あなたのページには、このようにする必要があります。

Photoshop button and banner tutorial
Photoshopのボタンとバナーのチュートリアル

ステップ4:選択してレイヤースタイル (この層のウィンドウの左下にあるアイコン) - >ベベルとエンボス 、以下の図に示すように、設定に従ってください。

button tutorial in photoshop, bevel effect
Photoshopのボタンチュートリアル、ベベル効果
ステップ5:新しいレイヤーを追加し、 幅が845pxで高さが40pxであるシリンダーのような選択を作成し、そして上から10pxの左から10pxの 透明に白(#FFFFFF)から始まるグラデーションカラー塗りつぶし、それは上部にハイライトを作成する必要があります。 下の画像を見て、あなたのイメージは次のようになります。

Button tutorial in photoshop
Photoshopのボタンチュートリアル
Button and banner tutorial in photoshop
Photoshopでボタンとバナーのチュートリアル

ステップ6:830pxとheight:; - 、以下の図に示すように、設定に従い、次のSELECT '>ベベルとエンボスレイヤースタイル"あなたのボタンの40px色#eaeaeaで埋める新しい層は、シリンダのような選択を作成し追加します。

Photoshop button and banner tutorial
Photoshopのボタンとバナーのチュートリアル

ステップ7:新規レイヤーを追加し、シリンダーのような選択を作成します:810pxと高さを:25ピクセルで作成したボタンの上に透明に白(#FFFFFF)から始まるグラデーション色で塗りつぶして、それが上部にハイライトを作成する必要があります。 下の画像を見て、あなたのイメージは次のようになります。

Photoshop button and banner tutorial
Photoshopのボタンとバナーのチュートリアル

ステップ8:あなたのメニュー構造に望ましいと薄い1画素の縦線で区切られたテキストを入力します。 また、上部に会社のロゴやテキストを配置することができます。 一度あなたのイメージは次のようになり、すべてのテキストを持っています。

このチュートリアルでは便利では? あなたは私のためにコーヒーを購入することができ、ここで支払うことができます !乾杯 :)

pixel RIATMP1030  Photoshop button and banner tutorial

Photoshop button and banner tutorial
Photoshopのボタンとバナーのチュートリアル

共有し、楽しみなさい
  •  RIATMP1030  Photoshop button and banner tutorial favicons?domain=digg RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.dzone RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.facebook RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.google RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.linkedin RIATMP1030  Photoshop button and banner tutorial favicons?domain=favorites.live RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.mixx RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.myspace RIATMP1030  Photoshop button and banner tutorial  RIATMP1030  Photoshop button and banner tutorial favicons?domain=reddit RIATMP1030  Photoshop button and banner tutorial favicons?domain=www.stumbleupon RIATMP1030  Photoshop button and banner tutorial favicons?domain=technorati RIATMP1030  Photoshop button and banner tutorial favicons?domain=twitter RIATMP1030  Photoshop button and banner tutorial favicons?domain=buzz.yahoo RIATMP1030  Photoshop button and banner tutorial
応答を残しなさい 12423ビュー、10これまでのところ、今日|

コメントはクローズされます。