This tutorial is to help you learn to make 3d navigation buttons that you use to navigate to sub pages on your website, obviously, in an easier way; images that people click to go to another page. I did not come up with the idea of 3d styled navigation buttons but I did teach myself how to make them. Here goes.
Step 01. First off, create a new image with the dimentions of 100x100 pixels and with a transparent background. Zoom in on your image to 500%, this will help you see clearer what you are doing.
Step 02. Click on the Ellipse Tool or either click 'q' on your keypad and then hold down shift and left click your mouse and drag it the oppisite direction untill it reaches the size of however big you want your button. Then, obviously, let go. Before letting go it should look like this:
Step 03. You should now see your circle filled with the second colour in your Materials pallette, and an outline around it the colour of the first colour in your Materials pallette. To change these, click on the Pick Tool or just press 'k' on your keypad. Double click on your circle and then a box should appear named 'Vector Property'. For the stroke colour, you need to create a new gradient (white - grey) with the style 'Sunburst' like this:
Step 04. Then you need to change the Fill colour to another gradient that's a dark colour fading into a light colour with the style set to 'Sunburst' again. Make sure that the darker colour is on the outside and the light colour on the inside. Like this:
Step 05. You now need to change the stroke width to 6.00 and make sure the Line Style is set to +Solid and that both Visible and Anit-alias are ticked boxes. You can now press OK on the Vextor Property box and your button should now look like this:
Step 06. Now what you need to do is right click the button Layers in your layer pallette and click 'Convert to Raster Layer'. After you've done that, we need to get the shine that makes your button look 3d. To do this you need to first, make a new Raster layer (Layers > New Raster Layer). Now you need to click the Selection Tool or just click 's' on your keypad and change your settings untill they are as follows:
Step 07. Next step is to click on what you think is the center of your button (the gradient might help with this), don't worry it doesn't have to be the exact center, and then drag your mouse down untill it's leaving a nice 5-6px border of the button, like this:
Step 08. You now need to click the Flood Fill Tool or just type 'f' on your keypad. Change your first colour iny our materials pallette to a colour lighter than the lightest colour in your gradient, and click on in the selected circle once, and then right click it to make the selection border disapear. Your button should now look like this:
Step 09. Now what you need to do is create another circle with the Selection Tool (S) making the circle selection top in the middle of the light coloured circle we have just made in Step 08. Press the button 'delete' on your keypad once to get rid of half the light coloured circle. It should now look like this:
Step 10. Right click on your button to make the selection border disapear, again. Now we need to round the edges on this half light coloured circle. To do so you need to click on the Freehand Selection which you can find when you click the arrow next to Selection Tool (S). It should have a small icon of a rope next to it. Change you settings to these:
Step 11.After you've changed your settings, you need to select the corners of the 'half light coloured circle' like so, and then press delete and right click:
You should now be done with your button! All you need to do is now, add text if you want, and add a drop down shadow effect to make the text look nice! Then just copy your button (After merging all layers to invisible) and paste it on your layout! Here's the finished result:
