The Official Machinae Supremacy Forum

Gaming & Media => Gaming & Media => Topic started by: Lysix on April 25, 2007, 01:06:35 am

Title: Animated Bars?
Post by: Lysix 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!
Title: Re: How?
Post by: Xhu on April 25, 2007, 01:20:29 am
The Wikipedia article (http://en.wikipedia.org/wiki/Userbar) was useful to me, actually. Has some of the rules and all. ^^

(http://img365.imageshack.us/img365/619/47bf.gif)
(http://img365.imageshack.us/img365/659/39jn.gif)
(http://img365.imageshack.us/img365/4594/27qu.gif#)
(http://img418.imageshack.us/img418/7938/14cv1.gif)

Note; I didn't make all of these. Found some, made the ones missing, strung 'em together.
Title: Re: How?
Post by: Lysix on April 25, 2007, 01:48:02 am
Awesome info, just need to know how to do the stripes now :)
Title: Re: How?
Post by: Fallout on April 25, 2007, 01:54:28 am
Awesome info, just need to know how to do the stripes now :)

www.good-tutorials.com :P

'scanlines'

This is a good one: http://biorust.com/tutorials/detail/169/en/
Title: Re: How to make animated signature bars
Post by: Chronologix 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 400x20...so 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:

(http://img.photobucket.com/albums/v470/Chronologix/Tutorials/ub2.jpg)

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:

(http://img.photobucket.com/albums/v470/Chronologix/Tutorials/ub3.gif)

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:

(http://img.photobucket.com/albums/v470/Chronologix/Tutorials/ub4.gif)

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

(http://img.photobucket.com/albums/v470/Chronologix/User/mpgh.gif)

---------------------------

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.

http://img.photobucket.com/albums/v470/Chronologix/Tutorials/shinetut.jpg

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

THIS IS IS TOO WIDE...YOU NEED TO MAKE YOURS THINNER!!

http://img.photobucket.com/albums/v470/Chronologix/Tutorials/shinetut2.jpg

then once it is sheared to look that way...you 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

Result:

(http://img.photobucket.com/albums/v470/Chronologix/User/ms.gif)

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...
Title: Re: Animated Bars?
Post by: Lysix on June 14, 2007, 03:19:38 pm
Could you remind me what font you used? :)
Ignore that, the wiki entry has it. :P