- GIMP Toturial: Pwnsome Web 2.0 Buttons and Text
- 28 Feb 2007 12:05:47 am Permalink
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
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.
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.
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.
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].
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.
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".
Put whatever content you want in the image or button into this Content layer. Voila!
Your layers will probably look something like this when you're done.
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.