1   kinggoji ~ 01 September 2004 at 07:48 AM

Would a feather on the inside do the trick for you?

2   Jason Santa Maria ~ 01 September 2004 at 08:01 AM

I did something similar to this on the loading screen for Sideshow (bottom left). Just draw the rays in Illustrator, then apply a circular gradient over top of it in PS, going from the center which is white, to transparent. The one for side show is in Flash (which, unlike Illustrator, allows you to do gradients from color to alpha), but you could also do it solely in AI if you can match the blend to the background color.

In the case of AI reproducing this, background block has a circular gradient on it, green to white. The rays also have a circular gradient on them, light green to white.

3   Zelnox ~ 01 September 2004 at 08:03 AM

I do not really understand what you mean by taper in. The fading?

Maybe Phong’s Starburst can help

4   Bruno Figueiredo ~ 01 September 2004 at 08:22 AM

Draw one ray, move the rotational center to its center edge, duplicate with transform say 20 times in a 5 degree angle. Merge the different rays together and fill with gradients galore.

5   Michael Sanders ~ 01 September 2004 at 08:40 AM

It looks like Phong’s method accomplishes the results. In AI you could draw the desired rectangle and add anchor points around the rectangle. Then, using the direct selection tool you could grab everyother point and drag it to the desired area for the “warp speed” effect. This is the long way. And without the desired gradient effect.

6   Kelly Cook ~ 01 September 2004 at 08:43 AM

Here’s how I’d do it:

1. Create your triangular ray shape, filled with a linear gradient (white at tip to light green).

2.Copy and paste each ray, rotating each one by the same degree (360 degrees divided by number of rays will give you your percentage).

3. Align the tips of the rays at the center of the “circle” as you copy and rotate them (I used a tiny black circle as my guide).

4. After all your rays are copied, rotated, and aligned, create a rectangular background shape filled with a radial gradient that goes from white in the center to a darker green on the outside.

5. Create your clipping mask.

Hope this helps! By the way, thanks for your site…it’s very inspiring.

7   Benjamin ~ 01 September 2004 at 08:48 AM

I second Jason. Whenever I try something like this, I draw the rays with paths, then create a new layer with a radial gradient layer style.

Tidy, easy to change, and scalable to boot.

8   Cameron Moll ~ 01 September 2004 at 08:51 AM

…so I’m hearing there’s no easy way to do it, eh? So a hack mix of filters or hand illustration do the trick. Just for clarification, rays that taper outward are wickedly easy to draw in Illustrator using the star shape and pressing the up/down buttons to add rays.

But alas, the inner taper is the evil twin apparently. Thanks for the tips. I’ll play with these ideas and any others to be posted.

9   nat ~ 01 September 2004 at 08:58 AM

use the pie chart tool in illustrator to make a chart with a bunch of blank wedges (select the chart tool; click on your document; enter a size - doesn’t really matter, you can change it later); then just enter 1s in the top row of the chart - one column for each ray you want). This will produce a blank pie chart with each wedge filled in as a different shade of gray. then just select the chart and ungroup it, and you will have a circle made up of a bunch of editable wedges.

from there you have lots of options. what i do is delete every other wedge (make sure you start with an even number), then use the pathfinder to make the remaining wedges a single shape that i fill with a gradient. then lay this over another circle with a solid background, or a different gradient, and you’ve got your desired effect.

it isn’t nearly as complicated as it sounds. once you do it a few times, it is really quite simple.

10   Jeff Croft ~ 01 September 2004 at 09:04 AM

I can’t answer your question, but I would like to say a couple of things:

1. Quizno’s has kick ass marketing, particularly when it comes to typography (I think they use mostly Font Bureau fonts). I’m always checking out every sign and details when I’m in there. Good food, too.

2. The fact that you don’t know how to do something makes me suddenly feel a lot more competent. I thought you were superhuman. Thanks for making me feel better. :)

11   Cameron Moll ~ 01 September 2004 at 09:06 AM

lol, I’ll keep that giant S on my undershirt hidden just for you, Jeff.

12   Jimmy ~ 01 September 2004 at 09:29 AM

And what exactly is this design for? Personal project? Client brochure?

If it’s for a client, shame on you for cheating on your ‘homework’ =)

13   Derek ~ 01 September 2004 at 10:20 AM

