SHARE

I think you remember my last post where I have shared some of the rank images for forum softwares.  Although they were made for SMF forum software, it can be used in any other forum software like  Vbulletin, MyBB, IPB , PHPBB etc. Last time some images didn’t look good so this time I have re-done all images and will tell you how I have done that. I have used Photoshop CS3 for this work ( can be done in older version too).

First of all make a blank image with transparent background with width of 95pixel and height of 19 pixel. Then from “custom shape tool” choose “Rounded rectangle” and draw a box. You can increase or decrease the radius of corner accoring to your wish,  in my case I have used radius of 8px. After you have made rectangle with rounded corner, make a new blank layer with transparent background and merge it with rounded rectangle you have just made.  After that go to the “Blending Option” and choose “Gradient Overlay” . For making “Admin” image rank I have used “#e9f9fe” to “#f1f7fa” in “Gradient overlay”. You can use other color, to get the same effect like in my image, use darker color below(L.H.S) and a bit lighter one above (R.H.S) as shown in screenshot.

Alert! the correct vaule of image is 474747 > 6D6D6D, sorry for wrong information

Now we need to write the rank, to give it more catchy look I have used “Gradient Overlay” with colours #e9f9fe to #f1f7fa. And gave it some effect using “Bevel & Emboss” . The setting that I used are shown in screenshot below:
For small icons at left side you can use images of your choice according to your need, I have used famfamfam.com’s silk icon. I have provided PSD source in this tutorial, which will help you to understand more clearly.
You can export this image as GIF or PNG images but I have used GIF to save bandwidth. For better GIF quality you can use the setting as used in the screenshot.

Download Rank Graphics

Download PSD Sources

Let me know if you are using this image for your website by leaving a short comment.