Help - Search - Members - Calendar
Full Version: Custom Userbar Tutorial
Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > Photoshop Tutorials
ArsonistX
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. smile.gif

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.



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.




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%.




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:
Scythar
this has been a very very popular tutorial , a very very long time ago bigwink.gif

do a search on this forum.
Jonhc
Do people still use Userbars?

I normally see them around a lot just saying 'Userbars Suck' haha

But good job on the tutorial, easy to follow.
Tech Advance
Excellent tutorial, this is exactly what i was looking for.. I knew roughly how to make a userbar as its quite simple but it was the shine i couldnt quite master as im new to photoshop.

A lot of the tutorials are done in older versions of photoshop and are not quite right.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.