Tutorial for userbars with photoshop !

[K4rMa]

First guide !

 

1. Open up Photoshop CS and go to File > New (350x20px)

 

2. Set your foreground colour to #00689C and your background colour to #0E9DD5

 

3. Select the Gradient Tool and drag the gradient tool from the top of the end of the document. You'll get something like this.

 

4. Then create a new layer (Layer > New > Layer) and select the Paint Bucket Tool again.

 

5. Change the Fill to Pattern and select the 6x6 pattern. To get the 6x6 pattern, download this file, drag the pattern from the .zip into the Photoshop window.

 

Download pattern --> http://rapidshare.com/files/67018235/pattern.zip.html

 

6. Then, click into the document and you should get some black strokes. Right click on Layer 2 and select Blending Options. Apply Color Overlay to White (#FFFFFF). Click ok and set the layer Opacity to 10%.

 

7. Right click on the image below and copy the image. Go back to Photoshop and create a new document, the size should be configured automatically. Make sure the Background Contents is set to Transparent. Go to Image > Image Size and set the size to 35x33px.

 

8. Zoom in 500% to get a better view. Then use your Magic Wand Tool (W) to click on the white spaces. It will automatically select the white spaces, then press delete on your keyboard.

 

9. Press Ctrl-A to select the whole logo, Ctrl-C to copy and back to your userbar document, press Ctrl-V to paste. Position it properly.

 

10. Download the font if you don't have it. Use the font settings below and write them in blocks. Select the Text layer and go to Blending Options. Give it a stroke. Set the size to 1px and colour to Black (#000000).

Download font --> http://rapidshare.com/files/67019058/04b08.zip.html

 

11. Make a new layer. Use the Elliptical Marquee Tool (M) and make a curve line through the document.

 

12. Select the gradient tool again and use the settings shown below.

 

13. Drag the gradient tool from the top to the bottom of the document. Set the opacity lower if you think the gloss is too bright.

 

14. Create a new layer. Make sure it is on the top, press Ctrl-A to select the entire document and go to Edit > Stroke. Use the settings below.

 

Your end product will be like this.

 

 

 

 

 

 

 

 

Pff Second Guide:

 

1. Create A new file, like so,

 

2. Select The Gradient Tool, and set the options up like this,

http://i231.photobucket.com/albums/ee66/K4rMa2007/gradtool.gif[/img]

and click on the space where the red box is.

 

3. Something like this should come up, Set it out a like I have done, http://i231.photobucket.com/albums/ee66/K4rMa2007/gradeditor.gif[/img]

 

4. Click Ok and draw a line from top to bottom on your Canvas, it should look like this

 

5. Now to add the diagonal lines, Start by creating a 3 pixels by 3 pixels canvas, zoom in to 1600%, get your pencil tool out, make it black and draw a line diagonally across your canvas, like so,

Then in the menu go Edit >> Define Pattern... and give it any name you want. Then go back to your userbar, create a new layer, Select Everything (Ctrl + A) and using the Menu, Edit >> Fill... (Shift + F5) and in the drop down menu labled Use: Select Pattern and in the custom pattern box, select the patter you just made and click OK.

Then from there you just bring down the opacity of the new Scanline layer to something that looks good, your canvas should look something like this,

 

6. Now to find your userbar subject, For this tutorial, I am going to use Microsoft Word, So, I have my image, I just need to put it on the userbar. So, open up your image, and Select All (Ctrl + A), Copy it (Ctrl + C), make a new layer on your userbar and paste the picture onto the new layer and position it on the userbar (I usually position it on the left hand side. Mine now looks like this,

 

7. Time to add some text to this, the font to use is Visitor TT2 (BRK) which you should use at size 13 px and make sure the anti-alias is set to none. Make the text White and set a stroke on the text to 1px Black, and the location as Outside. Type your text on the canvas e.g. 'Microsoft Word User'. This is how mine looks,

 

8. Now we add the elipsis which gives it the 3D look. 1st make a new layer, then Get the elliptical marquee tool out and draw a elipsis from top left to bottom right, then nudge it up with your arrow keys in the keyboard so that half of it is showing, then using the menu, go Edit >> Fill... (Shift + F5) and choose White. Then click OK. After that, reduce the opacity of the layer with the elipsis on to something that looks suitable. Here is how mine looks

 

9. This step is optional. A 1px Border. Make a new layer. Select all (Ctrl + A), and using the menu, go Edit >> Stroke... Make the width 1px and the colour Black and set the location to inside.

 

 

And Tada, you're complete, here is how mine turned out,

 

Enjoy !

 

Ps: Is not my work :P  8) !

[Demonic SouL]

nice guide dude,thanks ;)

[losis]

Very nice :)

[fenik]

most of it i knew, but few info it might helpful. thnx

no i must search for basic toturial about adobe after effects :>

[xKenji]

:o  ty a lot... although i do use the program on http://www.userbars.com/

[cicciopipi]

great ! some photoshop tutorials are always good

[Tomi]

thx this helped me cause i am just newb in photoshop :)

[xPipa]

Very nice tutorial

[Gakon]

WoW Really GoOd..I Managed to do this And I know Nothing about Photoshop..Nice Tutorial brO

[l2lover]

OMG!!!This is no just great...is....Unbelievable!!!!Nice man!!!!

[DeathSoldier]

ye nice guide really helps.. gonna make some userbars :>

[l2lover]

Nice but i didn't see the font that we must use to create the userbar...So download from Here Visitor TT2 font.Also pattern link is dead....so click here...

[Frank]

Nice share man! It is great! I will create one!