Author Topic: Animated Bars?  (Read 2931 times)

0 Members and 1 Guest are viewing this topic.


  • Guest
Animated Bars?
« on: April 25, 2007, 01:06:35 am »
I just looked at lincer556's signiture and saw those nice thin bar pictures I've seen around.
Thing is, i'd like to make a few of my own but have no idea how. Anybody got links to places that a editing newb like myself can figure it out? [:

hands off my post, bitch!
« Last Edit: June 06, 2007, 12:17:16 pm by Alix__ »

Offline Ausp

  • Full Member
  • ***
  • Posts: 793
  • Karma: 34
  • Gentlemen... it's a nuclear device.
Re: How?
« Reply #1 on: April 25, 2007, 01:20:29 am »
The Wikipedia article was useful to me, actually. Has some of the rules and all. ^^

Note; I didn't make all of these. Found some, made the ones missing, strung 'em together.
(i) There will come a day when nothing you did matters. But it is not today. Here and now, you are alive.
(ii) Live well under your own authority.
(iii) Abolishing suffering is impossible. Lessening suffering is mandatory.


  • Guest
Re: How?
« Reply #2 on: April 25, 2007, 01:48:02 am »
Awesome info, just need to know how to do the stripes now :)

Offline Fallout

  • Machinae Prime
  • *****
  • Posts: 6430
  • Karma: 71
  • Gender: Male
Re: How?
« Reply #3 on: April 25, 2007, 01:54:28 am »
Awesome info, just need to know how to do the stripes now :) :P


This is a good one:
« Last Edit: April 25, 2007, 01:56:24 am by fallout­ »

Offline Chronologix

  • SiteDeveloper
  • Sr. Member
  • ****
  • Posts: 1565
  • Karma: 24
  • Gender: Male
  • I am Canadian!
Re: How to make animated signature bars
« Reply #4 on: June 05, 2007, 07:18:17 am »
Creating a Scanline pattern:

1.) Start a new document with dimensions 3x3

2.) Delete background (unless you already set it to transparent)

3.)Take your pencil tool and set color to white

4.) for scanlines you simply put 3 dots from one corner to the other, depending on which corners it will determine the direction of the scanlines.

5.)Edit->Define Pattern (and save it as whatever you want it to be called)

6.) select your paint-bucket and change from foreground to pattern and select your new pattern, use it on a black background and see how it turned out.


Actual Userbar Tutorial:

1.) Start with a 400x20 document in photoshop (i usually make mine ya)

2.) There are 2 ways to do this nxt step...custom or un-custom.
     - Un-Custom: Take an image from Google or something that fits the type of userbar you are planning ot make (like the MaSu Redeemer CD Cover) and place it onto your document.

     - Custom: Take a gradient of 2 colors you want the uerbar to have (like blue and black) and set them from side to side onto your document.

---Only Custom from this point---

3.) Add some text to your document on the left side or right side (usually never the center) and you will have something like this so far:

4.) Take your rectangular Marquee tool (selection tool) and make a medium sized black area on the side of the userbar area, then take a somewhat large soft-round brush with your eraser selected and "fuzz" the outter edge, or select the outside of the black and "feather delete", duplicate the layer, transform->flip horizontally and move it to the other side of the user bar and you should have something like this:

Then add some more text displaying the type of user you are like "MaSu Fan Supreme" and have it in a pixel font such as "Visitor" or "Silkscreen", go ino the text layers blending options and add a Stroke of a color already on the userbar and set it to 1 pixel, and you get:

The final result would be this if you added a border and the Wavey Shine to it:


Creating a wavey shine to the top of a signature:

okk....basically you need to make a new document and make the dimetions the same size as your width for your userbar or signature....mine are usually 400x20 userbars so i would make a 400x400 document.

Delete the background (unless it is already transparent...if not then delete it to make it transparent)

take your rectangular selection tool and select the left part of the document and select around 1/2 of the document.

make a new layer and fill that selection with white so 1/2 the document is white and the other 1/2 is transparent.

select the layer with the white rectangle and go "filter->distort->shear" and change the line to look like a really thin "S"


then once it is sheared to look that simply selectall or ctrl+a, then paste it into your userrbar (ctrl+V) then use ctrl+t to "transform" it, hold shift and rotate it to point the correct way, then place it onto the userbat to look the way you want. Lower opacity and your done


If you want i can write up a small tut on how to animate them to morph into eachother like those examples in the first posts...


  • Guest
Re: Animated Bars?
« Reply #5 on: June 14, 2007, 03:19:38 pm »
Could you remind me what font you used? :)
Ignore that, the wiki entry has it. :P
« Last Edit: June 14, 2007, 03:29:02 pm by Alix__ »