Jun 27
Illustrator Charts
2005 at 01.36 am posted by Veerle Pieters
Up on request here is a small tutorial on how to create a nice Illustrator pie chart. Hope you enjoy this one ;-)
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
17served
1
it’s times like this that I wished I’d bought Illustrator instead of Freehand!
2
Great scott ! Another one to store for future use (very short future…) :-)
3
Fantastic!
4
@lazymouse: don’t.
Freehand’s transparency may be a little behind the times, but you can fudge a lot of things :)
1) pick the chart tool, draw your chart area—http://blog.zog.org/images/pieFH1.png
2) Enter chart data. Use the first row to input the series names for the legend and the second row for the numbers—http://blog.zog.org/images/pieFH2.png
3) Click he chart option button (second from top left), change the chart type from its default bar chart to pie chart. I changed the “separation” parameter (the space between the pie slices) to 1— http://blog.zog.org/images/pieFH3.png
I won’t bother with the text and the legend, I assume you can change those yourself :)
4) Click OK and you’ll get a grayscale pie chart like this— http://blog.zog.org/images/pieFH4.png
5) Click the individual pie slices, remove the default black strokes, change the fill colour to something you like. Step back and admire— http://blog.zog.org/images/pieFH5.png
6) When you’re happy with the colours, go back to each slice and change the fill type from Basic to Gradient— http://blog.zog.org/images/pieFH6.png
7) Move the centre of the gradient to the centre of the pie chart and adjust the aspect so that the two doohickies that stick out at right angles are the same length— http://blog.zog.org/images/pieFH7.png
8) Do the same for the other pie slices. For added yummy subtlety, use gradients not from “colour” to “white” but from “colour” to “lighter version of same colour” (drag the left swatch from the gradient fill thingy to the mixer, adjust lightness or K value, drag back to the right hand swatch)— you should end up with something like http://blog.zog.org/images/pieFH8.png
9) Now for the slight of hand: a soft shadow. There are probably a zillion ways to do this, but this is how I do it :)
a. Add a circle a little larger about the same size as the pie chart— http://blog.zog.org/images/pieFH9a.png
b. Duplicate that circle—http://blog.zog.org/images/pieFH9b.png
c. Remove strokes from both circles. Make the original circle a little larger and change the fill to white. Fill the second circle with light gray. Align both circles horizontically and vertically—you should get something like this http://blog.zog.org/images/pieFH9c.png
d. Now select both circles and go to Extras > Create > Blend—http://blog.zog.org/images/pieFH9d.png
e. Do Modify > Arrange > Send to Back (or ctrl-shift-down arrow)—hey presto! http://blog.zog.org/images/pieFH9e.png
It’s not the tool that is important, it’s the designer. Once you’ve seen a design (like Veerle’s chart) it’s trivial to copy it, in Illustrator or Photoshop or Freehand or Flash, or for that matter Powerpoint or Excel or Word or whatever you want.
The hard part is coming up with the design in the first place.
5
Step 9a should read “Add a circle about the same size as the pie chart”, sorry.
6
Thank you Veerle for this tutorial! :D
7
Hmm, how is this a tutorial? This is just a description of how to use the chart-drawing feature in Illustrator. Presumably, you could read the manul or help docs to learn this.
I mean, adding some built-in effects to a built-in tool isn’t really that interesting, is it? You get a million of these kinds of tutorials over at About.com.
8
1 - adobe’s manual sucks!
2 - for a noob like me it’s a tutorial.
peace.
//static
9
Thx for share this, :D
10
This is great. I never learn about this is school. I think I will used illustrator more often now.
11
Neat demo!
It’s a little hard to see the Mozilla and Camino portions of the pie chart for some reason, although I guess it is just proportional relative to the rest of it, via Illustrator’s built-in pie chart.
I like the hover effect you used for your copyright notice, too! Even the alt tags are in there, aren’t they?
12
Do you hear this Adobe? Maybe I’m in for a bit of discount for next purchase ? :-D
@Jackie, yes it is indeed hard to see these 2 tiny pieces since they are less the 1%.
I like the hover effect you used for your copyright notice, too! Even the alt tags are in there, aren’t they?: I’ve used title attributes in my link to give additional info (that the link will open in a new window).
13
Just what I needed at the just right time!
You’re a lifesaver!
14
Not a tutorial... It seems that somebody left the door open of the cage where are the trolls are hidding :-D Well to the wanker who doesn’t have the guts to use his name here ... please don’t let the door hit your ass on your way out :-)
15
Veerle: thought you’d be interested in this:
http://www.sitepoint.com/blog-post-view.php?id=275963
:)
16
Super-duper again Veerle… mucho tnx!
17
Hi Veerle .. just found your blog today and it was awesome.. i subscribed as member too (^^).. hope you’ll be making another great tutorials for us newbie