A star is born

[peaklocation]

Hi guys,

I'm a gifted amateur at Adobe Illustrator - actually, not true, just amateur!

Anyway I digress, I 'm trying to make some "iTunes like" rating type stars for an iPhone application, I intend to make 10 PNGs for use in the app (one for each half star, 0,0.5,1,1.5,2...etc to 5). I need half stars as well, and these need to be "killer" as the dev puts it.

An example of where I've got to so far is attached (png), 4.5 stars in this case with a drop shadow, the "feedback" I've had so far is that they're flat - which is true, flat colour. I made them by making a star and halving with pathfinder then reflecting to make two halves, seems to work.

My questions are...

1) How can I make them a bit more alive, maybe a gradient fill of some sort? How do I achieve this in AI both for full stars and halves.

2) How might I make the "hollow" versions?

3) What's the best technique to ensure I produce 10 variations so that everything is aligned perfectly in one AI file yet can export 10 PNGs from it - I really don't want to make 10 AI files - do I need 10 art boards? Grid? Really like help with that as it's obviously key, I know align and distribute (phew).

4) This must be a problem - if I develop them and change something in the design i easily need to be able to generate all the variants - any tips on that?

Really appreciate any help/thoughts - AI file available.

rupert

 

[7on]

All I see is the custom shape tool in AI set to star with a dropshadow.

You say they're for an app? Do you have any images from the app? Is there a design motif already present?

Sure you can just put a gradient in there and a stroke - but then that's not really designing is it?

 

[bluedog3401]

The following is just my opinion.

I would add a stroke to the star with a secondary color to help define it apart from the drop shadow and background. The drop shadows seem a bit diffused for how close they 'appear' above the screen. Try lowering the spread on the effect and see if it helps tighten the shape and placement.

As a previous poster mentioned, look at the design of the app and follow if there is anything to help guide you in the desired look so they fit in with the color and style of the application.

 

[thebinaryfamily]

Layers and outlines might help

Hi Rupert,

I am also far from being a pro in Adobe Illustrator and usually use it for print, not apps, so please take my suggestions as only ideas, not tried-and-true solutions.


1) I like bluedog's suggestion of having a tighter, more star-shaped drop shadow. In the App Store, they use a reflection of a star instead. You can try your gradient idea too. They all sound like they might work.

2) The hollow stars in the App Store have shadows in the corners that make them look indented into the surface. But you could also go with simple outlines of stars or gray stars.

3/4) I think using layers will help here a lot. Put each star or half star (with its drop-shadow or reflection) on a separate layer and name them Star 0.5, Star 1, Star 1.5, etc. Then you can easily turn the layers on and off and save the different PNG's you need.

I'm still running CS1 (!) so it's quite possible that there's some great tools for doing this last part more efficiently, either in Illustrator or in Photoshop. So it's probably worth reading a bit in the Help section - it might save you hours of trial and error.

Good luck!

Les @ thebinaryfamily