You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

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 ;-)

Illustrator Charts

Want to learn more?

VECTORTUTS+ Vector Tutorials and 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

gravatar

1

permalink this comment lazymouse Mon Jun 27, 2005 at 06.27 am

it’s times like this that I wished I’d bought Illustrator instead of Freehand!


gravatar

2

permalink this comment Raven Mon Jun 27, 2005 at 07.06 am

Great scott ! Another one to store for future use (very short future…) :-)


gravatar

3

permalink this comment AkaXakA Mon Jun 27, 2005 at 07.18 am

Fantastic!


gravatar

4

permalink this comment Michel Vuijlsteke Mon Jun 27, 2005 at 08.57 am

@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.


gravatar

5

permalink this comment Michel Vuijlsteke Mon Jun 27, 2005 at 09.27 am

Step 9a should read “Add a circle about the same size as the pie chart”, sorry.


gravatar

6

permalink this comment Static Mon Jun 27, 2005 at 11.08 am

Thank you Veerle for this tutorial! :D


gravatar

7

permalink this comment Not a tutorial Mon Jun 27, 2005 at 12.27 pm

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.


gravatar

8

permalink this comment Static Mon Jun 27, 2005 at 01.15 pm

1 - adobe’s manual sucks!
2 - for a noob like me it’s a tutorial.


peace.
//static


gravatar

9

permalink this comment Magicsoul Mon Jun 27, 2005 at 03.50 pm

Thx for share this, :D


gravatar

10

permalink this comment andpro Mon Jun 27, 2005 at 05.34 pm

This is great. I never learn about this is school. I think I will used illustrator more often now.


gravatar

11

permalink this comment Jackie Mon Jun 27, 2005 at 07.31 pm

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?
 


gravatar

12

permalink this comment Veerle Tue Jun 28, 2005 at 01.11 am

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).


gravatar

13

permalink this comment Kate Tue Jun 28, 2005 at 01.49 am

Just what I needed at the just right time!

You’re a lifesaver!


gravatar

14

permalink this comment Veerle Tue Jun 28, 2005 at 02.57 am

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 :-)


gravatar

15

permalink this comment lazymouse Tue Jun 28, 2005 at 06.43 am

Veerle: thought you’d be interested in this:

http://www.sitepoint.com/blog-post-view.php?id=275963

:)


gravatar

16

permalink this comment pixelEngine Wed Jun 29, 2005 at 09.36 am

Super-duper again Veerle… mucho tnx!


gravatar

17

permalink this comment echizen Thu Jun 30, 2005 at 01.12 am

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



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist