Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Rating Stars

Rating Stars


Rating stars will easily show your potential customers the quality level of goods that your site offers!

Start a new document with white background. set your foreground color to: #FFC600

Choose the SHAPES tool, and from the pulldown box, select the star shape shown below. This shape comes with the default set in Photoshop 7.

image 1

Click and Drag on the canvas to draw this shape. Remember to hold down the SHIFT button while drawing.

Make it big like the one shown.

image 2

Now go to Layer->Rasterize->Shape to rasterize this shape.

Use the Magic Wand tool, click on the WHITE area within the star to select it. Hold SHIFT while clicking on the other areas to allow multiple selections.

image 3

Create a new layer, then fill the selection with #FFF200.

CTRL+D to deselect. then merge the 2 layers together (excluding the background). To do this, link the 2 layers together, then press CTRL+E.

image 4

image 5

Then hit CTRL+T to resize the star. while holding down SHIFT, click on the handles and resize the star to about 35px.

Then hit enter to apply.

image 6

Now go to Layer->Layer Style->Stroke, then apply a 1px stroke of color: #895E26

Then add drop shadows to the star.

This completes our Full star for the rating. Such Rating Stars are great markers of high-quality products and services!

image 7

Now, to create a no star, CTRL+CLICK on the layer with the star to create a selection. Create a new layer then fill it with white.

CTRL +D to deselect.

image 8

Now to create a HALF star, duplicate the new layer you just filled in white, use the rectangular marquee tool and make a selection on half the star. then hit delete.

Now if you hide the bottom white layer, you should see half a star.

image 9

image 10

Now, if your save each of these, Full star, half star and zero star in separate gif files, you can use it for your rating system.

image 7 image 7 image 7 image 10 Rating Stars

Download PSD File

Help your site visitors to make the best choice!

Make the high-quality goods of your site obvious by adding Rating Stars !



Author's URL: Tutorialwiz.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments JUICE September 24, 2011 says:
thanks
Reply
comments sandy April 13, 2011 says:
thanks for this really good, helped me out
Reply
comments tukuza September 22, 2010 says:
dast kinda cul
Reply
Add comments to "Rating Stars"

Captcha