Vista Button

hey dude, really nice tut, the final result is awesome .

=)

How do you make the code?

hey dude, u can go to:  this site, now just create the imegs on gimp and than replace them w/ that, edit the text color, and u have them ready, and fast and with rollover.
hope it helps.

As a complete beginner with GIMP, please advise on how to download the Tutorials.

sincere thanks

AlanW 

Really nice ;)

So to avoid having that silly bit at the bottom all I have to do is miss out the 1px gradient at the bottom?

Really nice tutorial!

What is the font name/size you use for yur Vista buttons? I keep trying with different fonts and it always looks wrong.

Really good work !!!

aha, real good

Really good tutorial.

 I had made similar buttons for web menus and Iwould like to add something.

You can use easily duplicate #424242 layer

change this color to a lighter blue (f.e. #88bbdd) and use 3.png when mouse click.

PS: I don't know Js but in a css you'll need to put like that:

.nav a:active {

                    background: url('3.png');

                   } 

 Hope to contribute.

tkanks :) :)

Nice tut man! 

ellamasblog.blogspot.com

El Llama

Hi Gimper

Congratulations it's a very nice tutorial.

I want to translate in my web. can I do this?

 Thanks... 

Can someone email me a empty button. i cant make this :( I do it wrong. its then ufly.Can someone mail me a emty button . No text ;)?

Please masil it at patrick@breaky.eu

members now can download the XCF gimp source file under the tutorial you will see "attachment"

Llego hasta el paso 7 nada mas, alguien me prodria decir como se hace el paso 8.

anyone care to transliterate? :D

I put it in a translator and got this:
I arrive until step 7 nothing but, somebody prodria to say to me since step 8 becomes.
dunno what the last part means... :\

This is a great tut btw.
I might make a navbar for a website with it if I can figure out the rollover thing.

I only got up to step 7, could somebody please tell me how to do step 8?

Yeah... I'm from Venezuela.

What is the text and I don't see the xcf download link anywhere...

This is an excellent tutorial, Gimper! I'm a newbie to Gimp, and am now addicted to it. I can't find enough tutorials to do now ... I've done them all from here!

Anyway, please continue doing what you do. You are very good at it and I appreciate the time you spend doing these for us! Merry Christmas!

....to be continued....

cool heps a lott@!

Ah this is great. I used it on my companies web. I am not a very creative person. It is great to have those more skilled to show us how to do great things!
http://www.christi.ath.cx/pics/buttonstatic.jpg
http://www.christi.ath.cx/pics/buttonstatic.xcf

nice work :)

This is awesome! Thanks a lot.

Hi, this is a very good tutorial. I love it. Keep up the good work ;). Cheers!

Hi Gimper, it is excellent. I made a GIMP script which more or less follow this tutorial, but I'm using Web2.0 Styles instead of manual gradient. Since you are the author of the tutorial, I'd like to have your permission to publish that script (to deviantart and some gimp script pages). In first version it can do only black buttons with highlight of any color you choose. I have a plan to add support for every Gloss gradient).

url: http://gmouse.deviantart.com/art/Vista-Button-GIMP-Script-77335405
enjoy!

Just a small comment:

I think that, for the rollover effect, an image map should be set up. Then , an area could be set up that covers the button, but not the reflection. Then, after assigning the rollover JS function to the specific area, the button would light only when the button itself was moused over.

Thanks for the tutorial,
stalepretzel

here is how you use them if you put text in the image:
HTML:
[code]
&nbsp:
[/code]
Css:
[code]
.button1 {
background: url("image1.jpg");
}
.button1:hover: {
background: url("image1hover.jpg");
}
[/code]
and change the number for every link.

God this tutorial is hard

but coooool !

I found adding the blue color very hard, would you please explain it ? because doing the blend from top to bottom wont give that effect ?§?§

thank you very much,
Zydoon.

Hmm... I get too select. I subtract from selection, but everytime I go to the blend tool, the selection disappears, and the gradient won't work right (Steps 7 and 8).

Could you please inform me how to do the step 4?.
I have tried, but I don't know how to apply it from bottom to top?.

all there is to it, is that you draw a rectangle selection on a transparent layer, then apply the gradient you made using the blend tool inside of the selection.

please use the forum help section ( i'll help you there) for detailed help like this, thanks

Why do all technical computer people have to have God-awful writing skills? It's nearly impossible to follow this moron's tutorial.

yes i know my writing is awful but i don't see you doing better with your great English, you should learn to appreciate peoples effort.

Hi Gimper,

I certainly enjoyed your tutorial, if that person couldn't understand it because of your so called "God-Awful writing" then they most likely have the IQ of a soap-dish anyway.

Just wanted to say thanks for the tutorial, much appreciated.

Regards,

Drew

thanks :)

Gimper, can you please attach a xcf file with the rollover effect button (and the same size as the previous one )?
ive tried getting it from the rollover i action but i failed
it wont let me remove the text.

i tried doing it my self
but im a beginner at gimp
and i messed up.

please reply if you can or cannot, thanks.

the xcf file is attached below the tutorial.

yes, but
im asking for an xcf file with the blue gradient
for step 11

sorry i no longer have the gimp xcf file. its very easy, you should give it a go.

sigh,
the only reason im asking is because i cant seem to get it.
could you perhaps make another one that is the same size?
im trying to use the buttons fo a template
and i really think the rollover would help

"Change your foreground color to 424242 and fill the outline layer then finally place the layer behind the "vista button" layer."

Can someone clearly explain this sentence please?

Can't you rewrite the tutorial in normal english? I can't follow it... And it would be nice if you would tell where you can find the tools you use.

most of my tutorials are for people who know the basics of GIMP, you might want to try some of the beginners tutorials at gimp.org

