Submit Your Article
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.
