Basic Rounded Navigation Bar

Great post, nice job!!!! 

ellamasblog.blogspot.com 

El Llama

I have been puttin off the gimp-learning thing for ages, and little things like this just show you a lot of tiny little useful stuff you'll be using all day long when working with a certain tool. Thanks for taking your time to do this.

I have been puttin off the gimp-learning thing for ages, and little things like this just show you a lot of tiny little useful stuff you'll be using all day long when working with a certain tool. Thanks for taking your time to do this.

I have been puttin off the gimp-learning thing for ages, and little things like this just show you a lot of tiny little useful stuff you'll be using all day long when working with a certain tool. Thanks for taking your time to do this.

Thanks for the tutorial on image creation. It was helpful.

Some questions, though: how is this header bar supposed to be linkable to the different locations if they are all one image? Shouldn't you create several different images with different text and then place them side-by-side, so you know what is being clicked?

well it dosent realy matter because one you fully design the nav you flaten all the layers the slice it up any way you want, slicing it up as in cutting sections of the images then putting them together with html or css, hope that helped just abit

You could always divide it up into "image slices" and link those individually, or use what's called an image-map.  An image-map defines certain areas of an image to be used as links using coordinate points.

yes it is a good tutorial...i'm working in a project to design my web...
learning HTML code!
and your method to make it easy but attractive was very useful :)
maybe i can help as you to me!
visit my blog at: http://starslight.wordpress.com
sorry me...my original language is spanish
i'm from Argentina
i hope to publish a english version soon
hope i can do it with my new website
it is in construction
thank you! ^-^

I got lost at step 10...help anybody? : (

Since it usually appears on all or at least on several pages of a website it is one of the key design-elements of websites -- as well in terms of usability as for the visual attraction.

thank you

@ Lool

If you are using gimp 2.4.... drop shadow is located under Filters>Light and Shadow>Drop Shadow.

Heyy um I have gimp and everything was going fine but then you know how when you open GIMP and 2 things pop up?! Well, I closed it once, and I opened it up and only the one with the tools on it opened. Can you please help me?!

Hi. you can get the default interface back by going to file>Preference>interface then hit the reset button.

hope that helps.

I Like it.. But if you dont want the annoying background here is how you get rid of it. If the nav. bar is in a new layer, press ctrl+l. The layers dialog will appear. Click on the backgound layer and turn the opacity to zero. If it is on the same layer and the selection is still on. go to layers thing at top of pictuure. go to transparancy. then add alpha chanel. then go to select and press invert. then right click and go to edit then cut.

not if you use a image map in your html code

It's a good tute... but if your website doesn't have fixed width you're better off using the end bits of the image as left and right background images, then repeat-x a css background image of a vertical slice of the toolbar as designed. That way both the bar and the text elements will re-size to the container div.

I always feel that fixed-width columns are a bit unfair on those who have large screens and/or high resolution resolutions: I hate it when the whole site is squished over to the left hand side to account for the fact that the website designer has sought to cater to people who have 17" @ 1024x768 or lower. On a good-sized screen there is half an acre of empty pace ot to the right.

Maybe folks will have a workaround for this - different menu bars that laod depending on a client-side resolution check, perhaps.

Cheers

GT

Nice work, Im gonna try this!

I have been puttin off the gimp-learning thing for ages, and little things like this just show you a lot of tiny little useful stuff you'll be using all day long when working with a certain tool. Thanks for taking your time to do this

Perfect tutorial for beginners! :)

Great tute, thanks very much :)

Great tutorial thanks a lot.

However how do you get the text to be aligned right in the middle.
I can't do that.
Thanks for your help

Heyy um I have gimp and everything was going fine but then you know how when you open GIMP and 2 things pop up?! muhabbet Well, I closed it once, and I opened it up and only the one with the tools on it opened. Can you please help me?!
mIRC

How do you select a layer, like on step 10?

Okay, 'Script-Fu' doesn't even work...

Awesome Tut!
Man, I'm gonna try this! I coukd actually use this for the site I'm currently workin on! Thanks!

OUT OF SUBJECT:
Hey Gimper. Your tutorials are the best ever! Thanks for them! Cheers!

Great tutorial, thanks.

Step 10 missing: grow selection by 3 pixels, just before the drop shadow.

Excelent. Simple and very nice!

Thanks for the lesson. Just thinking how to do it best. Simple naisano. Thanks to the author.