Floral Website Buttons Video Tutorial in Photoshop

Video Tutorial

Download Source

First start by making a new document, I’ll be using a document size of 300 x 300 pixels. Now fill the background with a very dark grey, I used #282828.
Find and get out the Custom Shape Tool, then find the following shape:
Floral Website Buttons Video Tutorial in Photoshop

If that shape isn’t there, click the little arrow on the right then go to either All, or Nature, then you’ll be able to find it.
After you’ve got the shape out, change your foreground to black then draw a few shapes on a new layer. Lower the opacity for the flowers layer to 10-20%.
Floral Website Buttons Video Tutorial in Photoshop

Now you’ve made the background, let’s start on the buttons.
First start by getting out the Rounded Rectangle Tool, change the radius in the options to about 5 px.
Floral Website Buttons Video Tutorial in Photoshop

Reset your foreground color to white (Press D then X,) now draw a rounded rectangle on a new layer.
Floral Website Buttons Video Tutorial in Photoshop

Apply the following layer styles to your button layer:
Floral Website Buttons Video Tutorial in Photoshop
Floral Website Buttons Video Tutorial in Photoshop
Floral Website Buttons Video Tutorial in Photoshop

Your button will now look like this:
Floral Website Buttons Video Tutorial in Photoshop

Create a new layer then again get the Custom Shape Tool out. With the same shape, make a very small version down in the bottom left of the button. Be sure you’re on a new layer when making this shape.
Floral Website Buttons Video Tutorial in Photoshop

On another new layer create a much larger flower shape on the right.
Floral Website Buttons Video Tutorial in Photoshop

Hold ctrl then click the main button layer’s thumbnail, this will have made a selection around it.
Invert the selection by right-clicking the selection (with a selection tool out) and clicking Select Inverse. Press delete to remove the outside of the flower.
Floral Website Buttons Video Tutorial in Photoshop

Change the layer mode for this layer to Soft Light and lower the opacity to about 50-70%.
Floral Website Buttons Video Tutorial in Photoshop

Lastly you have to add text to the button.
Floral Website Buttons Video Tutorial in Photoshop

The font I used above is called Tahoma, I used a size of 12 pt, and a color of #ffffff.
After writing out your text, add the following layer styles:
Floral Website Buttons Video Tutorial in Photoshop
Floral Website Buttons Video Tutorial in Photoshop

Your text should now look like this:
Layer Styles Added
Lastly, duplicate the button layers, change text, etc.
Thanks for reading, we hope you enjoyed the tutorial.
Floral Website Buttons Video Tutorial in Photoshop

Via : Floral Website Buttons

Download

Download Source Files

You must be logged-in to download. Register Now or Login
mrclos made a comment on 12 Mar 2010

try

706
Join The Disscussion

Glossy Button Effects Video Tutorial in Photoshop

Subscribe

RSS Subscribe

Spread A Word

delicious digg technorati stumble lifesaver myspace reddit linkedin live yahoo google

Tags