Jump to content

Tutorial for userbars with photoshop !


Recommended Posts

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, new.gif


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

width=640 height=30http://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, width=414 height=480http://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 thisstep4-1.gif


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,3x3.gif

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, step5-1.gif


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, step7-1.gif


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,finished.gif


Enjoy !


Ps: Is not my work :P  8) !

Link to comment
Share on other sites

  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

AdBlock Extension Detected!

Our website is made possible by displaying online advertisements to our members.

Please disable AdBlock browser extension first, to be able to use our community.

I've Disabled AdBlock