分享

一步一步教你作信息图How To Create Outstanding Modern Infographics...

 薄荷馍馍 2013-02-22

How To Create Outstanding Modern Infographics

Tutorial Details
  • Program: Adobe Illustrator CS4
  • Difficulty: Intermediate
  • Estimated Completion Time: 3 hours
Download Source Files

Final Product What You'll Be Creating

This entry is part 3 of 16 in the Infographic Design Session
PreviousNext ?

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.

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多