1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Guest, PO has ceased our separate tiering and adopted Smogon tiers for SM. More information and updates here.

    Dismiss Notice

[Guide] Userbars

Discussion in 'Arts and Graphics' started by Shawn Frost, Jan 23, 2011.

  1. Shawn Frost

    Shawn Frost Neko-sama

    Joined:
    Aug 17, 2010
    Messages:
    501
    Likes Received:
    0
    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:

    [​IMG]
    [​IMG]

    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)
    [​IMG][/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.
    [​IMG][/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.
    [​IMG][/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
    [​IMG][/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.
    [​IMG][​IMG]

    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.
    [​IMG][/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.
    [​IMG][/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.
    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"
    [​IMG][/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.
    [​IMG][/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.
    [​IMG][/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.
    [​IMG][/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.

    [​IMG][/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.
    [​IMG][/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.
     
    Last edited: Jan 23, 2011
  2. HeroOfSinnoh

    HeroOfSinnoh Banned

    Joined:
    Oct 7, 2010
    Messages:
    718
    Likes Received:
    0
    Well this is very informative indeed.
    Thanks a heap Shawn.
     
  3. Burnin'Red

    Burnin'Red Official Cookie Stealer

    Joined:
    Oct 14, 2010
    Messages:
    484
    Likes Received:
    1
    PO Trainer Name:
    Burnin'Red.
    OMG
    thanks :D
    I can make my own now :D
     
    Last edited: Jan 24, 2011
  4. Archerknight

    Archerknight Legends

    Joined:
    Aug 9, 2010
    Messages:
    2,430
    Likes Received:
    0
    PO Trainer Name:
    Archerknight
    Thanks. :)

    Now I know how to make these! :D
     
  5. Erebos

    Erebos Banned

    Joined:
    May 6, 2010
    Messages:
    743
    Likes Received:
    0
    Oh, I forgot to post here.

    I'm impressed, Shawn. This is very well made. Although I'm not interested in Userbars myself, I have to say, I'm looking forward to the animated stuff.

    I'm thinking of getting a separate section where I can save stuff like these, like a sub forum instead of stickys.
     
  6. Simply Angle

    Simply Angle Stop Watching ME!

    Joined:
    Apr 28, 2010
    Messages:
    156
    Likes Received:
    2
    As in a TuT sub-forum. : 3

    This is a nice tutorial and it's also simple for beginners to learn from. : 3
     
  7. Insanity_yuno'

    Insanity_yuno' Member

    Joined:
    Apr 5, 2011
    Messages:
    57
    Likes Received:
    0
    Nice, I always wanted to make one of these, hopefully I'll get one done soon :D
     
  8. TheUserFormerlyKnownAsFPT

    TheUserFormerlyKnownAsFPT Woof

    Joined:
    Jun 13, 2011
    Messages:
    170
    Likes Received:
    0
  9. Novan_Hero

    Novan_Hero Member

    Joined:
    Jun 4, 2011
    Messages:
    102
    Likes Received:
    0
    aww, I wanted to write the Animated Userbar Tutorial XD anyway, it was really confusing for me at the start when you were doing the scanlines, All I suggest then is to type that you need to save the Checkerboard and Scanline picture as a ".pat" file. Also I don't think you need to restart gimp, you could also just refresh the Pattern Window:
    If there is no tab at the bottom of the Layer's window then click the Bucket>Pattern Fill>The Pattern Box>Bucket in the Bottom Right>Arrow in Top Right>Pattern Menu>Refresh Patterns Hope these Helped.
     
  10. Shadow Roxas

    Shadow Roxas Member

    Joined:
    Sep 5, 2011
    Messages:
    41
    Likes Received:
    1
    PO Trainer Name:
    Roxie Maria
    Hey (sorry if this is necrobump) but can this be used in Fireworks?
     
  11. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    It's possible but a bit more complicated I guess
     
  12. Shadow Roxas

    Shadow Roxas Member

    Joined:
    Sep 5, 2011
    Messages:
    41
    Likes Received:
    1
    PO Trainer Name:
    Roxie Maria
    It really is o-o It's sorta hard to get the foreground color set, so... yeah :/
     
  13. wedfrgthzukoiöp

    wedfrgthzukoiöp New Member

    Joined:
    Nov 20, 2012
    Messages:
    15
    Likes Received:
    0
    Nice Tutorial! :3

    My result:

    [​IMG]