Jump to content


Photo
* * * * - 4 votes

User Bar - Tutorial


  • Please log in to reply
94 replies to this topic

#1 TwyLight

TwyLight

    Young Padawan

  • Members
  • Pip
  • 51 posts
  • Location:The Netherlands

Posted 26 May 2005 - 01:29 PM

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
I'v seen this tutorial on many other sites and most of the time, without credits to me or pixel2life.
You can use this tutorial on youre site, but please! give me credits for it and put the original source with the tutorial
TwyLight

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


Step 1
Go to "File -> New.." and open a new file of 350 x 20 px

Posted Image



Step 2
Fill the background with a color you want, in this tutorial we take the Pixel2Life layout colors.
Thats #3093cc.

Posted Image



Step 3
As you see, in the upper left corner there is a small piece of gradient,
Thats what we going to make. Make a new layer, and choose the gradient tool.
Take these options:

Posted Image

If you did it all the way i said it would look like this:

Posted Image



Step 4
Again, make a new layer,

Posted Image



Step 5
Ok, We have the background, now we are going to put in the logo
Here you will find the logo.
When you put it in, it will have to look like this:

Posted Image



Step 6
Ok, now we are going to put in the famous stripe pattern.
Again, go to "File -> New.." But this time fill in 5 x 5 px. Like this:

Posted Image

Now zoom in 1600%, Take pencil tool and choose the color: #004f7c.
and put 5 pixels like this:

Posted Image

Now go to "Edit -> Define Pattern.." and save youre pattern.
Now you can trow away the document becouse you don't need it anymore.



Step 7
Ok, back to the signature. Make a new layer and go to "Edit -> Fill.."
Now on youre new layer go to "Opacity" and fill in 10%, It will look like this:

Posted Image



Step 8
Now we gonna put in some words, this tme we are taking "Pixel2Life user"
The font we will use wil just be verdana 8px, It will look like this:

Posted Image



Step 9
Now we are going to give it a "glassy look", You don't need to do this, It's just what you like.
Make a new layer and fill it like this:

Posted Image

Now take "Elliptical Marquee Tool" And cut out a round piece. Like this:

Posted Image

Now fill in Opacity 15% and it will look like this:

Posted Image



Step 10
Now we are going to add a border,
Make a new layer and take pencil tool with the color: #004f7c
zoom into a corner, and put youre border. Like this:

Posted Image

Now save "File -> Save As.." And youre User-Bar is finished!



This is what i would look like at the end

Posted Image



TwyLight.. (This is my first english tutorial, please correct my bad gramma) ;)

btw: here you will find a page i created for adding signatures, it's dutch but it aint so hard to understand..

Edited by TwyLight, 23 February 2006 - 03:13 PM.


#2 AssumeFalseGrace

AssumeFalseGrace

    Young Padawan

  • Members
  • Pip
  • 6 posts

Posted 26 May 2005 - 03:39 PM

Cool! I'm a newbie at Photoshop! This is an awesome tut!! I'll HAVE To try it out sometime ;) Thanks!!

#3 TwyLight

TwyLight

    Young Padawan

  • Members
  • Pip
  • 51 posts
  • Location:The Netherlands

Posted 27 May 2005 - 02:57 AM

Cool! I'm a newbie at Photoshop! This is an awesome tut!! I'll HAVE To try it out sometime :lol: Thanks!!

np :hi:

#4 TwyLight

TwyLight

    Young Padawan

  • Members
  • Pip
  • 51 posts
  • Location:The Netherlands

Posted 29 May 2005 - 02:22 PM

Why is nobody reply'ing :)

#5 andY`

