Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.
In this tutorial you will create selected and deselected voting stars so you can create a rating interface like this:
1. Create a new canvas 75 pixels wide and 75 pixels in height with a background colour of #222222.
2. Choose #F9F109 as your foreground colour and select the Polygon Tool; set sides to 3.
3. Hold down Shift and drag the cursor upwards to draw a triangle like this:
4. Right-click the layer and choose Rasterize Layer.
5. Right-click the layer and choose Duplicate Layer; choose Edit > Free Transform and enter 72° in the Set Rotation field (the star will have five points so each point needs to be rotated by 72°, i.e. 360° / 5). Position the new layer thus:
6. Do the same with the new layer: right-click the new layer and choose Duplicate Layer; choose Edit > Free Transform and enter 72° in the Set Rotation field. Position the new layer thus:
7. Select the top layer and press Ctrl + E twice – this puts all three layers into one.
8. Select the Rectangular Marquee and drag over the left-hand side of the canvas like this:
9. Press Delete to remove the selection:
10.Right-click the layer and choose Duplicate layer; choose Edit > Transform > Flip Horizontal. Keep pressing the left arrow key to nudge the new layer to this position:
11. Press Ctrl + E to merge both layers into one; choose the Paint Bucket Tool, set Tolerance to 0 and ensure Anti-Aliased and Contiguous are checked. If your foreground colour is not #F9F109 set it to #F9F109. Click in the center of the star so that it looks like this:
12. The shape of the star is there but it needs tidying up. Holding down Ctrl, click on the layer to select its transparency; choose the Paint Brush Tool and set the brush size to 30px, the Hardness to 100%, the Mode to Normal and the Opacity to 100%. Paint repeatedly over the star until the colour is consistant all over:
Note: If at this point your star in not properly centred, align your star using the arrow keys – in the example the star was nudged up by 2 pixels.
13. Add these Inner Glow settings:
14. Your canvas will look like this:
15. Add these Outer Glow settings:
16. Your canvas will look like this:
17. Add these Stroke settings:
18. Your canvas will look like this:
19. Create a new layer above the star layer. Hold down Ctrl and click once on the star layer; choose Select > Contract and enter 3px. Set your foreground colour to #FFFFFF and use the Paint Bucket Tool to fill the new layer:
20. Set the opacity of the new layer to 60%:
21. This is a selected star – to create a deselected star simply select the star layer and choose Image > Adjustments > Hue/Saturation and set the Saturation to -40:
22. You can use these two type of stars to create a rating interface, for example this is three stars out of five: