Online Advertising, Web Development & General Rantings

Check out this psychedelic graphic, it’s 10 stars superimposed onto each other! Imagine animating them, the stars rotating whilst alternating colors (whilst I haven’t done it for this sample I’ll do it for some future posting).

So this is how I did it

1. Start with a square (use the “rectangle” tool whilst holding down the “left shift”)

2. Turn the square into a triangle

a) convert the square to a path “object > path > convert to path”

b) using the “pen” tool click on the top right edge dot, this will delete the point.

3. Re-dimension to form an equilateral triangle. To do this use the “direct selection” tool and drag the “bottom left” edge, whilst keeping pressed the “left shift”, up enough to appear like an equilateral triangle (any 2 sides of the triangle appear similar in length).

4. Make a copy of the triangle

5. Position both triangles over each other. Rotate one of the triangles until it appears like a star (doesn’t need to be perfect as we will do that in the next step)

6. Using the “direct selection” tool clicking and dragging any point will get you the perfect looking star that you want.

7. Once you have the star look that you want it’s time to unite the 2 triangles. Select both triangles and click the “object > combine > unite” menu option

8. Make the star a bit smaller, this will form the center of the star radiation. (click on the star then using the “selection tool”, whilst keeping the “left shift” key down, re-dimension it to a size fitting of the center star)

9. Change it to a light shade of color, in my case it’s a light pink “#FFF6AAC4″

10. Copy the star and make a second one giving it a deeper shade of color, in my case dark pink “#FFEE6EA1″

11. Resize any of the two stars to a larger dimension. Then reposition the center of one onto the other. If the smaller does not appear onto of the larger star then reposition the shape in the “objects and timeline” such that it does (drag the shapes above or below the other).

12. Now copy the next largest star and do steps 10 and 11 again. Repeat this until you have enough stars to fill the parent canvas.

For completeness  label each star shape with a unique “name” so that you can programmatically code against them in the future!

Get the code  here!