Creating a Star Rating System - Photoshop

Hey

This is going to only be a quick tutorial teaching you how to make effective looking stars for use with a star rating system. For this tutorial you will need a couple of things:

Photoshop, or similar,
Web 2.0 Layer and Styles Pack

With any of the image you can click them so they are there full size.

Step 1) Create Your Canvas

The first step is to make a canvas big enough for the size of starts you want to use. The stars shown at the bottom of the page are 30 pixels high. Although I wouldn't make them to big. At this step make the canvas size big enough for 2 stars only.

Creating a Star Rating System
Creating a Star Rating System
Step 2) The Blank Star

The stars rating system that will be used will have to types of stars. Blank and Coloured. The first step is to create the bank star. Use the outline tool that comes with Photoshop to create a suitable shape. Colour it a nice shade of grey.

Creating a Star Rating System
One thing that you will have to do is set the white that was on the previous image to blank. Make sure it is on an individual layer. Use the magic wand to help you achieve this.

Creating a Star Rating System
Step 3) Adding Effects

The next step is to add effects to the blank star. Although they are minimal they are noticed. Use the Web 2.0 pack which you can download from above. Add a grey style.

Creating a Star Rating System
Step 4) Add a Background Colour

The next part is to add a background colour to the blank star. Create a new layer underneath the previous layer and colour it a light grey colour.

Creating a Star Rating System
Step 5) The Star

This part of the step is very similar to the previous steps. Again create a coloured star. It really doesn't matter what colour it is at this stage.

Creating a Star Rating System
Step 6) Adding Effects

Similar to the previous layer effect add a gold coloured layer effect to the star.

Creating a Star Rating System
One problem with the layer styles that is included is that the strokes are to big for the size of image we are working on. You may need to reduce this.

Creating a Star Rating System
Step 7) Admire

You now have two really cool looking stars which you can put to good use.

Creating a Star Rating System
Step 8) Slice and Splice

This is one of the final steps. Slice the image using the slice tool. Export them on the full quality settings. File > Save for Web Devices

Creating a Star Rating System
Step 9) Compile

You can now compile the two image into a star rating system. You will have 6 images in total (including blank). Save these as .jpgs. or you can save the ones below.

Creating a Star Rating System


Creating a Star Rating System


Creating a Star Rating System


Creating a Star Rating System


Creating a Star Rating System


Creating a Star Rating System


Not bad for 10 minutes work.
Labels: , ,