How to make a userbar using GIMP
Fan Kreations
Pages: 1
How to make a userbar using GIMP
0
posted04/07/2012 06:05 PM (UTC)by

About Me


Member Since
04/03/2012 01:51 PM (UTC)
What you should do before starting making a userbar:
1. You need to download and install the font called "Visitor TT2 (BRK)", you can download it from here: www.fontstock.net/5972/visitor-tt2--brk-.html
2. You need to make a pattern for GIMP. Make a new image, size 6px X 6px with transparent background. Then zoom up and draw a line form one edge to other like on the picture below. Copy and paste 2 more copies and place them as shown on the picture below.
Save it as a GIMP pattern (.pat) in the folder with your GIMP patterns. If you don't know where it is go to File>Preferences>Folders>Patterns. It will show you two folders and any of them will work.
Okay, now we can start making our userbar. Make a new image sized 350px X 19px with transparent background. I know it shows Width: 300px, I chose the wrong size by an accident.
After you need to choose two colors. Primary one has to be darker that the secondary.
Now choose the "Blend tool" and use it to fill the background with gradient. Draw a straight line from the top downwards. You should get something like this:
Now make a new layer. Choose "Bucket fill tool" and tick "Pattern fill" and choose the pattern you made earlier.
Fill the layer with it. The pattern might be too black-ish, so just change layer's opacity to 50% (or choose it by yourself, whatever you like). This is what you should get after:
Now choose your design, but note it's background must be transparent if you copy it form other image. If it's not here's a good video shows how to cut the image: http://www.youtube.com/watch?v=rw9zbeHEXY8
Make a new layer and paste/draw your design on it. If it is too big, choose the "Scale tool" click on selection of your design and scale it. You can scale it by pulling the edges or by choosing width and height on the panel which pops out. If you are choosing second choice, 'chain' width and height together:
Make a new layer and choose "Text tool". Choose font which you downloaded earlier "Visitor TT2 (BRK)" and small size, 12 will be perfect. Now click anywhere and type in your text, merge it down to the new layer afterwards. Then position it with the "Move tool" wherever you want.
To make a border around a text zoom in and select "Pencil tool". Choose small size like 0.06 and draw the border around the text leaving out the corners like this:
Next make a new layer (AGAIN?!) and choose the "Eclipse select tool" and select the upper part of the userbar.
Now fill it in with solid white and choose the opacity of layer about 20% (again, it's optional). You should get something like this:
For the last step you need to make the border around your userbar. Make a new layer (Oh God!), zoom in, choose the "Pencil tool" and draw the border around your userbar. Here's a tip: if you don't want to spend time drawing it, just draw a line, copy and paste it and position it with a "Move tool".
Now you only need to merge all the layers down and save it as PNG file (.png) or anything else, but PNG is very good for web posting and it has good quality. You will see a message saying that you need to export the image. Click "Export" and tick everything. So this is what I got:
I chose the wrong width by an accident (It's 300px). But my userbar below is the right width.
I hope this was helpful. This is my first tutorial. I just saw that many people are using GIMP, so I decided to post this tutorial.
1. You need to download and install the font called "Visitor TT2 (BRK)", you can download it from here: www.fontstock.net/5972/visitor-tt2--brk-.html
2. You need to make a pattern for GIMP. Make a new image, size 6px X 6px with transparent background. Then zoom up and draw a line form one edge to other like on the picture below. Copy and paste 2 more copies and place them as shown on the picture below.

Save it as a GIMP pattern (.pat) in the folder with your GIMP patterns. If you don't know where it is go to File>Preferences>Folders>Patterns. It will show you two folders and any of them will work.
Okay, now we can start making our userbar. Make a new image sized 350px X 19px with transparent background. I know it shows Width: 300px, I chose the wrong size by an accident.

After you need to choose two colors. Primary one has to be darker that the secondary.

Now choose the "Blend tool" and use it to fill the background with gradient. Draw a straight line from the top downwards. You should get something like this:

Now make a new layer. Choose "Bucket fill tool" and tick "Pattern fill" and choose the pattern you made earlier.

Fill the layer with it. The pattern might be too black-ish, so just change layer's opacity to 50% (or choose it by yourself, whatever you like). This is what you should get after:

Now choose your design, but note it's background must be transparent if you copy it form other image. If it's not here's a good video shows how to cut the image: http://www.youtube.com/watch?v=rw9zbeHEXY8
Make a new layer and paste/draw your design on it. If it is too big, choose the "Scale tool" click on selection of your design and scale it. You can scale it by pulling the edges or by choosing width and height on the panel which pops out. If you are choosing second choice, 'chain' width and height together:

Make a new layer and choose "Text tool". Choose font which you downloaded earlier "Visitor TT2 (BRK)" and small size, 12 will be perfect. Now click anywhere and type in your text, merge it down to the new layer afterwards. Then position it with the "Move tool" wherever you want.

To make a border around a text zoom in and select "Pencil tool". Choose small size like 0.06 and draw the border around the text leaving out the corners like this:

Next make a new layer (AGAIN?!) and choose the "Eclipse select tool" and select the upper part of the userbar.

Now fill it in with solid white and choose the opacity of layer about 20% (again, it's optional). You should get something like this:

For the last step you need to make the border around your userbar. Make a new layer (Oh God!), zoom in, choose the "Pencil tool" and draw the border around your userbar. Here's a tip: if you don't want to spend time drawing it, just draw a line, copy and paste it and position it with a "Move tool".

Now you only need to merge all the layers down and save it as PNG file (.png) or anything else, but PNG is very good for web posting and it has good quality. You will see a message saying that you need to export the image. Click "Export" and tick everything. So this is what I got:

I chose the wrong width by an accident (It's 300px). But my userbar below is the right width.
I hope this was helpful. This is my first tutorial. I just saw that many people are using GIMP, so I decided to post this tutorial.


About Me


0

0
Good tutorial!
Now if only I can overcome my terrible procrastination...
Now if only I can overcome my terrible procrastination...


About Me


0
Hahah, often have the same problem as you!
Anyways, thanx for your rating!
Pages: 1
© 1998-2025 Shadow Knight Media, LLC. All rights reserved. Mortal Kombat, the dragon logo and all character names are trademarks and copyright of Warner Bros. Entertainment Inc.