Userbar Tutorial - Photoshop CS3

arsonistx

New Member
Messages
308
Reaction score
0
Points
0
Hello everyone, I'm going to be writing a tutorial on how to make custom userbars here! Please enjoy and comment on how I've done with detail and everything. :)

Here it goes:

Step 1)
  1. Open up Photoshop CS3
  2. Create a new canvas with the dimensions 350x19 (width x height).
  3. Make the background transparent.
zkj0c4.gif


Step 2)
  1. Use the gradient tool to make the background fade from one color to the other.
  2. Create another new document with the dimensions 3x3. Make sure the background is transparent.
  3. Zoom in as far as you can. Use the pencil tool on the newest document and draw a diagonal line going from the top right to the bottom left.
2vx0kqx.gif

ru2ptu.gif


Step 3)
  1. Click Edit > Define Pattern and save the pattern with the name 'scanline'. -No quotations.
  2. Go back to your userbar, create a new layer, and click Edit > Fill > Pattern from the dropdown list, and select the scanline pattern. Change the opacity of the fill to 25%.
  3. Use your elliptical marquee tool to select the top half of the userbar, with the sides slanting up to the corners. Click Edit > Fill > Color from the dropdown list, and choose white (#ffffff). Leave the opacity at 25%.
11blwxz.gif

e9w951.gif


Step 4)
  1. Add a logo to the left side of the userbar, anything you like. I used the Xanthom Designs logo from their website.
  2. Add some pixel font text to the right side with whatever you want. I chose Xanthom Designs Administrator.
  3. Give your text a 1px, black stroke with the opacity turned down to 50%.

Step 5)
  1. Use your rectangle marquee tool to select the entire canvas after creating a new layer on your document.
  2. Click Edit > Stroke and use 1px as the size, black (#000000) as the color, and the location as Inside.
  3. Save the document as userbarname.gif. CompuServe GIF imagetypes are the best for userbars.

And there you have it, your own custom userbar!
My results:
1z6hj8.gif
 

GamingX

Executive Team
Messages
6,355
Reaction score
3
Points
38
Nice Tutorial. Good for those who can't afford to pay for userbars.
 

manzoor

New Member
Messages
430
Reaction score
0
Points
0
Hey Great ! Tutorial.
Will this work in Photoshop 7 ?
 

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
nice tut! props! short and to teh point
 

QuwenQ

Member
Messages
960
Reaction score
0
Points
16
Unless Photoshop 7 doesn't have all of the same tools as CS3.
Don't worry. They add 5Mb to the install package, add a distortion, change around the menus, and call it a release. It'll work.
 

QueenHawkeye

Member
Messages
291
Reaction score
0
Points
16
Can you tell us what the font name that you used in the tutorial is, and where to download it? It might be helpful to some people who want to know.
 

manzoor

New Member
Messages
430
Reaction score
0
Points
0
hmm sorry for this silly question im new to photoshop so I don't know where's the pencil tool xD

and how can i zoom more then 1600% ?

EDIT:

and can some explain the step 4 and 5 more clearly ? with a step-by-step instruction ?
 
Last edited:

DarkDragonLord

New Member
Messages
782
Reaction score
0
Points
0
zoom in is ctrl + the key with =+
zoom out is ctrl + the key with -_

pencil tool.. its lecated in that left tool bar, in the right column
 

manzoor

New Member
Messages
430
Reaction score
0
Points
0
Thanks for telling me where is the pencil tool

Btw I know how to zoom but I can't zoom more then 1600% where as I saw a guy zooming to 2000%
 
Top