GIMP Toturial: Pwnsome Web 2.0 Buttons and Text

[KermMartian]

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

_________________

[lafferjm]

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.
_________________

[KermMartian]

[korisu]

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.

[KermMartian]

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...
_________________

[korisu]

[LucPettett]

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!!!

[KermMartian]

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

[elfprince13]

and welcome to cemetech.

nice work in Scheme.
_________________
StickFigure Graphic Productions || VSHI: Vermont Sustainable Heating Initiative

[bfr]

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)
_________________


TI-Connect kills your calculator - switch to TiLP

http://bfr.tifreakware.net - Basic Elite Member - 2B || !2B - chemistry (and general science and math) forums

[KermMartian]

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