Web 2.0 Website Links

Ok, so these are the little web 2.0 style links for webpages. I decided to do a tutorial on these because I needed some custom ones, and thought I'd share. Aren't I the nicest person?? :P

Ok, before we start, we need to get the font. I'll use the userbar font that I introduced you to a while back in my userbar tutorial. Get it here.

1) Ok, so open Gimp. Create a new image that's 80x15 pixels with a white background.

2) Create a new layer. Change the foreground color to something that you would like for the border. Go to Select -> All. Go to Edit -> Stroke Selection. Select 1px thick, and solid line. Stoke the selection. Select -> None. Note, you won't be able to see the stroke because it is being covered by the yellow and black dashed lines. Don't worry though, it's there.

3) Now we will add text. Type in what you like. For my case, I will type "Gimp Google" but without the quotes. Make sure the font is Visitor TT1 BRK. The font size should be about 10-14. Adjust the color and positioning to the right.

4) I decided to put a logo in mine, so I scaled it down to where it would fit, toward the left.

5) Now we will add the background coloring. The reason we do this last is because our fonts and/or logos guide this step. Create a new layer above the background layer. Using the select tool, select an area that surrounds the text, but is one pixel shy of touching the border. Fill it with the same color as your border. Do the same around the logo.

6) We're done!


Please note...mine SUCKS!!

But it's ok..at least you know how to do it now. :P