GIMP 2.4 userbar tutorial,with Font tutorial included

[Raditz]

Hello and welcome to my first tutorial.
This is a userbar tutorial,which includes "how to download font" and "scan line" tutorial.

Part I: Font Tutorial

Part II: Scan line Tutorial

Part III: Userbar Tutorial


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


Part I: Font tutorial (please do this first if you don't have Visitor TT1 BRK font ,mostly used for Userbars)

1. Go here
http://www.dafont.com/font.php?file=visitor&page=1&nb_ppp_old=10&text=Visitor+TT1+BRK&nb_ppp=10&psize=m&classt=alpha

now click the download button

http://i2.photobucket.com/albums/y38/Tom_B_b/fonttut1.jpg

then do, open as compressed folder and click ok.

http://i2.photobucket.com/albums/y38/Tom_B_b/fonttut2.jpg

2. Once the file is done downloading it will automatically open,if it doesn't just click the open.

Then after it's open click, extract all files

http://i2.photobucket.com/albums/y38/Tom_B_b/fonttut3.jpg

Then after it's done extracting,select show extracted files.And click finish.

http://i2.photobucket.com/albums/y38/Tom_B_b/fonttut4.jpg

3. Now a new window will show up.It will have the fonts you downloaded.Right click on one and do copy.

http://i2.photobucket.com/albums/y38/Tom_B_b/fontut5.jpg

4. Then go to start>control panel,look for the Font Folder,then click on it

http://i2.photobucket.com/albums/y38/Tom_B_b/fontut6.jpg

5. Now just paste the font you copied and your done.

http://i2.photobucket.com/albums/y38/Tom_B_b/fontut7.jpg

*note* you have to close GIMP,and open it again to use the font.Or you can just click rescan list in the font tab.

Font tutorial is finished :o


Part II Scan line tutorial (you need it if you want to make a userbar)

1. Open GIMP,then go to File,then click New.Then do everything this Screen Shot shows.

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut1.jpg

2. Now zoom in to 800%

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut2.jpg

3. Then click on the pencil tab,and click on, pixel (1x1 square).It's next to the green pepper

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut3.jpg

4. Click on all the gray squares with the pencil till all of them are black.

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut4.jpg

after you do that,your result will look like this

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut5.jpg

5. Then go to file>save as>.Put the name Scanlines.Pat (make sure you put the pat,it's very importent).

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut6.jpg

6. Go to your gimp folder,if you don't know where it is,go to "My computer" and click on the search tab and type GIMP.Now something should come as GIMP 2.0 .Click that,then go to Share>Gimp>2.0>and click on patterns.

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut7.jpg

7. Go to the folder where you saved the scanlines,and right click on it,and do copy

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut8.jpg

8. Now you just paste it in the patterns and your done

http://i2.photobucket.com/albums/y38/Tom_B_b/scantut9.jpg

9. Open gimp,click on the bucket fill tool>Pattern fill>click on the pattern>click on your scanlines>and do fill whole area,or fill similar colors,up to you.
*note* you have to close gimp and open it again to be able to use scan lines.

[color=red]
Part III Userbar Tutorial (do this after you did the Font and Scan lines)

we will be making this userbar

http://www.signaturebar.com/uploads/images/27794.png (http://www.signaturebar.com/)

the image we will use is this one

http://i2.photobucket.com/albums/y38/Tom_B_b/userlogo.png

if you want to use it also,just right click on it,then do save image as.If you do like that,the background will still be transparent.

We begin now

1.Go to File>New .Size 350x19

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut1.jpg

2.Chose the colors you want to use for your userbar,then click on the blend tab

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut2.jpg

3.Make a straight line,by holding down the ctrl key on your keyboard

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut3.jpg

4.Open the layers tab,by clicking on it. Dailogs>Layers or hold down ctrl and L.
http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut4.jpg

5.Now that the layers tab is open,click new layer.Name the new layer Scan Lines.Size should be the same as your userbar 350x19,and check the transperancy button,if it's not checked.Then click ok

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut5.jpg

5.Now assuming you already made your scan lines.Go to the Bucket Fill Tab,check the fill with pattern.Then click on the pattern,look for your scanlines,then click on it.After you selected your scanlines,check Fill whole selection.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut6.jpg

now go to your userbar,and click on it.Then lower the opacity to 30,in your layers tab.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut7.jpg

6.Now make another new layer,called it ellipse.Size should be 350x19,fill with transparency. After you finished making the new layer.Go to Tools>Selection tools>and click on the ellipse tool.Or just press E on your keyboard :roll:

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut8.jpg

then after you clicked on the ellipse tool.Do what is shown in the screen shot

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut7-8.jpg

then click on your Brush tool,make sure your color is white,Then color the whole area you just elipsed.Then lower the opacity for your elipse layer,in the layers box to 50.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut9.png

This gives the userbar a 3dish effect.
Now go to open as layers>click on the picture you want to use.Then place it where you want in your userbar.

7.Now click on the text Tab and find the visitor font you downloaded (click on it after you find it :o ) make the font size 10.And the font color white.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut9-10.jpg

Now type in your text in the userbar,what ever you want to say.I'm going to put Gimp User.Now make a new layer,call it black.Size should be 350x19,check with transparency (if it's not checked already).Once you did this,move the Black layer,below your text.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut10.jpg

then right click on your text,and do alpha to selection.

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut11.jpg

8.Then select your black layer,go to Select>Grow

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut12.jpg

grow by 1 pixel.

9.Now do select all (ctrl>A)once your do that,it should like this

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut13.jpg

8.Make a new layer,call it border.Settings for it should be 350x19,make sure it's transparent.Then after you did ctrl>A, go to Edit>stroke selection.Put the settings shown here

http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut15.jpg

then click stroke.
Your result will look like this
http://i2.photobucket.com/albums/y38/Tom_B_b/userbartut.png

I hope you enjoyed this tutorial (because i didn't) lol just kidding.Make some great userbar's folks

:D

[Danny]

Thx Rad i start to do it when i am done with my new sig i am working on :D

[Etha]

WOW. What a tut!! Great job, man!

[Danny]

Of Course Its Unbelivble Like 1000 SigBar!
Record Tut!Great Help with new! You rock Rad! :D

[Raditz]

ahh :) it's nothing,i know how hard it is for us noobs to do this stuff :( once i finish this,and make a signature i said i would make,i'm going to remake the tutorials noobie made...
again thanks etha :D

just post your results if you do it
And i finished putting the whole tutorial,enjoy :D

[Storm]

ty its a great tut this is my first user bar thingy w/e there called lol
http://img514.imageshack.us/img514/7047/narutofanlt9.png
anyone can take it i added a graidiant map and changed it a bit cause it didn't look like yours and when i changed it it didn't look dat good so i added a graidiant map http://img514.imageshack.us/img514/7047/narutofanlt9.png

[Raditz]

heheh nice :D but no border?

[Storm]

oh right whops fix it on weekend hopefully

[Storm]

fixed it http://img502.imageshack.us/img502/4652/narutofannx1.png

[Raditz]

Much better,but what of type of text is that?just curious...

[Storm]

um dont know will chack in sec

[Storm]

its Rockwell Extra Bold, Ultra-Bold cartoonie like twxt like porkies

[Raditz]

ahh ok thanks

[SUPER CHAMP]

Sorry for this bump i was looking for this tut only don't ban me for bumping .... sry i wanted to make a Ubar.

[tcz]

great tut! thanks so much for the help