Posted on March 19th, 2008
Written by John and filed into the Basics, Brushes, Design, Web Layouts, Web Graphics, Effects category.
Lately I have been finding the Web 2.0 concept amusing so I decided to write a tutorial on how to make some buttons, which you can make into a cool menu. This tutorial is very straight forward and achieves some cool results in my opinion. Check out the tutorial and let me know what you think.
First I am just going to walk you through making the button in general, so start a new photoshop document and use a 300X300px canvas. This is bigger than what I need but I like plenty of room to work in.
After that make a new layer and grab your rounded rectangle shape tool:
Also set it to a radius of 15px on the top menu of your screen:
Then on your new layer draw your button shape using the color black. Mine looks like this:
We are going to add some blending options to your shape by right clicking on layer one and going to “blending options”:
Use these settings:
Stroke
Next Duplicate layer 1 by right clicking on my layer and click “duplicate layer”:
After duplicating the layer, it will be behind your other layer. Just move it out from behind it so you can see it and remove the stroke and add a gradient overlay with these settings:
Gradient Overlay
You should have something that looks similar to this:
Now move that layer back behind the other layer on the canvas. By using your arrow keys move it so it can be seen behind the top layer:
It is time to add our blue glow to the button. Grab your brush tool and pick a soft brush of 200px.
Next choose a blue color for the glow at least for this tutorial, but you can pick another color if you want. The blue I chose is #00C7FF.
With all that chosen start a new top layer and put your brush with the top about this far:
Then just click once and you should have the glow with some excess on the sides and bottom:
Now we will get rid of the excess by taking our rectangle marquee tool and deleting the sides, top, and bottom. After you delete the sides and bottom you will still have some excess at the bottom corners, so just zoom in with ctrl+ on a windows
keyboard and erase the excess.
I chose a 19px regular eraser to do this:
After erasing the corners you should have something similar to this:
So far I think it is starting to look pretty cool, what about you? There are still
a few more steps to make this look a lot better.
[…] barry@rustybrick.com (Barry Schwartz) wrote an interesting post today onHere’s a quick excerptLately I have been finding the Web 2.0 concept amusing so I decided to write a tutorial on how to make some buttons, which you can make into a cool menu. This tutorial is very straight forward and achieves some cool results in my … […]
Posted by Make a Sleek Web 2.0 Style Menu for Your Site | How to make a website on March 19th, 2008 at 2:13 pm
very good excellent post
Posted by Free Stuff on March 20th, 2008 at 6:36 am
Your tutorial is good, but there is an easier way to get rid of the excess blue after you brush it onto the rounded rectangle. If the blue is on a new layer, then you can simple ctrl/command-click on the thumbnail of the layer underneath it. This will select the layer’s contents (which in this case is the rounded rectangle), so you could just invert the selection and press delete. It will not select the layer effects (like stroke), only the contents of the layer.
Posted by Hongske on April 3rd, 2008 at 1:54 pm
thank you very much for this very good tutorial
i have tried it and i get amazing result …
thank you very very much
Misambee Jarir
Posted by Misambee Jarir on April 3rd, 2008 at 2:09 pm
Hongske thanks for the information! I will have to try that out.. sounds like a better way to do it for sure
Posted by John on April 3rd, 2008 at 4:26 pm
also thanks everyone for the comments
Posted by John on April 3rd, 2008 at 4:26 pm
hey i am not able to do that pen tool step……how to do the last step of pen tool….and make selection and delete….the step is not working for me….plz help
Posted by tarun on April 13th, 2008 at 12:35 am
You have to connect the line by clicking where I have the mouse in the screenshot.. after that you should have a solid line. Then you need to right click (with a windows computer) and the little menu should pop up like in the other screenshot…
Posted by John on April 18th, 2008 at 4:27 pm