Designing a five-star rating system in Photoshop
May 25, 2011 
7 Comments
In this tutorial we are going to be using Adobe Photoshop to create a 5-star rating system that you will be able to develop and use as a way for users to rate your images, articles or products (or indeed anything).
Step 1
Open up a new Photoshop document/canvas. I used a 600×350 pixel document set to RGB at 72dpi. Change the background colour of your document to a dark blue. I used colour #18262A.
Step 2
The first thing we’re going to do is add some subtle texture to our canvas background using a built-in Photoshop tool. Go to Filter > Noise > Add Noise to open up the window seen below. Change the amount field to 1. Make sure the Uniform and Monochromatic checkboxes are selected and hit the OK button.
Step 3
Download some icons from the web, making sure they have a star icon included – I downloaded the Glyphish Icon Set. Once downloaded, go to File > Place and locate your icons. Select the star icon (28-star.png in this case) and click the place button.
Step 4
Go to Edit > Free Transform and in the toolbar at the top of your screen, change the width (w) and height (h) to 18px.
Step 5
Duplicate your star layer and shift the new layer 20px to the right by holding the Shift-key and pressing the right Cursor-key twice. Repeat this step until you have five stars.
Step 6
Right-click your first stars layer and select Blending Options. Click on the Gradient Overlay tab and apply a medium to light grey gradient set to 100% opacity and with an angle of 90 degrees.
Step 7
Now click on the Drop Shadow tab. Increase the opacity to 100%, and decrease the distance to 1px and the size to 2px. Leave everything else set to default. Click OK.
Step 8
Right-click on your star layer (the one with the styles applied to it) and select the Copy Layer Style option.
Step 9
Select all of your other star layers. Right-click and select Paste Layer Style. This will apply the same gradient and drop shadow styles to all of your stars.
Step 10
At this point you should have something that looks similar to below.
Step 11
Right-click on your first stars layer and select Blending Options once more. Change the gradient so that it goes from a medium orange to a bright yellow and then click OK.
Step 12
Copy the layer style and paste it onto a couple of your other star icons. Place an image into your document. Resize and position it so it sits above your stars, like below. Try adding a stroke to make it look more complete.
Step 13
Select the Type Tool and draw a text box above your image. Type in a title or caption of your image. I used “Vroom, Vroom!” using the typeface Georgia (a web-friendly font) set to italic. I also added a drop shadow to the type, using a distance of 1px and a size of 1px, set to 75% opacity.
Step 14
Duplicate all of your files; you should end up with something similar to below!
Good tutorial, but you haven’t told us how to implement it! Just a thought..
nice tutorial almost all steps has been covered to related topic
nice one. individual with designing business must read this article.
It makes for a pleasant and productive experience while visiting the Website – such as visiting a professional office or shopping in nice shops and stores.
custom web design
wow!! awesome effect.Thanks for tutorial….
Thanks a lot for sharing the great information this is really very helpful for me.
i found your blog through googling. your blog gives to us very good knowledge about photoshop. and this blog provide knowledge about photoshop,
this blog are very help full for web industries.!
thanks for this blog