Tutorial Details
- Program: Adobe Illustrator CS4
- Difficulty: Intermediate
- Estimated Completion Time: 3 hours
Download Source Files
Final Product What You'll Be Creating
A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Jonathan was first published on April 14th 2010.
Merge form and function to create outstanding modern infographics. In this tutorial you will learn that data doesn’t have to be boring, it can be beautiful! Learn how to use various graph tools, illustration techniques and typography to make an accurate and inspiring infographic.
Step 1
Start by using the Rectangle Tool (M) to draw a shape. Give it a subtle radial gradient too.
Step 2
The entire design is based on a grid of four columns. To make the columns first select the rectangle and drag a guide onto the centre of the shape. Drag guides onto the left and right edges of the shape too. Tip: Quickly show the ruler by pressing Command+R.
Step 3
Condense the shape so it fits within the left-most guide and centre guide. Now, add another guide where the centre of this condensed shape is.
Step 4
Move the shape over to the right and add another guide to the centre here.
Step 5
Using the Rectangle Tool draw a thin white box on the centre line that will be the width of the gap between the columns. Add guides to both sides of the small box and delete the centre guide. Tip: Guides are locked by default. In order to delete a guide go to View > Guides > and uncheck Lock Guides. Then, click on the guide and press the delete key.
Step 6
Repeat the process for the other columns with your final result being below. Widen the orange box so it’s slightly larger than the outermost guides.
Step 7
I like to place the most important graphics first and work-in the ancillary charts and graphs afterwards. Pay attention to scale and balance as you’re beginning to place your elements on the page. Below, the combination of heavy and thin text complement each other.
Step 8
Early on you can experiment with placing a main graphic that will help give the piece some visual interest. I chose to use circles as the very tall orientation of the layout will benefit from these contrasting shapes. Using the Ellipse Tool (L) draw some arbitrary circles or varying sizes.
Step 9
Give the circles a variety of gradients. To access Illustrator’s predefined gradients go to Window > Swatch Libraries > Gradients > Bright’s.
Step 10
I’ve placed the first group of circles in the corner and extended them off the page.
Step 11
To ensure a clean edge we’ll clip the circles so that they look like they stop where the background stops. First, draw a rectangle with no fill or stroke. Make sure the rectangle is in front of the circles. Select the circles and the rectangle then go to Object > Clipping Mask > Make.
Step 12
I’m using a variety of graphs in this infographic. To create an accurate pie graph click the appropriate graph then click and drag on your document to create a graph at a specific size. The first graph we’ll plot the data, 50 tutorials with 39 being standard and 11 being premium. Having said that, enter 39 in the first box and 11 in the second. Press the tab key to advance to the next box. Once you’re finished click the checkmark icon in the upper right.
Step 13
Much of the styling of all the graphs is created by hand. To further manipulate the graph ungroup it by going to Object > Ungroup. You’ll receive a dialog as shown below. If you’re satisfied with the graph click OK. Tip: After you’re plotted your graph but before you ungroup it simply control+click on it and go to Data to further edit the information.
Step 14
This step is a matter of preference. I didn’t like how the small gray area was on the left so I flipped my graph using the Reflect Tool (O.)
Step 15
Manually add the graph numbers and key.
Step 16
As expected, I’m using the grid as a basis for how wide my graphs are. To create a dividing line between the graphs use the Pen Tool (P) and draw a vertical line. In the Stroke Palette select Dashed Line and enter 2pt in the first box. Tip: When scaling previously drawn strokes, check or uncheck Scale Strokes and Effect in the preferences panel (Command+K) to achieve un-scaled or scaled strokes.
Step 17
To create the effect of a recessed line draw two lines, one darker and one lighter.
Step 18
Place the darker line slightly above the lighter line to create the illusion of light coming from above.
Step 19
The next graph I’ll create is a Column Graph (J.) Again, click and drag to create the graph size of your choosing. Enter the values for your graph. The scale on the left is automatically generated based on the variables you enter. Click the checkmark icon when you’re finished.
Step 20
Ungroup your graph so that you can make visual edits to it. Below, I’ve condensed the graph so it looks taller rather than wider. Of course I could have just drawn the box for the graph tall but this is after the fact.
Step 21
Below, I want the text that corresponds with the graph to be a set width. To accomplish this, use the Text Tool (T) and click and drag from the top highlighted circle to the lower highlighted area. This will predefine the text area so the information fits perfectly between the guides.
Step 22
To create the icon of the man, use simple shapes. Start with the Rounded Rectangle Tool. Adjust the radius of the corners by holding the up or down arrow as you draw the shape.
Step 23
Draw a rectangle with no rounded corners for the torso.
Step 24
Use another rounded rectangle for the shoulders.
Step 25
Finally, use an ellipse for the head. Select all the individual shapes that comprise the man and in the Pathfinder click Unite. This will give you one solid shape.
Step 26
To create a more stylized graph we’ll use the man to represent the information. Using the Stacked Column Graph Tool click and drag to draw the graph the same height of the man. Enter your variables then click the checkmark icon.
Step 27
Ungroup and get rid of the other numbers and lines. Using the Pathfinder Palette again, click Divide. Now, each section of your man is divided into accurate sections. Ungroup all the shapes and get rid of the extra gray shapes around the edges.
Step 28
Separate each section of the man by selecting them using the Selection Tool and pressing up or down once.
Step 29
To create the scissors you’ll need to use the Pen Tool (P) and freehand draw the shape as shown.
Step 30
This graph is created using the Line Graph Tool.
Step 31
Add the key to the bottom manually and the figures above the points manually.
Step 32
The last graph is created using the Stacked Bar Graph Tool. Again, add the details manually.
Step 33
To add some interest to the design I’ve layered in the circle graphic behind the graphs. There is no secret to the process… as long as it looks good and helps balance the design, go for it!
Step 34
To create the list of comments draw a text box like we did in Step 21.
Step 35
Since comments will span from one box to another click the plus sign in the bottom right corner then click anywhere on the page and a new linked text box of the same size will be created!
Step 36
When dealing with large amounts of text it’s a good idea to create styles for that text. In this case I’ve created a style for the date and tutorial title. Styles make it easy to change all the text at once if you ever need to go back and make a change to color, size, font etc. To create a style first select the text that you want to style. Next, in the Character Styles Palette (use the Paragraph Styles Palette if you’re styling a paragraph of text) click Create New Style.
Step 37
Double click the new style in the Character Styles Palette to open up the options panel. In the options panel adjust your text to suit your liking. Click OK. Note: Even though you check Preview, new styles that haven’t been applied can’t be previewed.
Step 38
With your text that you want to style still highlighted, SLOWLY double click on the style in the Character Styles Palette to apply the style.
Step 39
I’ve created a style for the tutorial title in addition to a style for the date.
Step 40
Finish your design by adding any pertinent details to the bottom.
Final Image Preview
That’s it! You’ve just learned how to create a modern infographic.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jonathan
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Just nice. It doesn’t impress me a lot.
Terrific Post. Clean, simple and effective.
Very nice, thanks
I can’t see the images, broken?
Images are back, try refreshing your browser :)
loved your tutorial, very usefull, great design composition and the colors choice,
i would just place the man graph sided by the information, i’ve just understand after reading the tut.
but you’re great
I can’t see any images??? Is it just me?
The same for me ! :’(
My prayers have been answered… Thank you Jonathan. Please keep these coming.
Kudos… whoa what a day.
Great post! I’ve only ever made 2 infographics, and both in Photoshop – I guess I should make the switch to illustrator…
This is one of the best tutorials ever put up on vetortuts+ and it’s free kudos this is great. But I’m curious how you got some of the colors out of the gradients you mentioned for the ciricles mine didn’t turn out like yours did.
Thank you!
I was just a giving a quick overview of how you could add color. To get even closer to the result I show you’ll have to add more colors to your gradient. After you have at least 3 or 4 colors in one gradient you’ll be able to create more of a variation in the circles. Last, adjust the transparency so some circles are see-through.
OMG. What a brilliant work… 10/10 for both impression and Quality.. Great job. You are the man..
Very nice. Grats.
Hmm…
Can’t see anything but grey squares.
Will try again later I think.
I have been told that some ISPs are having trouble showing some of the images on our blog, this is why you can see other tuts but not this one. We’re looking into the problem now, in the meantime I’m sorry for the inconvenience.
Nice outcome. Did you come up with the gradients or are they available somewhere online?
I came up with them myself. 8)
By far one of the best tuts i’ve seen. Been to your site 2. Awsome work, i’d hire from the front page, it says it all.
The compliments are much appreciated! I’m launching a revised version of my website this weekend that will have even better work and shows it in a manner that is much larger and clearer. The overall concept of the site will still remain though. Definitely do contact me if you’d like me to quote a project for you and make sure to check my site out next week to see the new design.
This is a great technical tutorial for a novice designer in Illustrator, with a wonderful result. I’m a fan of the colors. There’s a ton of orange but it doesn’t feel overpowering, nice work!
pics are broken for me.. tried FF, IE and my laptop :(
Its a problem with a few ISPs. They should work soon, but this is why it doesn’t work on your two computers. I’m really sorry, we’re working to get this problem sorted out.
I always love seeing these type of infographics. They’re very creative at the same time informative and keeps the user captivated into learning the statistics. Great tutorial here, will be using it in the future.
The images don’t load for me either. This has been happening for the last few days.
Wow, amazing result, I really love infographics, however never tried it before, but after reading this, I will ;-)!
Awesome, thank you
all the pics are broken :(
Try refreshing your browser window, they’re working for me now.
Why did you use Helvetica for the headline, and Futura for the body copy?
Not really impressed with this tutorial.
Because I don’t have Helvetica Light Condensed.
Nice image, but I would love to see the method behind your choices in art elements. What information were you first presented with in order to create the info graphic? This information would be helpful for me, as I know how to smatter graphics on a page, but conceptualizing how to take a bunch of random information and make it visually interesting is the challenge I have. Thanks!
No pictures to be seen here, not even after browser refresh… any idea what’s going on?
Yep, I’ve found out that it’s a problem with some ISPs this is why refresh didn’t work. I haven’t come across this before so I thought it could just be a cache issue. We’re working to resolve the problem as soon as possible.
You used blue for standard tutorials in one pie chart but it is white in the other. If these were used to show statistics in the real world, it would be a lot clearer if the colour for each standard and premium were the same on both pie charts.
The way you have done it is just some fancy art based on stats. Not something that shows stats clearly.
It does look good though.
“The way you have done it is just some fancy art based on stats” I would agree with you somewhat. I take any creative liberties desired, especially since this is developed for the purposes of learning. I leave the purely pragmatic approach to “real” projects.
Woooow!! That’s awesome! Thanks for this great post!
B-E-A-U-T-F-U-L, I like method of creating “man icon”.
Easy, fast, good. Well done! Best regards!
Still no images. Just grey boxes? Also, its not just this tutorial its about half of them on the front page too. Refresh doesn’t make any difference and i don’t keep browser cache anyway.
It turns out it’s a problem with some peoples ISP. This is why you can see some posts but not others. Images that are hosted with a particular address aren’t showing up for some people. We’re finding out what providers this is happening with and should have the problem fixed shortly.
Jolly nice.
Nice, thank you for this tutorial!
Hmm, no images. Cleared cache, restarted browser & refreshed. Oh well. Ill try again another day.
Any topic is candy in your hands!!!
Although this is a very clear Illustrator tutorial for using certain components in creating an infographic, simply following these steps will not yield an “outstanding” outcome.
What many digital artists fail to focus on is the purpose of an infographic… which is what message are you trying to convey with the data.
The part where you compare the number of tutorials versus the number of tutorial comments for example. There is a disconnect in trying to represent the data, because you switch from labeling Standard Tutorials from Blue to White. Because the two pie charts are so close together, and the correlation of data is relevant, why not show that due to the low number of Premium Tutorials created, the percentage of comments is also smaller. This might have been a good job for a two tier doughnut chart and using percentages versus numbers to show the correlation.
Making an infographic aesthetically pleasing is only half way up the mountain. You have to understand the data and the message in order for the finished product to be outstanding.
If you’d like an example of a nice looking but a bad infographic.. check out my post on the unboxing the ipad one http://bit.ly/ahfZaZ
Thanks for your comment. I agree, there should be a purpose behind the info that’s shown. However, as I mentioned above, I take any creative liberties desired, especially since this is developed for the purposes of learning. I leave the purely pragmatic approach to “real” projects. This tut is more about how to accomplish creating different graphs and how the various styles of art come together to create an infographic. I’m aware that the info doesn’t correlate with itself as best as it could, but that wasn’t my focus.
Cant see any images… tried all browsers :(
It seems like we have a problem with some ISPs not showing some of our images. we’re working to fix this. I’m sorry for the inconvenience.
Yup, Like Ty I don’t see the images either. Tried multiple browsers, mac and pc…
no images for me either. FF, IE, Chrome, even reading the page from Google Reader. been having this problem on a number of tutsplus pages the past few days. :/
Awesome, thanks.
very useful about understanding “Bar Graph Tool”. Thanks bro.
In the real world of infographic designing, there’s absolutely no ungrouping for stylistic purposes, there’s no rotating pie graphs and the step 33 is absolutely confusing to the final outcome (“do the circles represent data?” one might think).
I very much agree with Magda’s comment: “Making an infographic aesthetically pleasing is only half way up the mountain. You have to understand the data and the message in order for the finished product to be outstanding.”
Thanks for your comment. FYI, I didn’t write the title of the post. 8)
I did! ;)
Great tutorial. I seriously lack skills when it comes to “infographics” but now that I see what else can be done with it, it’s inspired me to be more creative when confronted with a bunch of numbers, figures and charts. Thanks :)
Good tutorial. Unfortunately timed with the release of this infographic which is getting lots of attention:
http://www.flickr.com/photos/philgyford/4505748943/sizes/o/
Lolz.
Beautiful, simply beautiful. Thank you vectuts.
This is the most useful tutorial I have ever seen! Thank you very much! Im not a proffesional designer (Im learning by my own), but this is why I get up from bed every day!
I’m halfway through this tutorial, and I was wondering – wouldn’t it have been easier to do this in InDesign? Can someone tell me?… (I’ve been teaching myself how to use InDesign and haven’t used Illustrator much, so maybe it’s just that I’m not used to the program.)
You’re correct… InDesign is great for working with large amounts of text, however, you cannot make graphs in InDesign. Plus, I wanted to show how this design can be created in Illustrator.
Really Really amazing work…
That’s really amazing, thanks alot for the info!
Who the hell has so brilliant sense of art!?
Thanks for the tutorial, you got some very clean infographics there.
Although I think the coloured circles behind the middle diagram are a little bit to heavy, but thats just a matter of taste.
Thanks!
I can almost make this by myself in cs4 illustrator. What size do you recommend for infographic. I know all are different sizes, but just ball park to set my template near.
Thanks so much,
Great stuff
~Rich
11×17 perhaps
Nice tut, but infographic should be as simple as possible, in above example circles disturb graph information.
Awesome and good timing for me. We’re running a site that will cover West Ham Infographics during their, hopefully not too pitiful, season.
You did skip over a couple of details though, do you have a complete guide or can I fire off a few clarification queries?
What do you need clarification on?