Mini-Signature User Bar Tut

[FUS1ON]

I did not write this, I found this tut somewhere and can't for the life of me remember where and I would have liked to have linked to it and also given the author credit. I've Googled trying to find it and can't. I had saved it as .htm file on my harddrive so I could look back on it later is why I have the pics and stuff.

Anyways here it is ...

In this tutorial I will show you how to make a custom user bar.

I will be making a Photshop CS user bar.

1) Make a new document with sizes widht: 350 height: 19 with a transparent background.



2) Make a suitable gradient and apply it.



3) Now get a logo, when I usually search for images i use Google Images, find your logo and open it up in Photoshop.

4) Now it's time to remove your logo from the background, get the polygonal lasso tool and carefully cut it out.




5) Now go to Edit > Copy, then open the user bar document (the one where you applied a gradient), then create a new layer and go to Edit > Paste.

6) Now with this layer selected go to Edit > Transform > Scale and resize your logo or reposition it if you wish.



7) Now right click on the layer and select Blending Options and give it a little outer glow with these settings:



8) Now make a new layer and get the Elliptical Marquee Tool and drag it from about point 1 to point 2.




9) Now get the Gradient Tool and use these settings:



and now drag it vertical from point 1 to point 2:



10) And now you have a nice light effect, create a new layer and fill it with a 45 degree scanline with opacity from 10% - 15%
if you don't have a 45 degree scanline make a new document with dimensions 3x3 with a transparent background and do a maximum zoom,
now get the pen tool (make shure your color is set to black) and draw what I've done in this picture:



When you are done go to Edit > Define Pattern and name it what you want and click ok.
Now you can close this document because the pattern is permanently saved in Photoshop.

Here is what you should have so far:



11) Now it's time to put some text, I will use font Visitor which you can get from this link: http://dafont.com/en/search.php?nq=1&q=visitor
type your text then right click on your layer and go to Blending Options and use these settings:



Here is what I have so far:



12) Now for the final step is to add a border, create a new layer and hold CTRL and click on the bottom layer. You should have the
"running ants" around yor document, now go to Edit > stroke and use these settings then click OK:




And now you are done!

Here is my final result:

[FUS1ON]

Here are some more, each one does things a little different and adds different effects so check them all out:
http://inseveral-designs.com/tutoria..._from=&ucat=1&
http://www.tutorialtomb.com/forum/showthread.php?t=317
http://support.invisionfree.com/inde...owtopic=170005
http://www.pixel2life.com/forums/ind...showtopic=6369
http://www.deviantart.com/deviation/28911648/
http://www.tutorialfx.com/view_tutorial.php?id=10
http://www.deviantart.com/view/27886574/

Animated:
http://www.gfx-reborn.co.uk/forum/in...showtopic=1678

Check back, i'll be adding more to help you all out

[FUS1ON]

A buddy of mine by the name of GccTxs hooked me up with some instructions on how to do this type of animation to the userbars. Thanks GccTxs for doing this and letting me post it here!

Some samples of his work:

Short Version Sho.....


Make your new Image bar....350 X 19

As New Layers Add In this Order:

Color <----Bottom Layer
Scanlines (Optional layer)
Elliptical (Optional layer)
Image
Text
Stroke (on bar) <---- Top layer

be Sure to Put the Image Directly in the center of the Bar, I try to keep my Image or Render at about 200 X 200 or somewhere there bouts....

At this Point you should have a Still bar with an image directly in the center, the top and bottom will apear to be cut off, but they are not....you'll see....

At this point hit Edit in Image Ready, Make sure your animation Window is open and go to the layer palette for the bar....Click on the layer for the image ONLY.....you will see a Blue Box highlite it on the bar.....

Use your Move tool to drag that box DOWN until the Image has Just completely disappeared from the bar.....the top line of the blue box should be flush with the bottom of the bar....

Go to the animation window and Click Duplicate.

Now go back to the Image and use the Move tool to Drag the Image all the way UP until it has passed through the Bar and the Bottom of the blue box is flush with with the top of the bar.

Go back to the animation window and Click Tween....I like 45 Frames, smoothest effect I think.....

Once you tween it, hit the Test in IE button to see if you like it, if not just undo redo.....be careful when draggin to make sure you go STRAIGHT up and STRAIGHT down or it will wiggle in the animation....

Once you like it go to File and SAVE OPTIMIZED AS...

Done

[FUS1ON]

Since learning how to do these a few on my NASCAR friends have been keeping me busy.

[NastyDawg]

My first Mini-Signature Bar, I made it for Tiger Wood Community. I am new to this only been using Photoshop for about a month now!

[FUS1ON]

That one looks nice bud.

I notice you mentioned TWC and it has TWC on it, did you hear about GameMecca from that post I made in the TWC signature contest thread?

[NastyDawg]

That one looks nice bud.

I notice you mentioned TWC and it has TWC on it, did you hear about GameMecca from that post I made in the TWC signature contest thread?

yes sure did

[FUS1ON]

Excellent, glad to see you made it here.

[-Chris-]

nice work guys

[NastyDawg]

The club I was in for a while asked me to make a logo for them this is what I came up with, based on the mini-bar tut.