Guideline to making your own ranksAs all graphics packages are different I will have to talk Photo shop and Image Ready but the principals go just the same for Fireworks or any of the graphics software there is.
To begin I will go for an Image / canvas size of 110px X 30px. If we work on a maximum of 5 images for the rank that means they need to be no more than 20px across with a 3px gap at either end and 1px between each of the rank images. If you are going to put text under any of the ranks they don't want to be any bigger than 20px high. This gives us a baseline of a 20x20px image for the ranks. With a 10 px bottom area to put any text. If you don't want text, you can go for 20x30px images.
Selection of the images
Do not go for over complicated images if you can avoid it. Think of simple colours and shapes that are easily recognisable... a 2 colour logo, text, hearts, squares or even a smiley! They must be recognisable at 20x20px
To be transparent or not, that is the question...
As a general rule you know what your template is like so you can use the same background that you have on your forum but, what if you want to change your template or have other users get access to them?
A transparent background is the best option for all and gives you the maximum flexibility for future changes.
Start with a blank document at around 110x30px and a transparent background. Open the image that is going to be your logo/icon and make it 20px across. Copy and paste it into a new layer in the blank rank document you just made. Close the icon image down. Position the icon where you want it for the lowest rank and then copy the layer. Position this layer and repeat until you have all 5 icons lined up. This is the maximum rank that you will need, we now know the icons fit! If you are going to add text, now is the time to do it. Centre the text and work on either a black or white text for maximum contrast in a simple font that is legible (Arial, times etc). Create the text Administrator or Admin. Copy the text layer and make Moderator and repeat for any other custom ranks you are going to want. Start at the top and work backwards... the first rank is 5 icons and Administrator. If you use black text, you may also want to create the same with white text to make it more compatible with other templates.
We will call this rank pack 'test'
Do not use spaces as this can confuse the code.
The system I use is pack name and then position, you can use any system you like but it is better if you can use a system so others can understand what is what.
Test_Admin_Blktxt (Test rank of admin with black text)
Test_Admin_Whttxt (Test rank of admin with white text)
For transparency, they must be gifs
Create the ranks
We now have the Admin rank made. Turn off the Admin text layer and turn on the Mod text layer and save.
Turn Off the Mod text layer and save as Test_5.
You now have a rank with 5 logos. You can either turn off layers and save as the next one in the sequence or you can drop the opacity and create half ranks if you like. By doing the opacity down to 30% you would have a Test_45 rank which almost doubles the number of ranks. The choice is yours but please consider other users may like the half options.
The options are now endless and you can make some huge rank packs by changing opacity, leaving all of the used ones as opaque, turning them off, reversing the opacity.
As I said, this is only a guide and the creativity is up to you as is the knowledge of your software.