Jump to content

- - - - -

Custom Userbar Tutorial

  • Please log in to reply
3 replies to this topic

#1 ArsonistX


    Young Padawan

  • Members
  • Pip
  • 9 posts

Posted 12 November 2007 - 02:27 PM

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. :P

Here it goes:

Step 1)
  • Open up Photoshop CS3
  • Create a new canvas with the dimensions 350x19 (width x height).
  • Make the background transparent.
Posted Image

Step 2)
  • Use the gradient tool to make the background fade from one color to the other.
  • Create another new document with the dimensions 3x3. Make sure the background is transparent.
  • 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.
Posted Image
Posted Image

Step 3)
  • Click Edit > Define Pattern and save the pattern with the name 'scanline'. -No quotations.
  • 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%.
  • 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%.
Posted Image
Posted Image

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

Step 5)
  • Use your rectangle marquee tool to select the entire canvas after creating a new layer on your document.
  • Click Edit > Stroke and use 1px as the size, black (#000000) as the color, and the location as Inside.
  • 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:
Posted Image

#2 Scythar


    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,888 posts
  • Gender:Male
  • Location:Antwerp (Belgium)

Posted 13 November 2007 - 05:45 AM

this has been a very very popular tutorial , a very very long time ago :P

do a search on this forum.

#3 Jonhc


    Young Padawan

  • Members
  • Pip
  • 206 posts
  • Gender:Male
  • Location:Durham (UK)
  • Interests:Web design, Web Standards, BMX, Hardcore

Posted 23 December 2007 - 07:50 PM

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.

#4 Tech Advance

Tech Advance

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 15 January 2008 - 12:53 PM

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.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users