[katos]

Bought to you by: http://marshdesigns.co.uk/blog/

How to make Forum Rank bars.
In this tutorial, we will be looking at how to make Forum rank images that will leave your users wanting to climb up the ranks towards those sparkling gold badges! To begin with, please ensure that you have Photoshop installed and ready to use. We will be using Photoshop CS6 for this tutorial, but any version of Photoshop will work. You can download a trial of photoshop from here: Photoshop Trial
Let us begin!
To begin with, we will go ahead and make a new file. We want our canvas size to match the size of the forum that we’re developing for. A good tip I can give here is to inspect the size of the box using developer tools. For example, on Google Chrome, we can see this:



However for this tutorial I will actually be making a larger forum rank.
For myself, I have decided that I will use the size : 169 x 49 as this will better suit my requirements for the development of ranks for a friend of mine. Once you have decided what size you want, it’s time to begin! Fire up Photoshop and create a new file with your desired canvas size:



Hit ok to begin.
The basic foundations
Next, what you want to do is to create a small rounded rectangle. Personally speaking I like to leave myself room around the edges, in case of the need to trim, and also for shadow effects, but this is up to you. I have decided to use the colour: #6a1c1c for my “Administrator” rank box, but this colour will be changed later using adjustment tools.
To create your rectangle, simply navigate to the toolbox, and select the rectangle tool. If you want a rounded rectangle (like me) then right click this button and select “rounded rectangle”
http://puu.sh/m4HG0/71b45a1d7d.png



The short-cuts for these are:
Rectangle tool : U
Draw out your rectangle as follows:



The box effects
Next, we want to add effects to the box to make it more prominent than it currently is. At the moment, it seems to be a bit boring and wont attract the attention of users! So, to do this, we’re going to add a nice border effect and make the box a little bit glossy. (oooh, shiny!)
Here are the effects that I used myself:






With the same effects as above, your box should start to look something like this:



There! Now that’s looking better, isn’t it!?
Next, we’re going to take a soft white brush and add a highlight at the top of the box.
Click “B” to select the Brush Tool, and then right click on the canvas to get the brush options. Make sure your hardness is set to 0%.



The size you use is totally up to you.
Click once to add a highlight. For me, I set the blend mode to Overlay and the fill to 50%



Your box should look like this:



Next, we need to start to add text. I like to keep this simple with font such as “Calibri” or “Arial”. I used Calibri for this tutorial.



Add subtext if you so desire.



Now we’re nearly done! What I am going to do next though is add an icon. The icon you use is up to you, but I recommend https://www.iconfinder.com/ to find them.

 

Changing the colour is simple, just go back to your rectangle, and double click the icon:
 This will bring up the following menu:



I hope that this tutorial helped you! Feel free to change the settings a bit, and you can make some great examples.
 
Tutorial bought to you by: http://marshdesigns.co.uk/blog/
Want to see more? Let me know what tutorial you'd like to see.
 
Donate to me!

[Sir Twisted]

A very well written and put together tutorial katos. Thank you for sharing.

[PuRplE tHouGHts]

I'm the only one who can't see the images?
Btw great work buddy!

[katos]

I'm the only one who can't see the images?
Btw great work buddy!

Thanks for notifying me that the Images are broken. I'll try and have this sorted ASAP for you