I’ve seen that I haven’t posted any tutorials for a while so I decided to create a new one. In this tutorial we will be making buttons again, but unlike in the last one, these are going to be much smaller and easier to make. You can use them for arrows or some small things (like submit, send etc.).
I know that you’re dieing to see how they will look in the end, so this is how:
Ok, so let’s get going. First create a new document any size you want (I’ve used 180×80) and fill it up with #212121.
Create a new layer and using your “Rectangular Marque Tool” (
) make a selection which is going to be your button. Now go to Select>Modify>Smooth, set it to 3 px and press OK.
Now you can fill it up wih any color you want using the “Paint Bucket Tool” (
). I’ve used #b00000 and this is what I came up with:
Doesn’t look so good, ehm? So what are you waiting for, let’s add some blending options. Right click on the layer and select “Blending Options”. Add the following than:
You should be having something like this:
Let’s add some text. Select your “Horizontal Type Tool” (
) and add some text with the color #ffffff. I’ve used the font “Arial Narrow”, Regular, with size of 13 px and Sharp. You can use any size you want, it depends on the size of your button.
Doesn’t look so sharp, right? Let’s add some “Drop Shadow”. Again right click on your layer in the “Layers Panel” and press “Bledning Options”. Add the following:
And this is what we got than:
Well believe it or not, we’re done! You can now create buttons with any color you want just by changing the color of your first layer. Here’s an examples:
If you want to download the source files, you can do it from the link bellow:
I hope you liked the tutorial. Feel free to e-mail me with any questions you might have (my e-mail is btw admin@coregfx.org). You can use these buttons in your designs or anywhere else. Please leave a comment with your thoughts about this tutorial.
This tutorial has been sponsored by:
April 14th, 2009 at 6:32 pm
Those look great! I also suggest using a bevel / emboss to make it “pop” out even a bit more. nice and clean looking though for sure.
April 16th, 2009 at 8:28 am
Great tutorial….
these are nice looking buttons, really…
Dude, your images are flowing out of the left column, in 1280 resolution also..
try to fix it…
Thanks…
April 16th, 2009 at 10:27 am
It is now fixed. That happened because we have changed the theme which has a smaller column.
April 25th, 2009 at 9:45 pm
Nice tutorial. I will translate it into my language and post on my website soon!
I’ve added some details: http://www.obiekt.eurolol.pl/wp-content/uploads/2009/04/news_image11.png
May 1st, 2009 at 12:38 pm
Wow good great this is great tutorial, very simple guide to make a button..
May 3rd, 2009 at 6:48 am
Really attractive and professional looking result> I am thinking of using this tutorial when I next use my dvd authoring software as the pre installed navigation buttons are very cheap looking in comparison
May 9th, 2009 at 1:48 pm
i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..
June 17th, 2009 at 5:16 pm
Neglected to mention that the actual button would not be seperate from background (#212121 and 180×80px) when saved, which created extra steps…
Other than that, good clean looking buttons. Easy to.
June 24th, 2009 at 2:33 pm
hey
i cant make orange button, becouse it looks yellow
i want to add color based on #FF9506
any suggestions?
June 24th, 2009 at 3:59 pm
I’m always creating buttons for web, and try to make them as interesting as possible, as I don’t want each web page to look the same. I do think that these are quite a nice effect.
July 20th, 2009 at 2:06 pm
very good, although only use one layer.
August 17th, 2009 at 11:40 pm
Thanks for the mention, it?s a cool list
August 19th, 2009 at 12:02 pm
Great tutorial and simple to follow. The buttons look really nice and I will have to use these techniques for my next set of buttons. Thanks.
September 3rd, 2009 at 9:31 am
Great tutorial and simple to follow. The buttons look really nice and I will have to use these techniques for my next set of buttons. Thanks.;…
September 4th, 2009 at 11:44 pm
This is the first tutorial that made complete sense and i managed to achieve the exact same look you did, thanks so much. I’ll certainly look for your other posts
October 10th, 2009 at 12:31 pm
Awesome tutorial, Thanks for sharing this nice and simple tutorial.
October 15th, 2009 at 8:27 am
Nice little tutorial, thanks! My tip is to add a little outer glow around the text (of a shade darker than the button) to make it look like the text is indented
Keep it up!
December 3rd, 2009 at 3:31 pm
Thanks! I will recommend this to all my friends.