SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Vector Graphics Adobe Illustrator Graph in Illustrator

Graph in Illustrator

This tutorial will show you how to create a visually appealing graph in illustrator. Before we start, let us take a look at the potential outcome of this tutorial. In my case the graph shows the browser usage of Bartelme Design in January 2006.

graph in illustrator

image 2

In a first step open Illustrator and create a new document. Afterwards select the "pie graph tool" from the "tools" palette on the left. Note that by default only the "column graph tool" is visible. In this case just click on the respective icon for some seconds to unveil the other tools.

With the pie graph tool selected click somewhere on your working area. Illustrator prompts you to define the size of the chart - 200x200px should be fine. Now Illustrator will display a grid where you can enter your data. If you want to create a legend you just have to enter the respective label into the first row of the grid. In our case though we won't make use of the automatically generated legend, so just enter the actual data. Click the "apply" button in the upper right corner to update the graph. You may now close the grid

image 3

By default Illustrator displays the different slices in shades of grey. But personally I prefer colored graphs - so we gonna apply some color: Select the "direct selection tool" from the tool palette on the left (Shortcut: A), click on a slice and select the desired color from the color palette. Note: If the color palette is not visible you may display it via "Window - Color" or by hitting the F6 key.

image 4

If you prefer flat graphs then you're basically finished. In our case though we wanna make use of Illustrator's 3D effects. Select the graph and open the "Extrude and Bevel" dialog via "Effects - 3D - Extrude and Bevel". Choose "Isometric Top" from the dropdown menu, set the "Extrude Depth" to about 25pt and confirm by clicking the OK button.

image 5

image 6

Afterwards your graph should look similar to the one on the screenshot on the left. Since you have just applied the effect rather than modified the object you may still change the graph's data as well as the 3D settings.

Basically we are finished. Finally you may enhance your graph by adding a title, a legend or other descriptive elements respectively by adding some visual effects such as a drop shadow or something similar. Enjoy.

image 7

Now that we've learned how to create basic charts using Illustrator's 3D functionality we will enhance them by applying some reflections and subtle gradients. After creating your chart it will probably look similar to the one show in the screenshot on the left.

In a first step select the chart and duplicate it by pressing Cmd+C and Cmd+F. This will create a copy of the selected object and paste it in front of the initial object. In order to better distinguish between the two objects move the new one a few pixel to the top. Personally I prefer to use the arrow keys (Shift+Up) since it's easier to move the object back to its initial position afterwards.

image 8

Now that we have duplicated the graph we need to expand the graph. This is necessary because it's not possible to edit smart objects such as graphs etc. So select the object and choose "Object - Expand…" from the main menu. The result should look similar to the screenshot on the left.

image 9

Now we ungroup the object using the shortcut Cmd+Shift+G twice. After that we can modify each part of the graph. In a next step select all slices via Shift+Click and make sure that the pathfinder palette is being displayed. If that's not the case you can display it via the "Window" menu or by pressing Shift+F8.

Now with the slices selected first click the "Add to shape area" button (1) and afterwards the "Expand" button (2). We have just combined the different slices to one ellipse.

image 10

image 11

Now fill the shape with white color, duplicate it and move it up two or three pixels. Now with both shapes selected first click the "Subtract from shape area" button and afterwards the "Expand" button in the pathfinder palette.

image 12

In a next step we apply an opacity mask to the new shape. So make sure that the shape is still selected and choose "Make opacity mask" from the transparency palette. Now switch to the mask mode by clicking the black rectangle in the transparency palette and draw a white rectangle as shown in the screenshot.

image 13

Select the gradient tool from the tools palette on the left and fill the rectangle with a radial gradient (white to black). The result should look similar to the screenshot on the left. You may now exit the mask mode by clicking the white rectangle in the transparency palette.

You have just created the main reflection for our chart. Next we will create the subtle reflection on the lower left part of the chart. Select the lower part of the graph, right click and select "Release Clipping Mask" from the context menu. Then click "Add to shape area" and afterwards the "Expand" button in the pathfinder palette. Now you have a single shape we can fill with white color.

image 14

image 15

In a next step apply an opacity mask on the newly created shape, draw a rectangle and fill it with a linear gradient so that the result looks similar to the screenshot below.

image 16

Now move both shapes down to their initial position. Then select the lower shape, head over to the transparency palette, change its layer style to "overlay" and its opacity to about 40%.

Creating Graphs

Basically you're finished. Now it's up to you whether you additionally apply a dropshadow, some further reflections, gradients etc. Enjoy.

subscribe to newsletter