[tutorial] Navigation Buttons tutorial about making cool navigation buttons for your site

[Baniboy 3]

Navigation buttons give a nice, detailed look to your website. So, unless you're doing a website with a very simple template, it might be a good idea to read this article. Picking the right colors and shapes is essential, you can find out which colors fit your website simply by trying them out. In this tutorial, you'll learn to give that nice look to your buttons, probably the same look that some glossy buttons have. You can do this all simply by some gradients, bucket fill tool and round rectangle function. Requirements: GIMP, and some knowledge about how to use it. 1. Let's start by making a new image with white background, this example will be 150 x 40. 2. Pick a dark color, this will have to fit with your websites color palette. In this example it will be dark blue. Now fill the whole image with that color like this: 2. Now go pick a much lighter color and use it as foreground color, then pick a slightly lighter color than the one you already picked for the foreground color and use it as background color. 3. Create a new image with half the height of the last one, then draw a gradient "foreground to background" from bottom to top. Copy paste this image to the top of the image you filled with a dark color, now it should look something like this: 4. Merge all visible layers. "Select -> all" (or something similar, I don't know, I'm using the Finnish version of GIMP ). Now "select -> round rectangle (or something similar)", put the value of rounding to 50 if it already isn't. 5. You should now see a selection which has round corners. Copy paste this selection to a new image with a transparent background. 6. So, you have the button shape, it should look something like this: 7. Now you need the edge, select all content(not the transparent area tho) and then "select -> border". Enable anti-aliasing and tune the border width to 2-3 px. Press OK and now you should see the border selected. 8. Pick BLACK as your foreground color and choose gradient "FG to Transparent", you should still have the border selected. Choose the mode "soft light" and opacity 40 % for the gradient tool. Now use that gradient to make button's side/sides to be darker. simply start from where you want the dark spot to be and drag to the lighter spot. If it's too dark, simply tune down the opacity. You can also use the exact opposite for the other side/sides, from white to Transparent gradient! At the end, save the image as a gif/png Here's how the ready button COULD look: (notice also that it's good to have a font color that has high contrast depending on the image, for example if you use blue, don't use blue font too! Maybe light blue... ) You can also make the button all ONE gradient, but that won't look like this one. But remember to make nice 3D-like borders, shadows look nice too! This tutorials applies to all kinds of color palettes, so you'll just have to find the right colours, merge them and make your own button. If you want buttons that change styles when your mouse hovers around them, I suggest that you only change the color of the font on hover AND you can also make the shadows on the borders to change to the exact opposite place. You can achieve that by making the borders on their own layer, and then mirror them in vertical and horisontal positions, then save them as hovered images. Also another nice trick is to leave all those hover tricks and just use this: EXTRA: open the ready button, then choose filters -> artistic -> softglow. Tune the glow to full, press OK and save the file! Here's another example about ONE gradient button, it's hsv clockwise gradient from a blue color with the border trick: Hope I helped!

Edited April 26, 2009 by Baniboy (see edit history)

[TheGuner 0]

Yeh it helped me.Thanks for sharing...Can you make buttons with lighting??Thanks,

[Baniboy 3]

Yeh it helped me.
Thanks for sharing...

Can you make buttons with lighting??

Thanks,

Of course you can, but it'll look stupid when you have the buttons in a row and they all have the same image with the same lightning on them.
Anyway, here's how to do it regardless of the looks:

Search for a lighting image and import it to the image the way you like it.

Do the border-trick and you should be fine.