Creating Website Buttons Using Photoshop
Posted on 10. Jun, 2008 by Web Design in Photoshop
Designing Website Buttons in Adobe Photoshop
Heres what the buttons will look like:
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:
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%.
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.
Reset your foreground color to white (Press D then X,) now draw a rounded rectangle on a new layer.
Apply the following layer styles to your button layer:
Your button will now look like this:
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.
On another new layer create a much larger flower shape on the right.
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.
Change the layer mode for this layer to Soft Light and lower the opacity to about 50-70%.
4.
Lastly you have to add text to the button.
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:
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.
8 Responses to “Creating Website Buttons Using Photoshop”
Leave a Reply
Loading ...
Nick Throlson
12. Jun, 2008
Great tips gotta get my photoshop installed now gonna work on some graphics ~Nick~
Basant Sain
16. Jun, 2008
Really it was a great job. I appreciate you sir, its helps everbody.
Thanks
Basant Sain
16. Jun, 2008
I want one thing that all your tutorial made in PDF format please.
Thanks
puteri
19. Jun, 2008
this tutorial really helps me..thanks ^________^
Raul A. Villanueva
07. Sep, 2008
Thank you so much for help……
Jonah Rodriques
15. Mar, 2009
Hi nice post, i have come across your site once before when searching for something so i was just wondering something. I love your theme, would it happen to be a free one i can download, or is it a custom one you had made? In a few weeks i will be launching my own site, i’m not great with designs but i really like the style of your site so it would be cool if i could find (or pay for) something with a similar look.
Thanks!
saurabh agnihotri
07. Dec, 2009
the tutorials gr8….
just one quick question…. can we go for some other non conventional shapes for buttons using the photoshop…like “the arrow shaped buttons” for instance….i know an arrow shaped button is a weird idea, but still if u can explain how to do that…..
Jonna Eiser
09. Apr, 2010
I and my students have been having a great deal of difficulty making the part of the flower outside the button disappear. I have tried numerous ways to get this to work, and either the button, the entire flower, or other layers get deleted.
Can you please tell me what I am doing wrong??
Thanks so very much.
We are using pc’s with photoshop CS3, but I have also tried it using a mac with cs3.