[Guide] How to make your own userbars

[XplittR]

How to make your own userbars

Okay I will now demonstrate for you how to make a userbar in small steps with Adobe Photoshop.

This is our goal:


Requirements:
- Adobe Photoshop (I use CS3. Please do not pirate Adobe's products)
- General knowledge in how to use the tools in Adobe Photoshop

Difficulty:
-Novice

Explanations:
- If I use singlequotes ( ' ) then it is to mark a tool.

Step 1: Starting
The size I will have my userbar in is 350x19 pixels.



Step 2: The gradient

This whole step we will be working with one layer, and that is the only one we need for this step. The standard layer is either called "Background" or "Layer 0". Rename it to "Gradient" for simplicity.

Add a simple gradient (If you need help to make your own gradient, look here: How to make your own gradients) that has the color that you are going to use as a main theme.
For Fleud I chose the blue in background of the forum, and the green from the logo.



A tip is to take a screenshot and use the 'Eyedropper' to get the colors.
Use the 'Gradient Tool' to get the gradient on the userbar. You might have to try with different angles and lengths to get your desired result.

Here is my result:


Step 3: The logo

Start off by making a new layer (Shift + Ctrl + N) and renaming it to "Logo". Make sure this is the active layer when you do step 3.

Since Fleud is a Internet Marketing forum, money is a central keyword, so I decided to put some dollars into the userbar, to signalize that.

The image I chose was this:


Then I resized it to fit my userbar (Constrained proportions and set height to 19), and I added it into my userbar.
I added a total of 7 dollars in my userbar, with different angles and placements, using the 'Free transform' tool (Ctrl + T).

If you did like me, and added several copies of the render, then you would have several layers of logos. Mark all of them (Not the Gradient layer) and rightclick and select 'Merge Layers'. Now you may have to rename it "Logo" again.



Step 4: The white circle

Make a new layer (Shift + Ctrl + N) (You should now have 3 layers), and rename it "White circle".

Use the 'Elliptical Marquee tool' (Same spot as 'Rectangular Marquee tool') and mark a circle so that it will cover almost half the userbar, from the top. (see image below)

Then fill this with White. To do this, press "D" to set colors to Black foreground and White background, then press "X" to swap them. Then press Alt + Backspace to fill the selected area with white.



Now, go to the layers palette and set the opacity to about 30% (depending on the colors you have chosen)



Now my userbar looks like this:



Step 5: Making the pattern

Now we are going to add some diagonal lines to our userbar. To do this, we are going to make a 'Pattern'. You do not need to make the pattern more than once. If you have allready done this, skip to step 6.

Save your userbar as a .PSD file (so the layers stay intact) and make a new document (Ctrl + N).
The size I want to use is 3x3 pixels. You can make different patterns when you know how, but for now, use 3x3.



Since this is so small, zoom in to 1600%. Now, make sure that in your layers palette the layer is unlocked and empty. Mine was not at default, so I rightclick and select 'Layer from Background'. Then the lock goes away, and I can mark all the canvas and delete it, to get the White and Grey squares(White and Grey squares indicates transparency).

Then bring your pencil out, and select a 1px pencil, and draw these three dots with Black:



Then click 'Edit' and 'Define Pattern'. Select a name if you want. If you make many patterns, I would suggest a name you remember. If this is your first pattern, and you doubt you will make any more, the name does not matter.

Now you can close the pattern document without saving, as you have now made it into a pattern.

Step 6: Adding the diagonal lines

Now we are going to add the pattern to our userbar. Make a new layer (you know how ) and rename it "Pattern".

This should be the layer sequence:


Get the 'Pattern Stamp Tool' (Same place as 'Clone Stamp Tool') and select a big size and your newly made pattern. Select Black color and make the whole userbar covered by your pattern.

Set the opacity to about 30%.



Step 7: Adding the text

To add the text, I suggest you use a pixelfont, such as this (Visitor). The color I selected was the orange that you find here on Fleud.

Write in size 14, or somewhere near that. If the text is very hard to read, add a 1pixel stroke to it:
Rightclick the layer, and select 'Blending Options'. Select 'Stroke' at the bottom and add these setting:



If you have a darker font, maybe choose a lighter (White?) color, and maybe reduce the opacity. Put the "White Circle" layer in the top, so that it covers the text partially.

Here is mine so far:



Step 8: Adding the border

Make a new layer, and rename it "Border". Make it the top layer and press Ctrl + A to mark everything. Click 'Select', click 'Modify', click 'Contract...'. Contract the selection by 1 pixel, and click Shift + Ctrl + I to mark the opposite. Now you have one pixel in the border marked. Press D to get Black foreground-color and press Alt + Backspace to color it black.

Step 9: Show-off time!

You have now made the userbar complete. If you are not sure about the layer order, here is mine:



Now upload it to a imagesite, like www.tinypic.com and show it off to your friends on Fleud!

Here is the result I ended up with (same as in top):


Credits:
- This guide was soley made by me, XplittR
- Adobe, for making such a wonderful product! Worth buying!

[Wynthar]

Love it XplittR! (You're still putting the images up as of this second... but once you post the images I'll try it out myself.)


Thanks for the wonderful guide!!

Here's my Try!!

[Axe08]

good post, but you could also just use this. It is how i made mine. It is free
Look at the bottom of the page.
http://www.amitysource.com/downloads.php

[XplittR]

I must say that I like to use Photoshop to make userbars, as you can do so much more. What I showed you here is an example. I bet you cannot do what I did with the cash with the automated one? You have much more freedom in Photoshop, and it is easy to do once you have done it once or twice.

But if you do now know Photoshop at all, then your generator may do the trick

[Axe08]

I agree 100% that you can do way cooler stuff with photoshop. And yes you can put pictures on them lol.
It is an alternative to someone with out Photoshop, or doesn't want to take long.

[Marcdk]

Nice guide +Rep. Wont try this, as i have a lot of other things to do, but i'm sure it's helpful for a lot of people!

Thanks

[Reinn]

What about: "Credits to... Reinn for encouraging me in making this guide" ? :wink:

Thanks for the guide!

[X-r]

yeah nice one. to bad i am still not into photoshop, ofc you can create much better stuff then an automated creator but photoshop is such overkill featured you can barely find the pen
btw i added some tags but was only allowed to put 2 :/ (i heard tags are good )

[Wynthar]

Tags ARE good. And you picked two excellent tags for this thread.

[XplittR]

Added some more tags I just forgot

[Wynthar]

Thanks.

(Side note -- we are not using name tags anymore Posts can be searched by clicking the username on the post and select "Find all posts by <name>")

[crazy]

amazing tutorial Thank you .

[Sky_king]

Thank you XplittR, rep for you :]

I'm so gonna try this when photoshop stops being retarded...

[Odyssey]

great guide, very clear!
+1

:S I made the pattern, 3x3 but when I put it on, all that happens when I apply it with the brush is that the image darkens because the pattern is so small! how to I scale the pattern up! I can only change brush size. :S

halp.

Don't double post! Reinn.

[XplittR]

Just make a new pattern, with 6x6 or 9x9, or whatever pleases you, and make the pattern you want Then just "Define Pattern", as my guide says Remember to select the new pattern, so that you do not use the first one again

[Odyssey]

Just make a new pattern, with 6x6 or 9x9, or whatever pleases you, and make the pattern you want Then just "Define Pattern", as my guide says Remember to select the new pattern, so that you do not use the first one again

so there is no other way of resizing the pattern? :/

I tried 12*12 and even that didn't work :/

[XplittR]

Can you post a screenshot of when you are trying to apply it?

[ararura]

Thanks for this lovely guide!
It helped me alot

(Hope you dont get mad that I almost made a same like you )

+rep

[Reinn]

Thanks for this lovely guide!
It helped me alot

(Hope you dont get mad that I almost made a same like you )

+rep

Use the Visitor font, the one everyone use on Userbars, and it will be perfect

[Sky_king]

Thanks for this lovely guide!
It helped me alot

(Hope you dont get mad that I almost made a same like you )

+rep

Awesome! Altough you should try to get the black border around it ^^