btw i can tell Beam and Bart are the same people so stop spamming please.

you might want to try the forum and ask for help.

Yes... There are two ways to do so... Follow the instructions [url="http://www.cssdrive.com/index.php/examples/exampleitem/cssdrive_horizontal_menu_buttons/"]here[/url] or find a Javascript Tuorial on how to do this. I reccommend following the link above, because you can simple add things to your CSS and HTML and your done... Doing it in Javascript can take a long time in my experience.

Fr3dy
is right
using css is way better

so gimper
can you add the attachment
with the blue gradient?

if you cant just say so

thanks

and i dont think beam and bart are spamming

Thanks for the tutorial. I had some trouble with it, but I am also very new.

For the people who complained about it so rudely: Gimper does not owe you anything. He has taken time out of his life to post this in the first place. That is like complaining about free television.

How do i add the blue part in the last photo?.....

Like when someone hover overs it it goes to the blue one....

same way you do step 11 but instead use blue.

I completed the tutorial to the letter and got the effect almost the same. Good tutorial, you are good at explaining things, some people just can't seem to produce coherant instructions. One point though, what the heck is the blend tool? I always call it the gradient tool.

Great tutorial! What font you used?

Thanks for the comment Dan, I also call it the gradient tool but GIMP's tooltip says "blend tool" so I went with that.

@visitor sorry i can't remember which font it was.

Thank you very much for this useful article. I like this site.

Anybody have a pre made version I can use because this tutorial is wearing me out I feel... I'm finding some of it to be quite difficult... especially the selection part and making an outline along with the new layer.

You can download the source xcf under "Attachment" below the tutorial.

Thanks.. I really appreciate you taking the time to do that...

Segoe UI Is the font i found it in the .xcf download file :)

The button is great but..... I can't get beyond step 7. Could you provide more detailed steps? I also can;t find the xcf file referred to "at the bottom of the tutorial".

thegman

Here is the url to the xcf source file.. http://gimp-tutorials.net/files/vistabutton.xcf
With the new redesign of the site attachments are only visible to members..

I'm not sure what help you need in step 7, all you have to do is draw a rectangle selection inside the button area leaving 1px of the bottom around your selection then continue on to the other steps.. if you need more help try the forums where other users can help you out better..

aaaw i thought this was a script that could be run in Gimp just like the default Button ones :(

I love the tutorial!! I am rather new to GIMP, but found this rather easy overall! Here is a link to my site which I am using the buttons I created using the tutorial.

http://www.cwdesigns.co.cc

I hope you like the site!

Nice work xaakx . It's always nice to see people making use of these tutorial :)

great tut but step 8 is not working for me i have gimp 2.6 and its not lettin me subtract it

@Bandon, there isn't any difference between 2.4 and 2.6 in the way you subtract from selections. could you be more specific about what your having trouble with it?

Thanks

Step 8 was a problem for me since the layer I created did not automatically move to the front so the border was covered up. Once I moved it up to the from I could see it easily. Thanks for the great tutorial!

Your welcome :)

Crappy tutorial, step 8 doesn't work. This tool does not work, and control does nothing. Is this using an old Gimp?

Just wanted to say thank you for this tutorial. It opened my eyes to the simplicity of gimp and making attractive looking designs. I took the tutorial and was able to make orange, blue, and standard black/gray buttons of different shapes and sizes. This is the kind of thorough tutorial that makes non-designers lives easier! Great Job!

Once the website I'm using the buttons on is live, I'll post it (hoping for this January!)

Your welcome. I'll be interested in seeing it live on the site :)

I'm glad I have photoshop, makes this a 3 click process.

Hmm, I'll try this in the morning.

How do you add the images to a web page so that there is no gap between them?

Do V 2.4 and V 2.6.4 have so much differences?
When I'm making the radial shape and then want to make it blue, it looks totally different from yours...

You should explain how to color the shape for the rollover.

The only thing that detracts from teh.awesome in this tute, is the absence of some guidance regarding how to put the 'blue highight' in place. otherwise i would have clicked '5 stars'.

I have been plotzing around for a while trying to put the highlight in place, but have only succeeded in making a mess of copies of the 'default' XCF file.

Frankly I can't get anything remotely like the 'blue flare' version of the thing (for the 'hover' version for my site)..

I've also decided to 'flatten image' (with no text layer), in order to 'stretch' the button if the button text is longer than 'Sample': I know that will 'stretch' the little side highlights, but only by a few percent. Otherwise, one is forced to re-build the entire button in order to keep the same let an right padding on button text.

I wish I could get hold of that blue-flare button - the colour balance is so 'right'.

Also, thanks to those folks who pointed out the font - it is one that I quite like.

Cheerio

GT
http://marketrant.blogspot.com

Hi Gimper
I really like your tutorials, they are great:)
Now I wanted to try this one here but I got confused at step 5. You talked about the layer "vistabutton" but you never said before that we are creating a layer called "vistabutton". And then the thing with the 1px outline. I just do not understand this step. I am doing it just like you are describing it, but nothing happens.
Am I just too stupid to understand?
It would be great if you could reply and help me:)

So long, Donot

btw. I am 15 years old and from Germany, so do not wonder about grammer mistakes;)

AWESOME :D

I loved this tutorial!
This was my first time on GIMP and I found this easy, but with a professional result |D

really great buttons! I used Vista Buttons application http://vista-buttons.com/ to make similar nice buttons, but it's not so difficult with Gimp!

thank you!
All the complains are from people that haven't practiced with Gimp a lot.
If in a hurry to leArn the basics you should watch the YouTube videos for a while...

Umm, ripoff?

http://yellowicon.com/

Thanks sooo much I've been looking for this for ages!