All Blog
Vista Styled Button

Step 1

Like usual we are going to start off with filling the background with
a radial gradient from a light grey to a darker grey. Light grey:
#3e3d3d. Dark grey: #151515.

Step 2

Create a new layer (Layer > New > Layer) and using the rounded
rectangle tool make a fixed shape of 300 by 50 pixels in the middle of
the document.

Right click the shape and click make selection.

Select the gradient tool and set the style to reflected gradient. Set
the foreground colour to #1c3f47 and the background colour to #2a6976.
Left click in the middle of the selection and drag to the bottom of the
selection and release. This will provide us with the base of the button.

Step 3

Now we are going to be adding some layer styles to our button to make
it vista styled.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Now your button should be looking like this.

Step 4

Now we are going to be adding a reflection to our button. On a new
layer select the area of your base layer (ctrl + click layer) and fill
the selection with white (#ffffff).

With the rectangular marquee tool selected move it down below the

Go Edit > Transform > Perspective and drag the bottom right box
towards the right while holding down the shift key (this pulls the
other side out too so it keeps it even).

Add a layer mask and add a gradient from white to black within the
reflection – this will fade it out.

Set the blend mode of the layer to Soft Light and lower the opacity
to 15%.

Step 5

Last of all we are going to be adding some text. Choose a nice crisp
and clean font for this.


Create Date : 28 เมษายน 2553
Last Update : 28 เมษายน 2553 17:24:21 น.
Counter : 524 Pageviews.

ชื่อ : * blog นี้ comment ได้เฉพาะ VIP Friend
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet

Location :

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 Rss Feed
 ผู้ติดตามบล็อก : 3 คน [?]