I recently started creating a web page where I needed a rating control similar to the one you see at the top of this page.  I found this great tutorial at KomodoMedia which demonstrates the html and css code behind this type of control.  I decided to base my rating control on this, but I wanted to change the look of the stars a bit, enter CorelDRAW.  

The KomodoMedia star control requires an image with 3 stars stacked on top of each other, similar to:

I need to make something similar to the above image, only snazzier .  The first step is to create the right kind of document.  For this task, the default web preset will work just fine.  It sets all of the units to pixels, chooses RGB for colours and defaults the view mode to pixel mode.  The width and height are not important to me since I'll only be exporting a portion of the page anyway.  The DPI isn't really useful for web work, it is really only used when I want to use units other than pixels (e.g. 1"x1" rectangle).  I won't be doing this so I'll leave this at the default 96 dpi.

This first thing you may notice after you create your document is that it isn't zoomed to page.  This is due to the view mode being pixels and the default zoom being 100%. 

When the view mode is set to pixels, a 100% zoom means that 1 pixel in your document represents 1 pixel of your final output.  This can be useful.  If you want to see what the final output will look like, you simply zoom to 100%.  What you get is a pixel perfect vector WYSIWYG environment.

I've decided that I want each of my stars to fit within an 18x18 pixel box, so I'll begin by creating some layout rectangles.  These will give me a visual indication of the bounds, and when I export I'll use them to define the padding around my stars, more on this later.

It doesn't matter where in the document I create the rectangle.  

Since I need 3 stars on top of each other, I duplicated the rectangle (ctrl+d).  To place the second rectangle, I grabbed the top-left corner of the duplicate and snapped it to the bottom-left corner of the original rectangle.  Repeat this again for the third rectangle.  I gave each of the three rectangles a different colour so that I could easily see where each star needs to go.  Since I didn't want the rectangle colour to interfere with my design too much, I selected all three rectangles, held control and clicked the white swatch in the palette a few times to subdue the colour of the rectangles.

At this point, I grouped and locked the rectangles so that they wouldn't get in the way.

Now I start creating the stars.  For the star creation, it may be easier to work in "Enhanced view mode", I'll switch back to pixel mode to do the final tweaking.  

• create the star
• using node edit tool, expand the inside nodes a bit
• rotate a bit
• add a gradient fill - yellow to light orange
• change outline colour
• duplicate and shrink the star (I resize the original star, while I hold control+shift, then click right mouse to put it in duplicate state)
• remove outline on smaller star and fill with white
• use gradient transparency tool to make the bottom of the inner star transparent

I opted to simply make the hover star a larger copy of the normal star.  The empty star is just the normal star without the fill and white highlight.

So how does this all look like in pixel mode?  I flip pixel mode back on and check it out.

Not too bad, but I've clearly messed up on my centering. The top star has two padding pixels on each side, which is perfect, but the middle star has three padding pixels above it, and one below it.  This is easy to solve, while in pixel mode and zoomed in to a point where the pixel grid is visible, nudging with the keyboard's up/down/left/right keys will nudge by half of a pixel.  I select the middle star and it's highlight, and press the up key once.

Perfect!

I'm happy with my stars now, so I select the group of three rectangles, unlock them, and remove the fill by clicking the no-fill swatch in the palette.  I want to keep the rectangles around because they will force the correct padding around my stars when I export.  While still in pixel mode, I zoom to 100% now to see the size in actual pixels, this is how the stars will look when I export.

I select everything, click "Export" and select png.

And here's the final image:

And here's an image of how the final control would look on a web page:

Why do this with a vector app?  Simple, because it is non-destructive.  When I look at my final output, I may think that the stars are too orange, or the large star isn't big enough, or I need the whole control to be 25 pixels high instead of 18.  Making these types of changes are trivial with vector graphics, and with pixel mode we can easily see exactly how the final output will look as we make the changes.