Note that I had permission from Erobos to do this.*The tutorial is in two sections, Beginner will show you how to make the inanimated one, while Advanced will show you how to make animated ones, but nonetheless they're easy to make :3 *I will be using GIMP for this, the process in Photoshop might me same, might I cannot gurantee that. Introduction Maybe you heard this, maybe you didn't. But I am sure you've seen bars, maybe even animated ones, in people's signatures similiar to these: Yes, these are known as userbars, and today I'll show you how to make these in an easy way. Section 1 Let's begin. First make a new image. The width will be 359, and the height will be 19 (pixels for both). In the advanced option tab, change the "Fill with" option to "White" or "Background Color" if the background color is white (it will be if you've just opened GIMP) Spoiler [/HIDE] Now choose the colors you would like for your userbar. Remember one thing when choosing the color, the foreground (first one that is originally black) will be a light colour, while the background (the last one that is originally white) will be the dark colour. I'll be using Orange-Red in this tutorial. Spoiler [/HIDE] Now choose the blend/gradient tool or press L in GIMP. Then click on "Gradient" and change it to FG-BG (RGB). If you've started GIMP, it will already be FG-BG. Spoiler [/HIDE] Now click on the left-most side of your image, hold Ctrl, and drag it to the other side of the image and release it. This will create a gradient. It looks quite simple doesn't it? Well we haven't added the touches yet :3 Spoiler [/HIDE] Now for the next part, we will be adding "scanlines". There are two ways of doing it. One is creating angular lines, while the other will fill the area with grids. Maybe that sounds confusing, so a picture will help. The first one is the angular lines, while the second one is the grid lines. Section 2 Now the first part of this section will show you how to make the scanlines, and the second will show you how to add them. S2 Part 1 This part of part one (lol?) will show you how to make the angular scanlines. First open up a new window, set the "Fill with" to transparent, set the size to 9 width and 9 height. How take the pencil tool (press N) and choose "Circle (01)" for the brush. This brush is only 1px, so it'll be perfect. Now zoom in (press Z or click the magnifying glass icon) to 6400%. Now change the foreground color to Black, and click on the upper right corner. There you gave a pixel. Now click on the next pixel to the down-left corner of the pixel. Seems confusing? I'll give you a picture to show how to do it then. Spoiler [/HIDE] Don't mind the layers part, I made it over the grid ones so that I didn't have to search through a few hundred patterns for it. Now save it to: (Hard Disk):\(the Folder where you saved it, or GIMP if you didn't)\GIMP 2.0 (ignore this one if you didn't save it in another folder)\share\gimp\2.0\patterns (name it something like scanlines) For example, for me it is: C:\Program Files\GIMP 2.0\share\gimp\2.0\patterns This part of part one (lol again?) will show you how to make (.....) the gridded scanlines. Maybe you didn't notice the difference in the picture. There is, and if you don't believe me, download it, open it and zoom it way in and you'll see the grids. Now the process is the same. Except the patterns will be similiar to chessboards. One will be black, while the other is transparent (means you wont put anything there and they'll show through). Now for the picture. Spoiler [/HIDE] Now save it to the same directory. Now here's the tricky part. To use this scanlines you must restart GIMP. Now save your work as something like Userbar.xcf Yes the xcf part is needed or your work will be rasterized. Spoiler Spoiler S2 Part 2 So you just restarted, now lets add the scanlines. Now I'll be using the angular ones. Go to the layer part, right click the first layer (should be called Bakground most of the time) and then click New Layer (or press Shift+Ctrl+N). Change the Layer Name to Scanlines for easy reference. Don't bother with the width or height. Change the layer fill type to "Transparency" Spoiler [/HIDE] Now choose the Bucket Fill tool (Shift+B). Change the "Fill Type" to Pattern Fill. Now click the pattern box and search for your pattern that you just made and saved. Spoiler [/HIDE] Now fill the area with the pattern. Make sure that you are on the "Scanlines" layer. Now it doesn't look good, it looks too dark right? Change the "Layer Opacity" to something like 30%. The Layers Opacity is written as Opacity in the layers tab. Spoiler [/HIDE] There. Now we'll move on to the next section, where we will give it a light source and with it a 3D Effect. Section 3 Now create a new layer just like before. However name it "Light". Now select the Ellipse Select Tool (E) and drag a selection around the top. Spoiler [/HIDE] Now look at the top. Click the Edit menu then click "Fill with BG Color" (your background color must be White. If it isn't set it to White. Hotkey for the BG Fill is Ctrl+.). Eeww, that looks ugly doesn't it? However you'll have to tweak it a bit. Go to the Layers Tab and in the "Mode" click the drop down tab and set it to Overlay instead of Normal. Now just tweak the opacity until it looks good. Something between 50%-70%. I'll be using 70% here. There this section is over. Now we'll add the text and the picture and you're done! Section 4 Select the Text tool now, or press T. Set the Foreground color to white. Now just Type it in by dragging a box where you wish to type it and type it in. However there is a font that must be used, called Visitor TT1 BRK. Download it here. The font size should be around 10-12, what suits your bar better. Now the text should be in a different layer. Right click that layer and select "Alpha to Selection". Now make a new layer, name it "Shadow" and put in under the Text layer. Do this by dragging the layer and putting it under the text layer. Now look up and then click "Select" and then "Grow". Set it to 1px. Spoiler [/HIDE] Now set your Foreground color to Black again. Then click the bucket fill tool. Don't worry you won't be doing another pattern :P Now set the Fill Type to FG Color Fill and the Affected area to Fill Whole Selection. Now click in the selection. There you have a black border :3 Section 5 Now for te picture. If you're planning to use a Pokémon picture, go to Veekun Pokedex and to the flavor part of the pokemohn and download the official Sugimori art. Now open the picture. Go to Select > All (in the menu bar) and copy it (Ctrl+C or Edit>Copy) and go to your userbar. Make a new layer, name it Picture and paste it in. To bind it to te picture, press Ctrl+H. Spoiler [/HIDE] Now look up and click Select > Select All. Then go to edit, then click stroke selection, then change the amount to 1px. Be sure that your foreground color is black. There click OK. You don't notice any difference do you? That's because the famous 1px border is hidden under the yellow border :P. Don't worry its there. Save your file as a PNG this time, by going to File > Save As > Your file name. There your userbar is finished =D I'll be doing the animated part later on. Also post your results :3 and if you have problems as well.