PDA

View Full Version : Userbar Tut

Innes
18-03-2007, 08:01 PM
This tut will show you how to make user bars like this :

http://img167.echo.cx/img167/6927/final9sb.jpg

1.Open up A new doc. size 350x19.
2.get yourself a logo choose colors.
3.With the colors u chose, make a gradient line till you get desierd effect.
4.
http://img167.echo.cx/img167/6485/step19ri.jpg

5.Get Your logo,Put it on the bar,I put it on the left but you can put it any where you want
6.
http://img167.echo.cx/img167/3479/step21od.jpg

7.Now the text, use a small pixel font, I used visitor Right click on the text layer, click blending options, color overlay and set it as white, stroke set it as black, do what you want but thats the most common.

8.
http://img167.echo.cx/img167/346/step33je.jpg

9.Get the elliptical marqee tool and highlight the top half. These two steps are not required, it just gives a shine to the top part
10.
http://img167.echo.cx/img167/3097/step40mr.jpg

11.GO->SELECT->FEATHER and set it to 10
12.now get the gradient tool and change the pallet coulors to the same as highligted then drag the gradient down or up which ever suits you.
13.
http://img167.echo.cx/img167/9002/step51he.jpg

14.now put in some scan lines and set opticity to 10-20 whatever is good
15.and finaly press ctrl + a and go to edit->stroke and make a 1 pxl border.
16.Final
http://img167.echo.cx/img167/6927/final9sb.jpg


there you go.
Demon
18-03-2007, 08:03 PM
Cool, nice tut, it will come in handy. :)
Mazzy
18-03-2007, 08:05 PM
You all Love Zoidberg !
The Meanmachine
18-03-2007, 08:44 PM
Removed - Cat
A quick attempt by me, took less than a min lol.
Demon
18-03-2007, 08:45 PM
Removed. - Cat
A quick attempt by me, took less than a min lol.

Nice try :p :D

--

Think I'm gona go try make one now :p

--

How do I put Scan Lines in? :D

--

Well I couldn't do scan lines, so just used some pattern.

http://i16.tinypic.com/30m795y.jpg
Pirate Balloon
18-03-2007, 09:18 PM
Hhaa, that's great, although a little blurred.
Demon
18-03-2007, 09:23 PM
Yeah, I used the exact same font as Innes but it looks shite. =/
Bonzo
18-03-2007, 10:42 PM
Innes what text did you use on your examples? is it a default font or do you have to download it from interweb?
Demon
18-03-2007, 11:53 PM
7.Now the text, use a small pixel font, [B]I used visitor Right click on the text layer, click blending options, color overlay and set it as white, stroke set it as black, do what you want but thats the most common.


There you go. (http://www.dafont.com/search.php?psize=m&q=visitor) :p :D
Bonzo
19-03-2007, 12:19 AM
There you go. (http://www.dafont.com/search.php?psize=m&q=visitor) :p :D
Thanks Demon, been looking for text like that for ages, all the default and other downloaded text i tried looked crap. Edit: Here's mine, minus Scan Lines. Not bad considering my photoshop skills are appauling.
http://img402.imageshack.us/img402/2772/givemescanlinesul1.jpg (http://imageshack.us)
Innes
19-03-2007, 09:33 AM
Nice try :p :D

--

Think I'm gona go try make one now :p

--

How do I put Scan Lines in? :D

--

Well I couldn't do scan lines, so just used some pattern.

http://i16.tinypic.com/30m795y.jpg


to make Scan lines:

1. open a new transparent document (9x9)px.

2. Get Pencil tool at 1px, (ZOOM IN) make a line from the bottem left corner to the top right.

3. Click: Edit > Define Pattern > call it scan lines.

voila ;)
The Meanmachine
19-03-2007, 10:06 AM
When making scan lines, they dont have to be diagonal like that either. You can have them going left to right, up and down or whatever you want to try.

I cant beleive someone complained about my John Cleese userbar lol. What next, they going to complain about my sig of the parrot sketch? lol
Demon
19-03-2007, 01:46 PM
to make Scan lines:

1. open a new transparent document (9x9)px.

2. Get Pencil tool at 1px, (ZOOM IN) make a line from the bottem left corner to the top right.

3. Click: Edit > Define Pattern > call it scan lines.

voila ;)

Nice one Innes!

--

Haha, dumb question...How do I then put these into my Userbar? :P
Retro
19-03-2007, 01:51 PM
Nice tut Innes, simple.

Already knew how to do these but nice all the same.


You should check oout www.dreamconcept-gfx.com


Retro
The Meanmachine
19-03-2007, 02:38 PM
Demon, you click paint bucket, then along the top where it says foreground, change it to patten. Then you will def want to play around with the blending, otherwise you wont even be able to see the image properly anymore
Demon
19-03-2007, 02:38 PM
Meh, atleast this is better than my first try. :p :D

http://i14.tinypic.com/29utys2.jpg
Retro
19-03-2007, 03:05 PM
http://img157.imageshack.us/img157/2449/userbarsi9.jpg
Innes
19-03-2007, 05:35 PM
nice user bars - i like the MB360 one
Mazzy
19-03-2007, 06:42 PM
Dont we have one of those allready?
The Meanmachine
19-03-2007, 07:35 PM
There was originaly a comp on the old site for one. But it was animated so I guess its not aloud any more lol
carocat
19-03-2007, 08:11 PM
There may well be a competition for this coming up soon, amongst other design competitions.

Get some practice guys. :)

Oh, btw, only 3 days left for the SOTF competition.