- 350 pixels wide, 19 pixels high
- translucent diagonal stripes, angled at either 45° or -45°
- text in the 'Visitor TT2 (BRK)' font, not bold, no anti-aliasing, one-pixel stroke
- .png format if not animated, .gif for animation
- glossy effect
- one-pixel border
The main thing about userbars is how small they are. Nineteen pixels is actually very tiny, and is even tinier when a border uses up the top and bottom row of pixels. You will probably realize this when you start trying to place images. To give you an idea, the whole thing has to fit in this size:
Generally, you should have a pretty good idea of what you are aiming for before you start, although naturally this will change a lot by the time you finish.
I usually work in 200 or 400 times magnification when I'm focusing on just one section of the image, and even 800 or 1600 times when I'm doing fine details. Consider zooming in if you don't need to see the whole thing at the same time (which is most of the time, except when you're placing items or moving them around).
1.) Create a new layer called something like 'Border', and select everything in it (Ctrl+A). Then stroke the selection with a two-pixel line. It needs to be two pixels instead of one since half of it will go off the image, and only half (one pixel, incidentally) will be visible. This is because GIMP strokes a line surrounding the border of the selection, not inside or outside it.
2.) This is what I got with a little bit of work on the Java logo, which I grabbed from the corresponding Wikipedia article (yes, Wikipedia is useful). Usually when I do something like this, I use another file to position the elements and resize them so they look best.
Notice how I put the logo off to the left, leaving room for text later on the right. Also notice how the 19-pixel restriction means that a large part of the original logo is not visible. You have to think about which parts of your image you actually need and which can hang off, so you can resize it appropriately. It can't be too big because barely any of it will be visible, nor to small because you'll lose the detail. Play around with the size.
Depending on how wide an image you are using and what else you want to add to the userbar, your picture may not be in the same place as mine is. For example, I planned to add a tiny bit of Java code to the left of the logo, so I left a little space there. Another thing to consider is how much text you're going to want to add to the right.
3.) Here's with the code that I mentioned earlier. For this I used a layer mask so that some of the background would be visible under this part of the foreground. The mask of the code layer is completely opaque to the left and completely transparent to the right.
4.) There are infinitly many ways to make your background. However, your main weapon will be the gradient tool, set to either 'FG to BG (RGB)' or 'FG to Transparent'. Alternately, you can try to use some kind of image in the background.
5.) Here are a few of the infinitely many different gradients you could use. Not all of them look good, but with a bit of work on colors they are all usable. And you can make as many of your own as you want. In order:
- default gradient, from pale blue on the right to light pale blue on the left
- same, except over a shorter distance and off-center
- horizontal gradients (drag vertically), one from the top and one from the bottom; flood-fill the region with white and use FG to Transparent gradients
- horizontal gradient from white to blue
- green bi-linear gradient (set the shape field to bi-linear)
- pink/purple angularly shaped gradient
- orangish spherically shaped gradient on a purplish background
6.) For this userbar, I decided to use an orange background with a blue-to-transparent gradient on it. You could probably achieve the same or a similar effect using a blue-to-orange gradient, but it would be harder to position.
7.) If you don't have the font called 'Visitor TT2 (BRK)', it is free, and I've uploaded it here. Once you install it on your computer (it's up to you to find out how to do this), open the Fonts dialog in GIMP and click the refresh button at the bottom. If it still doesn't show up, try restarting GIMP.
8.) You can mix uppercase and lowercase because they all fit together, but the following letters look different in upper versus lower: b, i, m, n, p, r, w, y. Pick the one you like best. [The image shows lowercase first.]
9.) Unless it looks really bad, the text is usually white and the border is black. I like to leave exactly twelve pixels between the last pixel of the outline, and the right border, so 13 pixels from the last pixel of the text. Although this is by no means a standard. You can position the text after you create it.
10.) To make the border around the text, right click on the new text layer that you made and choose Alpha to Selection, which was discussed briefly in the Heffalump tutorial. Enlarge the selection by one pixel. Then create a new layer directly below that layer, and fill the selection with black (or whatever other color).
11.) This is 'glossy effect' part of Wikipedia's standards, and is not strictly required. Create a new layer, where you put it is up to you. Select an elliptically curved part of the top of the image, and fill the selection with white. Then lower the opacity to make it look good. In this image, I used 25% opacity.
12.) Scanlines are not always required either, but they can make an image look a lot better.
If you haven't already made scanline patterns, create a new image and fill it in using a one-pixel pencil tool so that it looks something like one of the ones in the image. Which one you use depends on how far apart you want the lines to be. Save the image as a .pat file (GIMP pattern) into GIMP's patterns directory. On Windows, this is usually something like "C:\Program Files\GIMP-2.0\share\gimp\2.0\patterns". Then exit and restart GIMP.
The two scanline patterns in the image are uploaded here and here, so you can use those.
13.) Set the fill tool to fill using the scanlines pattern, and fill a new layer with it. You can position the layer pretty much anywhere that it looks good, and play around with the opacity until you like it. Invert the layer colors if white scanlines are more appropriate than black.
14.) Once again, save the image as a .png when you're done, and make sure to keep on practicing. You can see the userbars that I've made so far for myself, including this Java one, on this page.