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.
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.
Let me know if you are using this image for your website by leaving a short comment.