in photoshop draw a bunch of vertical bars that extend from the top of the page to the bottom with space between them. Then go to filter > distort > polar coordinates and change from rectangular to polar… to have a gradient too the middle just apply the gradient prior to making the transformation…

14   Cameron Moll ~ 01 September 2004 at 10:43 AM

Jimmy, no assignment, just been wanting to know for a while now.

15   Hugh ~ 01 September 2004 at 10:54 AM

Not that hard in illustrator. First, create a star in Illustrator. Second use the intersect pathfinder filter with a circle to purge the outer points of the star. Third, direct select (open arrow) the inner points of the interected star and scale those points to the center.

16   John ~ 01 September 2004 at 11:09 AM

Similar to what Hugh said: In Freehand (sorry, I’ve got Illustrator but I hardly use it) I made a rectangle the size I wanted. Using the polygon tool set to star and the number of points I wanted, I layered the star over the rectangle so that all the points broke the edges of the rectangle. Then I used the Punch path operation and voila, rays tapering outward. Since they are all part of the same object, a radial fill colors them with a gradient from the center point. Simple. If you want more flexibility in positioning the star after the fact, use a mask.

17   Reverend Dan ~ 01 September 2004 at 11:18 AM

Surely rays that taper inward are a byproduct of rays that taper outward? you could treat the background as the foreground. of course, i know nothing about illustrator.

18   Chris ~ 01 September 2004 at 11:24 AM

Well there is an easy way… bearing in mind that I understand what you’re trying to do.

Open Photoshop, select custom shapes – make sure the all shapes is selected, go down the custom shapes list, and near the bottom you should see a weird filled circle (Registration Target 2 is it’s name) Draw the shape as you would, then using the Direct selection tool delete all 4 of the outside points, it then inverts and hey-presto.

19   Andrew Thornton ~ 01 September 2004 at 11:24 AM

This looked like an easy couple of steps - It makes it relatively simple to produce the effect your looking for,

http://www.webclass.ru/eng/Tutorials/Photoshop/Creating_rays.html

20   Jason Beaird ~ 01 September 2004 at 11:26 AM

Looks like I’m a day late and a dollar short on this one, but I posted a tutorial on my website. Here’s a permanant link.

21   Paul D ~ 01 September 2004 at 11:56 AM

It’s quite easy to do in Photoshop.

1. Draw a white stripe in a new channel.
2. Make a white/black stripe pattern with “Create Pattern”
3. Fill the channel with the pattern, so that you have black and white stripes.
4. Convert to Polar Coordinates (Distort filter menu)

22   Jonathan Snook ~ 01 September 2004 at 12:05 PM

Having never used Illustrator before, I came up with this technique for ver 10 (very similar to the others):

1. create your star
2a. Object > Path > Offset Path…
2b. specify a number to grow your star
2c. You’ll actually have two paths, your old star and your new fat star, you can delete the old one if you wish
3. use the direct selection tool to select the inner points
4. Use the scale tool (holding the shift key) to pull the points into the middle.
5. apply gradient goodness

23   ballookey ~ 01 September 2004 at 01:22 PM

I created this sample in about 45 seconds, but I use FreeHand. I think using the star to punch a rectangle is a great suggestion, but here’s my how-to:

Set Origin to the center of your desired design, drop in an x and y guide at the zero point.

Draw one wedge with it’s narrow point at the zero point. Command-shift-d to clone on top of itself.

In the transform palette enter angle of rotation (I used 15 deg) and enter 0, 0 for the center.

Now the beauty part: command-option-d to clone the shape and it’s relative rotation. Hit those keys 23 more times in rapid succession. Now you’ve got the rays.

Select all, union (similar to Illustrator’s pathfinder) and apply radial blend. Mask into the background shape with it’s own radial blend. (masking also is easier in FH)

24   Michael Sanders ~ 01 September 2004 at 01:50 PM

Hugh. Good tutorial! I like your method. It even works in AI 8. Maybe someday I’ll upgrade. :)

25   Joe Clay ~ 01 September 2004 at 10:23 PM

I was basically going to say what others have said about polar coordinates. I have no clue how to do it in Illustrator as I use it infrequently, however it seems that a lot of other people do.

26   sosa ~ 01 September 2004 at 11:42 PM

Man! it’s really that hard?