andY`

    Young Padawan

  • Members
  • Pip
  • 41 posts
  • Location:Sunderland, UK.

Posted 03 June 2005 - 03:54 AM

good tutorial..

and what VS are you using? :P

#6 Sinny

Sinny

    Young Padawan

  • Members
  • Pip
  • 144 posts

Posted 03 June 2005 - 04:27 AM

That looks great, sweet tutorial! I will try it later and post my result! :P

Edit: Here is my result

Posted Image

Thank you for the great tutorial! :)

#7 Prelithe

Prelithe

    Young Padawan

  • Members
  • Pip
  • 50 posts

Posted 04 June 2005 - 01:33 AM

nice tut, but there is a faster way to do the border:

1.Create a New layer on top
2. Press Ctrl+A and goto Edit>Stroke
3.Set width to 1 px and choose inside

hope ya update your tut with this ^^

#8 TwyLight

TwyLight

    Young Padawan

  • Members
  • Pip
  • 51 posts
  • Location:The Netherlands

Posted 04 June 2005 - 06:09 AM

good tutorial..

and what VS are you using? :)

It's Luna Element 3. :D

#9 Al3x

Al3x

    Young Padawan

  • Members
  • Pip
  • 179 posts
  • Location:Bradford, UK

Posted 06 June 2005 - 10:17 AM

Nice simple tutorial. I've seen many versions like this.

#10 Armada

Armada

    P2L Jedi

  • Members
  • PipPipPip
  • 591 posts
  • Location:Scotland

Posted 10 June 2005 - 10:41 AM

ok....i have a problem at step 6....when i go to make the pattern and click with the pencil nothing comes up....any ideas?

#11 /quit

/quit

    P2L Che

  • Members
  • PipPipPipPip
  • 1,016 posts
  • Gender:Male
  • Location:New Hampshire

Posted 10 June 2005 - 11:44 AM

You should use the pixel2life gradient to make it look better, and use bit dust instead of w.e font your using. Good though.

#12 maaalin

maaalin

    Young Padawan

  • Members
  • Pip
  • 27 posts

Posted 11 June 2005 - 02:14 PM

nice tut.
although i still dont really know what user bars are lol
never heard of em before, but this is what i got:

Posted Image
Posted Image
Posted Image

#13 oliver.m

oliver.m

    Young Padawan

  • Members
  • Pip
  • 84 posts
  • Location:Bedfordshire, United Kingdom
  • Interests:Web Design, Graphic Design and flash multimedia applications. I also like cars and i am a sprint/marathon canoeist/kayaker.

Posted 12 June 2005 - 06:20 AM

Great Tutorial...this is what i got...

Posted Image

#14 Soccer Nut

Soccer Nut

    Young Padawan

  • Members
  • Pip
  • 26 posts
  • Location:Surrey, BC, Canada
  • Interests:Soccer, GFX, Photoshop.

Posted 15 June 2005 - 11:27 PM

Posted Image

Posted Image

I did two...

#15 Armada

Armada

    P2L Jedi

  • Members
  • PipPipPip
  • 591 posts
  • Location:Scotland

Posted 16 June 2005 - 10:26 AM

nice tut :)

#16 Regulus

Regulus

    Young Padawan

  • Members
  • Pip
  • 94 posts

Posted 18 June 2005 - 05:59 PM

Posted Image

w00t, that's an awesome tut, man!

#17 konig

konig

    Young Padawan

  • Members
  • Pip
  • 3 posts

Posted 19 July 2005 - 06:49 AM

hi guys

how do I insert the logo in my bar,STEP 5???

I didn't understand...

1) I saved the logo
2) I opened the logo
3) I drag and drop in my bar but doesn't work,impossible!!, why? ;)

tnxs....

#18 albinoAZN

albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 19 July 2005 - 07:21 AM

try copy and paste. Open the logo, press control+a, then control+c. then open the user bar, and press control+v.

#19 konig

konig

    Young Padawan

  • Members
  • Pip
  • 3 posts

Posted 19 July 2005 - 10:52 AM

try copy and paste. Open the logo, press control+a, then control+c. then open the user bar, and press control+v.


gr8, it was so easy....

tnxs guy

bye

#20 albinoAZN

albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 19 July 2005 - 03:50 PM

glad you got it :)




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users