XplittR
27-05-2009, 22:23
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:
http://i39.tinypic.com/29ers3.jpg
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.
http://i42.tinypic.com/2qjw3lw.jpg
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 (http://www.fleud.com/guide-make-your-t248.html)) 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.
http://i42.tinypic.com/15nvhqv.jpg
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:
http://i40.tinypic.com/2925f00.jpg
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:
http://naijapinoy.files.wordpress.com/2009/01/100-dollar.jpg
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.
http://i43.tinypic.com/2guwg1y.jpg
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.
http://i43.tinypic.com/2bdvgj.jpg
Now, go to the layers palette and set the opacity to about 30% (depending on the colors you have chosen)
http://i43.tinypic.com/317k2f9.jpg
Now my userbar looks like this:
http://i42.tinypic.com/9vh0sx.jpg
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.
http://i43.tinypic.com/2nlrcec.jpg
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:
http://i40.tinypic.com/2r5vjit.jpg
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 :P) and rename it "Pattern".
This should be the layer sequence:
http://i41.tinypic.com/288s87b.jpg
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%.
http://i40.tinypic.com/xga1c8.jpg
Step 7: Adding the text
To add the text, I suggest you use a pixelfont, such as this (Visitor) (http://www.dafont.com/visitor.font). 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:
http://i42.tinypic.com/2qjaem9.jpg
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:
http://i39.tinypic.com/5vda9h.jpg
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:
http://i43.tinypic.com/5pjwco.jpg
Now upload it to a imagesite, like www.tinypic.com (http://www.tinypic.com) and show it off to your friends on Fleud! :D
Here is the result I ended up with (same as in top):
http://i39.tinypic.com/29ers3.jpg
Credits:
- This guide was soley made by me, XplittR
- Adobe, for making such a wonderful product! Worth buying!
Okay I will now demonstrate for you how to make a userbar in small steps with Adobe Photoshop.
This is our goal:
http://i39.tinypic.com/29ers3.jpg
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.
http://i42.tinypic.com/2qjw3lw.jpg
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 (http://www.fleud.com/guide-make-your-t248.html)) 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.
http://i42.tinypic.com/15nvhqv.jpg
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:
http://i40.tinypic.com/2925f00.jpg
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:
http://naijapinoy.files.wordpress.com/2009/01/100-dollar.jpg
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.
http://i43.tinypic.com/2guwg1y.jpg
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.
http://i43.tinypic.com/2bdvgj.jpg
Now, go to the layers palette and set the opacity to about 30% (depending on the colors you have chosen)
http://i43.tinypic.com/317k2f9.jpg
Now my userbar looks like this:
http://i42.tinypic.com/9vh0sx.jpg
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.
http://i43.tinypic.com/2nlrcec.jpg
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:
http://i40.tinypic.com/2r5vjit.jpg
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 :P) and rename it "Pattern".
This should be the layer sequence:
http://i41.tinypic.com/288s87b.jpg
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%.
http://i40.tinypic.com/xga1c8.jpg
Step 7: Adding the text
To add the text, I suggest you use a pixelfont, such as this (Visitor) (http://www.dafont.com/visitor.font). 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:
http://i42.tinypic.com/2qjaem9.jpg
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:
http://i39.tinypic.com/5vda9h.jpg
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:
http://i43.tinypic.com/5pjwco.jpg
Now upload it to a imagesite, like www.tinypic.com (http://www.tinypic.com) and show it off to your friends on Fleud! :D
Here is the result I ended up with (same as in top):
http://i39.tinypic.com/29ers3.jpg
Credits:
- This guide was soley made by me, XplittR
- Adobe, for making such a wonderful product! Worth buying!