Basic Rounded Navigation Bar
Submitted by carlosp120 on Thu, 09/20/2007 - 07:46.
In this tutorial i will create a Navigation bar with round corners.
1. Create a new Document 648 x 115 px.
2. Go to Layer > New Layer, and Click OK
3. Now with the Marquee Square tool (R) make a rectangle like this:
4. Go to Select > Rounded Rectangle .. Radius 30%. Click OK
5. With the Fill tool (Shift + B) . Paint the selection White.
6. Now go to Layer > New Layer .. OK
7. Go to Select > Shrink > 3 .. OK
8. Change the Foreground color to: #F0B259 and the Background to: #F87811.
9. With the Gradient Tool (L) Drag it from the top to the bottom of the selection. Go to Select > None. It should look like:
10. Now to Select the 1st layer. the one with the white rectangle. Go to Script - Fu > Shadow > Drop-Shadow. Select:
Click OK. You should have:
11. With the Text Tool (T). Create a new Layer, and type: Home. Click OK
Change your settings to.
Font > Verdana, Size > 25, Color > White:
Looks like:
12. Create a New Layer (Layer > New Layer > OK)
13. Create a 2 Pixel Line like this:
14. Change your color to White, and with the Fill tool (shift +b) Paint on the line:
15. Adjust the opacity of the line to 17.
16. Duplicate the lines and space them out between each button then finaly add your text.
thats it your done :)
- 23344 reads
Nice post
Submitted by El Llama on Tue, 09/25/2007 - 23:46.Great post, nice job!!!!
ellamasblog.blogspot.com
El Llama
I try to you.
Submitted by Visitor on Fri, 11/02/2007 - 08:59.Nice to get started
Submitted by Visitor on Fri, 11/09/2007 - 13:57.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.
Nice to get started
Submitted by Visitor on Fri, 11/09/2007 - 13:58.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.
Nice to get started
Submitted by Visitor on Fri, 11/09/2007 - 16:44.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.
Pretty, but...
Submitted by Visitor on Fri, 11/09/2007 - 23:26.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?
Re: Rounded Navigation Bar
Submitted by Gimper on Sun, 11/11/2007 - 15:22.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
Re: Pretty, but...
Submitted by Visitor on Tue, 12/04/2007 - 01:56.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.
Re: Rounded Navigation Bar
Submitted by Visitor on Mon, 12/17/2007 - 22:01.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! ^-^
Re: Rounded Navigation Bar
Submitted by Lool (not verified) on Fri, 03/07/2008 - 20:34.I got lost at step 10...help anybody? : (
construction
Submitted by Evaluari imobiliare (not verified) on Mon, 03/10/2008 - 16:21.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.
Re: Basic Rounded Navigation Bar
Submitted by eğlence (not verified) on Fri, 05/09/2008 - 16:55.thank you
@ Lool If you are using
Submitted by kdawg (not verified) on Fri, 06/13/2008 - 18:32.@ Lool
If you are using gimp 2.4.... drop shadow is located under Filters>Light and Shadow>Drop Shadow.
Post new comment