Table of Contents
>> Vista-Style Icons and Images
>> Vista-Styled Text

>> Examples in Action
>> Examples in Action #2
>> Examples in Action #3
>> Variations on a Theme

Vista-Style Icons
	Step 1 Create a new transparent image with the size of your choice. Name it "Border" or something similar. Choose the rectangular selection tool, Select the area you want to be the outer border of your button or image, then go to Select-->Rounded Rectangle and click OK. You may want to tweak the Rounded Rectangle percentage for different looks.
	Step 2 Choose a color that will contrast with your page background (in this case black for a white background), and fill the selection. Create a new layer called "Background" with the selection still active, then go to Select-->Shrink and choose "2 pixels". You may wish to tweak this based on the overall size of the image.
	Step 3 Fill the current selection with a fairly dark color, then change your color to a lighter version of the same color (but don't fill anything yet). Shrink the selection by 2 pixels again.
	Step 4 Create a new layer above the Background layer called "Lower Glow", select the Gradient tool in linear mode, and choose the Foreground to Transparent gradient. Click and hold near the bottom of the active selection, hold down the [Ctrl] key, drag straight up to around the middle of the image, and release with the [Ctrl] key still held. Release [Ctrl].
	Step 5 Create a new layer named "Highlight". Switch your foreground color to white, and with the Gradient tool still selected, drag from the top to bottom of the current selection, again using the [Ctrl] trick to make it perfectly vertical. Switch to the Rectangular Selection Tool, Hold [Ctrl] to switch to the subtraction mode, then subtract the top half of the current selection. You should be left with just the bottom half.
	Step 6 Hit [Ctrl][K] to clear the bottom half of the layer, then set the Highlight layer to 80% opacity. Insert a new layer below the Highlight layer named "Content".
	Step 7 Put whatever content you want in the image or button into this Content layer. Voila!
	The Layers Your layers will probably look something like this when you're done.

Vista-Styled Text
	Step 1 Create a new transparent image with the size of your choice. Name it "Border" or something similar. Create some text in your chosen border color, then click Text to Path. Switch to the Paths dialog, rightclick on the path you just created, and choose Path tp Selection. Carry on with the rest of the steps above, omitting the Contents layer.
	Step 2
	Step 3
	Step 4
	Step 5

excellent tutorial Kerm. I think you should create your own archive of tutorials similar to how the gimp did. I find the ones that you write also easier to follow then thiers. With this tutorial i was able to create the same thing just about in seconds but with the gimps tutorials it takes me forever.

Thanks! I was actually thinking about doing the same myself. I'll have to write some more then...

This is a really cool tutorial. I was thinking about a way to automate these kind of buttons, and I think I may have stumbled upon something using CSS. (Did you know that you can put not only borders on the img element, but also padding and background images? Fascinating.)

Here's the link to a test I made using your technique and example. Take a peek at the source - it's pretty minimal, and I think the whole process could be easily automated using XML for your site layout, and using XSLT to auto-generate the CSS and HTML required for the code.

http://scott.trenda.net/vista-button-test.html


edit: Looking at it again, I noticed the following:
- alpha2.png (the <img> source) doesn't need to be modified, as it's dynamically resized when the page is drawn
- onoff.png (the <img> background-image) is white with 40% opacity - this is a problem in IE6, because it doesn't support PNG transparency in background images. I don't have any ideas for this one, but it works fine with GIF, animated or not. Handling this kind of depends on what you're trying to do with it, but there are options.
- vista-lowerglow-00dd33-150px.png (the <a> background-image) is created and hard-coded to work only for this example. I think the best solution for this one would be a link to a PHP/ASP/preprocessor script that would take in arguments for the size and background color you'd like, and return the binary content of the PNG/GIF you want in its place. You wouldn't even need the top half of the image as-is, just set it to "background-position: left bottom". I don't know enough about dynamic image creation to do this, but I know the scripts are out there. I have a script to change hex RGB color into its HSV values, if that'd help at all.

Very awesome! Yes, that PHP script would take me about 2 seconds, and there's an IE CSS hack to fix PNG transparency handling. I'd love to work with you to get this working...

Let me know if you get a PHP script working - you'd need to pass it the color of the bottom pixel (#00dd33 in this case), and pass it the total height of the image you want to make a background for. It should return an image 1px wide and half the input height, that starts with the bottom-pixel color and ends with transparency.

Plus, if you're thinking about the same IE CSS hack that I'm thinking of (the filter one), it only affects the foreground image; I don't know if there's actually any possible way to force PNG transparency support into the background image for IE6. The main issue is that you have to put the images into elements that don't explicitly occupy any space in the CSS box model - more of the idea behind the Mozilla XUL stack element, but one that'd be supported natively in CSS1. If you'd like to experiment with this, by all means please do so and let me know what kind of results you find. I'm using Vista, so I don't have access to IE6.

Thanks for the reply! Looking forward to seeing what you come up with. ^_^ Send me a message at Air Random on AIM, and we'll chat some more.



edit: I checked quick, and the width of the button doesn't matter at all - I resized it to 200px wide, and it followed suit beautifully. The only constraint (outside of IE6) at this point is the lower-glow background image, which can only increase to 150px in this case without losing the original effect. I also trimmed the top half of transparency off the lower-glow PNG; perhaps that'll make the PNG creation script a lot easier to write. (Each pixel is the same color, the alpha is the only thing that varies from pixel to pixel, 255 at the bottom to 0 at the top.)

Hello All,

Here is a cool script I did up which automatically follows the steps in the tutorial above. Just copy the below code into a file called vista-button.scm saved into your GIMP scripts folder. Run by Xtns -> Script-Fu -> Buttons -> Vista Button..

only tested on Gimp 2.2.10 ENJOY!!!


Code:
[/code]

Very nicely done! I'd be happy to offer your script for download in the archives here - I'll try to add it today.

and welcome to cemetech.

nice work in Scheme.

Excellent tutorial, Kerm!

And, cool script.

Also, when I clicked this link to see the "examples in action," it reminded me so much of TI-Nspire Flash animation on the TI-Nspire website, with images saying things such as:

"From an integrated GUI for programmers to networking and mobile document management, Doors CS 6 is your mobile productivity solution."

and

"Rock-solid stability and reliable debugging make Doors CS 6 the smart choice for students, teachers, and developers. Intelligent archive routines prevent your data from corruption."

You forgot to add something about Doors CS 6 enhancing some process (such as the development process, etc.) and being interactive and visual.

(btw, the "Intelligent archive routines prevent your data from corruption." part doesn't seems kind of awkward there)

Heh, thanks, I think. In my opinion, those ads came out pretty pwnsomely.

Images are all down. Never use Imageshack! Use Imgur to store permanently. Still a good article

You'll notice this was written back in 2007 - thanks for the necropost btw. Imgur was founded back in 2009. Before you make such claims, it's best to understand why something might be down.

There's really no good place to permanently store things online unless you upload the images to your own domain. Even imgur can become the next "never use" this website. I use my websites for images I plan to keep for years and imgur for images I just need to send someone once or something.

What? Imgur? Use PicPaste!

EDIT: I was kidding at the time I posted this. I personally prefer imgur.