I make it in Corel Draw (that’s the tool i use) in like 10 seconds.
Draw a rectangle, edit top nodes inside for shaping like a trapecius (a triangle doesn’t work for this particular effect), adjust the rotation centre, rotate… and that’s all.

27   chris ~ 02 September 2004 at 02:43 AM

Try my method above, I’m telling you it is THE easiest, with the help of a faded mask and circular fade background. Took me 2 minutes in Photoshop, and it’s easy to rescale… Try it you might like it!

28   Charles Roper ~ 02 September 2004 at 05:35 AM

If you’re really into making rays as quick and painless as possible, you should look into Xtream Path by CValley. Check out the Rotate Mirroring movie here: http://snipurl.com/8tds. You can make rays in seconds using this.

It does loads of other stuff too; a truly indispensable part of any AI toolbox. It’s not cheap at $139, but if you consider how much time it can save (and time is money, after all), then I’d say it’s well worth it.

29   Michael ~ 02 September 2004 at 10:04 AM

What a wicked post! I’ve bashed my head agains the wall so many times trying to find a simple way to do this…

30   Greg ~ 02 September 2004 at 12:38 PM

Hugh, great tutorial, but when I do that I can’t (quickly) fill the alternating rays. Is there a step for that?

31   Cameron Moll ~ 02 September 2004 at 01:09 PM

Try grouping the the rays using Object > Compound Mask and then add the fill accordingly.

32   Ray ~ 02 September 2004 at 03:59 PM

What the heck are you guys talking about??? This is the easiest thing on Earth to do.

1. Open Freehand

2. Make star with Polygon tool. If you need to taper inward 10 rays, make sure the star has 20 sides. You can tune any other star setting there as well, like whether it is acute or obtuse.

3. Place it on canvas. Once it is done, in the inner circle of node points (in that star) just delete the points clockwise starting from imaginary 12 o’lock: first node point, then third, then fifth, then seventh, etc. Just be sure to do that over one node point and you will see how the rays taper inward.

4. Add the effects and you are good to go.

Piece of cake, takes 10 secs.

33   Chris Luebbe ~ 03 September 2004 at 01:12 PM

I gotta go with Ray on this one. His method works in Fireworks, too. For the extra effect, simply place a rectangle under the star with an identical gradient, save for the base color. Thanks, Ray!

34   Caleb ~ 06 September 2004 at 03:13 PM

Wow, glad you asked this question, I have been wondering the same thing myself, although I do this a lot already by drawing wedges myself but I usually have an object over them so you can never tell they don’t match up evenly. But now I got some great methods for doing it proportionately. It seems Ray and John have the best methods though. Lucky for me I have Freehand at work even though I NEVER use it, but now I might have a reason to.

35   Bingo ~ 09 September 2004 at 02:25 PM

Humm ok, so now how do I create a yummy looking’craveable salad’

36   Pete A. ~ 14 September 2004 at 09:46 AM

I’m quite late on this but after sampling several methods posted here, I’d have to say I got the best results using Balookey’s (which coincidentally is the way I was taught by a friend years ago). The star method is very cool and quick but I think to get the results you want, you have to look at the negative space in the original star to see what the final output will look like (Drawing on the Right Side of the Brain, anyone?) I find drawing the wedge the way I want then rotating easier to visualize. Anyway, Just figured I’d append Balookey’s entry with the way to do it in (win) Illustrator and Photoshop for the final touches.

1. Draw your initial wedge.

2. With the wedge selected, select the rotate tool and alt + click at the inner point where you want the wedges rotating around. The rotate dialog box will popup. Choose the degree of rotation and click, “copy.” If all worked well, the copy will have rotated properly. Now, just ctrl + d to duplicate the last action (rotate/copy) until you rotate wedges in a complete circle.

3. Select all the wedges and pathfinder > merge. Cut and paste into a new photoshop document. Apply a white circular gradient on a new layer and there you go.

37   Kyle ~ 17 September 2004 at 01:00 PM

I can’t help but notice http://quiznos.com/ Funny how that showed up :)

38   Dave ~ 23 September 2004 at 10:51 AM

If there was a joke here (Quiznos.com), I still don’t get it. ;(

39   Kris Khaira ~ 11 October 2004 at 07:39 PM

I think Hugh Roper’s way is the best. It took me a minute to learn.

I don’t like the Photoshop way because it’s raster thus less portable.