Web Star

In this tutorial you will learn how to draw a star for rating systems or other web-related elements. This Photoshop tutorial is one of my favorites because it has a really grate outcome, and I can say that I am quite proud of it! But enough talking, let’s start Photoshopping.

Let’s get started!

Step 1.

Create a new Photoshop document of 900x400 pixels(File->New), then create a new layer(Layer->New Layer) and name it “star”. Grab the Custom Shape Tool (U) and select the star shape. If you don’t see the star shape, follow the instructions from the picture below.



Draw a star; make it big so that it will take up almost all the height. Make sure that the path option is selected in the Custom Shape Control Bar.




Grab the Pen Tool and fill the path with black (#000000). The fill should go on the “star” layer not on the background.



Apply the following effect s(Layer->Layer Style):




My result:


The “empty” state of the star is done. If you want you can save this as a different document and then save another document with the “filled” state of the star.

Step 2.

Create a new layer(Layer->New Layer). Name it “fill”. Select the internal part of the star with the wand tool (W).



On the “fill” layer, fill(Edit->Fill) the selection with gray (#a9a9a9) and move “fill” under “star”.



Apply the following effects (Layer>Layer Style):




And optionally:



My result:



Step 3.

Get it ready to use by merging the 2 layers (“Fill” and “Star”) and resizing (Ctrl/Command T) the result. To maintain the proportions of the star, hold alt+shift while resizing.




For the empty star (without the “fill” layer) do the same merging but with the Fill layer set to 0% opacity or invisible.

Support this blog by subscribing to RSS feed.

Some of my results:



The PSD Files can be found here:
Photoshop Tutorial psd 1.
Photoshop Tutorial psd 2.