Your Ad here contact
Vista Button
Submitted by Gimper on Sat, 09/29/2007 - 03:03.
Preview:
Have a look at the end result you really need to see it to appreciate this tutorial :) also inside is a html/java script example of a
Rollover in action.
A friend of mine requested that i make a simple yet cool Vista style button tutorial for gimp, so here is what i came up with.
Step:
1:
Create a new image. 200x100 should be enough.
2:
Create new layer and name it vistabutton,grab the rectangle tool and draw a 100px50 rectangle.
3:
we will need to create a New Gradient for this vista button, so in the Gradient Dialog click on "new gradient" then right click on the left point and enter the color 252525, then right click the right end point and enter 9a9a9a...
still in the gradient Right editor, right click on the middle point and
select "Split segment at midpoint", then drag both new segments to the middle as shown below, then save.
4:
Grab the Blend tool select the new Vistabutton gradient we just made and apply it from bottom to top, make sure its perfectly straight, if you make a mistake then press CTRL+Z to Undo it.
5:
Now we will create a 1px outline around the button by Right clicking on the vista button layer, then click on "alpha to selection", create a new layer, name it "Outline" then go to select>Grow>1px.
6:
Change your foreground color to 424242 and fill the outline layer then place the layer behind the "vista button" layer.
7:
Zoom in to make it easy, and with the selection tool create a rectangle inside of the button as shown below
8:
Now we will subtract the inner side of the rectangle we just created by either clicking on the "subtract from the current selection" button in the tool options, or pressing CTRL while drawing the rectangle.
9:
Create a New layer, Grab the Blend tool and apply a solid White colour to Transparent (FG to Transparent) Gradient from top to bottom ( make sure its straight) and finally adjusting the opacity to 64.
10:
Note* make sure you have the selection mode on "Replace the current Selection" after doing step 8. ok grab the rectangle selection tool and create another inner rectangle but this time at the bottom of the button.
11:
Grab the Blend tool, and in the "Tool Options" Drag the Opacity to 25 and change the " Shape to "Radial" now apply from the centre and drag the blend tool around 100px down.
this is how it should look
12:
Grab our favourite tool and create a 1px gradient at the bottom of the button
13:
Grab the "Blend tool" and adjust the "Opacity" to 80 and Shape to "Radial" then apply it from the middle to around 95px down
it should look like this by now.
14:
Finally will Create the Reflection of the vista button by creating a rectangle selection half the size of the button,
15:
Set the Foreground colour set to cdcbcb use the (FG to Transparent) Gradient and apply it from from top to bottom.
your done! a Vista style button!
a sweet idea would be to make 2 different colours for roll-over effect by changing the colour of the radial gradient in step 11 to a blue.
here is an example of a blue version.
Here is a live Html+javacript rollover example.Rollover in action
nice tut
Submitted by carlosp120 on Sat, 09/29/2007 - 03:21.hey dude, really nice tut, the final result is awesome .
=)
code
Submitted by Visitor on Sun, 10/07/2007 - 16:22.How do you make the code?
re: code
Submitted by carlosp120 on Mon, 10/08/2007 - 00:21.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.
Help
Submitted by awashington on Mon, 10/08/2007 - 14:34.As a complete beginner with GIMP, please advise on how to download the Tutorials.
sincere thanks
AlanW
Wow
Submitted by Visitor on Mon, 10/08/2007 - 22:17.Really nice ;)
silly bit at the bottom
Submitted by Visitor on Tue, 10/09/2007 - 10:48.So to avoid having that silly bit at the bottom all I have to do is miss out the 1px gradient at the bottom?
A quick question
Submitted by Visitor on Tue, 10/09/2007 - 18:07.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.
Re: Vista Button
Submitted by Visitor on Wed, 10/10/2007 - 06:27.Really good work !!!
good
Submitted by Visitor on Thu, 10/11/2007 - 06:17.aha, real good
Mouse on click
Submitted by fedella on Tue, 10/16/2007 - 15:30.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.
thanks
Submitted by Visitor on Sat, 10/20/2007 - 17:54.tkanks :) :)
Really cool!!
Submitted by El Llama on Sun, 10/21/2007 - 15:34.Nice tut man!
ellamasblog.blogspot.com
El Llama
Fr3dy
Submitted by Visitor on Sun, 11/18/2007 - 01:37.Hi Gimper
Congratulations it's a very nice tutorial.
I want to translate in my web. can I do this?
Thanks...
mail
Submitted by Visitor on Sat, 11/24/2007 - 13:45.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
download the vistabutton.xcf
Submitted by Gimper on Sun, 11/25/2007 - 17:11.members now can download the XCF gimp source file under the tutorial you will see "attachment"
AdW
Submitted by Visitor on Fri, 12/14/2007 - 14:57.Llego hasta el paso 7 nada mas, alguien me prodria decir como se hace el paso 8.
Re: Vista Button
Submitted by Gimper on Fri, 12/14/2007 - 22:10.anyone care to transliterate? :D
great tut
Submitted by Visitor on Sat, 12/15/2007 - 00:37.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.
He's saying...
Submitted by Visitor on Mon, 12/24/2007 - 18:01.I only got up to step 7, could somebody please tell me how to do step 8?
Yeah... I'm from Venezuela.
This
Submitted by Visitor on Tue, 12/25/2007 - 01:48.What is the text and I don't see the xcf download link anywhere...
Excellent!
Submitted by Gimpmine on Tue, 12/25/2007 - 04:50.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....
Re: Vista Button
Submitted by Visitor on Wed, 01/02/2008 - 21:52.cool heps a lott@!
Re: Vista Button
Submitted by Visitor on Sun, 01/06/2008 - 14:19.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
Re: Vista Button
Submitted by Gimper on Sun, 01/06/2008 - 22:05.nice work :)
Awesome
Submitted by djswartz on Sat, 01/26/2008 - 03:09.This is awesome! Thanks a lot.
Very cool
Submitted by Visitor on Mon, 02/04/2008 - 23:07.Hi, this is a very good tutorial. I love it. Keep up the good work ;). Cheers!
GIMP script
Submitted by gmouse on Tue, 02/12/2008 - 16:08.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).
OK, I've put it on deviantart
Submitted by gmouse on Thu, 02/14/2008 - 06:14.url: http://gmouse.deviantart.com/art/Vista-Button-GIMP-Script-77335405
enjoy!
Just a small comment: I
Submitted by stalepretzel (not verified) on Fri, 04/11/2008 - 00:30.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
Re: Vista Button
Submitted by Visitor (not verified) on Sat, 04/12/2008 - 17:24.here is how you use them if you put text in the image:
HTML:
Css:
.button1 { background: url("image1.jpg"); } .button1:hover: { background: url("image1hover.jpg"); }and change the number for every link.
Re: Vista Button
Submitted by Zydoon (not verified) on Wed, 05/28/2008 - 19:57.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.
Re: Vista Button
Submitted by Visitor (not verified) on Sat, 05/31/2008 - 13:26.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).
Re: Vista Button
Submitted by Visitor (not verified) on Mon, 06/02/2008 - 22:44.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?.
Re: Vista Button
Submitted by Gimper on Tue, 06/03/2008 - 03:51.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
Re: Vista Button
Submitted by Visitor (not verified) on Sun, 06/08/2008 - 03:30.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
Submitted by Gimper on Sun, 06/08/2008 - 03:32.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
Submitted by Drew Douglass (not verified) on Wed, 06/11/2008 - 02:26.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
Re: Vista Button
Submitted by Gimper on Mon, 06/16/2008 - 04:23.thanks :)
Re: Vista Button
Submitted by Tobi (not verified) on Wed, 07/02/2008 - 20:15.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.
Re: Vista Button
Submitted by Gimper on Thu, 07/03/2008 - 02:36.the xcf file is attached below the tutorial.
yes, but im asking for an
Submitted by tobi (not verified) on Thu, 07/03/2008 - 21:45.yes, but
im asking for an xcf file with the blue gradient
for step 11
Re: Vista Button
Submitted by Gimper on Fri, 07/04/2008 - 03:36.sorry i no longer have the gimp xcf file. its very easy, you should give it a go.
sigh, the only reason im
Submitted by Tobi (not verified) on Sat, 07/05/2008 - 15:20.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
Re: Vista Button
Submitted by Beam (not verified) on Sun, 07/06/2008 - 11:25."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?
Re: Vista Button
Submitted by Bart (not verified) on Sun, 07/06/2008 - 11:48.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
Submitted by Gimper on Sun, 07/06/2008 - 12:01.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.
Re: Fr3dy
Submitted by Visitor (not verified) on Mon, 07/07/2008 - 15:24.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
Submitted by tobi (not verified) on Mon, 07/07/2008 - 17:49.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
Re: Vista Button
Submitted by Visitor (not verified) on Tue, 07/15/2008 - 21:31.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.
Re: Vista Button
Submitted by rocktofakie3 on Thu, 07/24/2008 - 03:06.How do i add the blue part in the last photo?.....
Like when someone hover overs it it goes to the blue one....
Re: Vista Button
Submitted by Gimper on Thu, 07/24/2008 - 06:17.same way you do step 11 but instead use blue.
Re: Vista Button
Submitted by Dan (not verified) on Sat, 07/26/2008 - 14:44.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.
Re: Vista Button
Submitted by Visitor (not verified) on Sat, 07/26/2008 - 15:51.Great tutorial! What font you used?
Re: Vista Button
Submitted by Gimper on Sat, 07/26/2008 - 22:59.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.
Re: Vista Button
Submitted by Komik şeyler (not verified) on Fri, 08/01/2008 - 22:21.Thank you very much for this useful article. I like this site.
Re: Vista Button
Submitted by Ice Cone (not verified) on Mon, 09/08/2008 - 21:36.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.
Re: Vista Button
Submitted by Gimper on Mon, 09/08/2008 - 21:39.You can download the source xcf under "Attachment" below the tutorial.
Re: Re: Vista Button
Submitted by Ice Cone (not verified) on Tue, 09/09/2008 - 08:01.Thanks.. I really appreciate you taking the time to do that...
Re: Re: Vista Button
Submitted by steferfootballdude13 (not verified) on Sun, 09/14/2008 - 01:59.Segoe UI Is the font i found it in the .xcf download file :)
Post new comment