Floral Website Buttons
I'll be showing you how to make some cute, pink buttons that would suit a flower-selling website.
Category: Photoshop
Views: 32803

Floral Website Buttons I'll be showing you how to make some cute, pink buttons that would suit a flower-selling website.
Photoshop Tutorial Result Image

1.

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:
Custom Shape Tool and Shape
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%.
Shapes on Background

2.

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.
Rounded Rectangle Tool
Reset your foreground color to white (Press D then X,) now draw a rounded rectangle on a new layer.
Rounded Rectangle
Apply the following layer styles to your button layer: Your button will now look like this:
After Applying Layer Styles

3.

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.
Small Flower Shape
On another new layer create a much larger flower shape on the right.
Larger Flower Shape
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.
Removed Outer
Change the layer mode for this layer to Soft Light and lower the opacity to about 50-70%.
Layer Mode and Opacity Change

4.

Lastly you have to add text to the button.
Text Added
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: 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. If you need to, you can download the PSD file from here.
Photoshop Tutorial Result Image

If you would like more help with this tutorial please register and visit the forum.

About Michael

Michael Dunlop Michael Dunlop personal statement

“But I am already older than 21”, I hear you cry. Don’t worry, despite the name, the information and advice is more geared towards retiring prior to having a fake hip installed.

Website Sponsors
Get Retire at 21's FREE Secrets

Get Retire at 21's FREE Secrets

Find out how I'm going to Retire VERY Early Subscribe for my Free Secrets Privacy Guaranteed. 100% Spam free.

Join The Forum
Recommended Websites
Credit card processing made easy! Same day approvals, no application fee, free setup, 24/7 customer support, free equipment, and more. Cardaccept is the clear choice.
Create stuning Flash websites at Wix.com, Seo Friendly, Drag & Drop builder.
How do you go from making $25,000.00 a year to $25,000.00 a month? Auto-Pilot residual system - step by step formula for creating a truly automated income on-line.
 
Advertise Here
Feature Interviews
Ryan Deiss is a self-made Internet ... Read more
Interview with Yaro Starak of Entrepreneurs-Journey.com is ... Read more
Darren Rowse is perhaps the most famous ... Read more
This is an awesome interview. I ... Read more
Recommended Resources