Create Infographics | Visual.ly. How 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 in Adobe Illustrator. Start by using the Rectangle Tool (M) to draw a shape. Give it a subtle radial gradient too. 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.
Condense the shape so it fits within the left-most guide and centre guide. Move the shape over to the right and add another guide to the centre here. Using the Rectangle Tool (M) draw a thin white box on the centre line that will be the width of the gap between the columns. Repeat the process for the other columns with your final result being below. Give the circles a variety of gradients. That's it! 製作視覺資訊圖表（infographic）的三大要素及相關工具. ［image credit：Picturelab.tv］ 資訊爆炸的年代，不難發現一個人能夠處理的文字及數字量有限，一天就形成了15億條資訊，140萬個Tweet及2百萬個Youtube影片： 這些資訊如果沒有經過完善的分類及分析，是絕對讀不完的。 因此上次Inside介紹了資訊圖表（infographics)，這次要介紹的除了一些資訊圖表的Startup外，還要來談一下要用甚麼工具去做出一個視覺資訊圖表。
先來看看這個新的視覺資訊圖表startup － Visual.ly，目前服務還沒有對外公開，但是從一些小地方看的出來他們是一間有趣的Startup，這個Startup是由Mint的視覺資訊圖表設計師Stewart Langille 和 Lee Sherman創辦的，背後由Dave McClure的500 Startups支持，目的應該是要做一個連結視覺資訊圖表設計師和需要資訊圖表分析公司的平台，也許日後也會有分享製作圖表的論壇在Visual.ly上。 其實之前visualizing.org就有類似的服務，之前對infographics有興趣的讀者可以到該網站看看。 雖然一張好的視覺資訊圖表可能價值$30,000美元，但是這樣一個包含著重大資訊的的視覺資訊圖表不完全是由網路上的視覺資訊圖表產生器自動產生的，而背後其實隱藏著很多的準備功夫以及圖片後製能力。
首先我們必須知道視覺資訊圖表是由那3個元素組成：分別是故事（idea），數據及設計。 故事（idea），數據及設計三個元素特別代表了那些人會比較容易入門視覺資訊圖表？ 分別是是工作領域在設計，傳播媒體及數據分析這三個類別的人，好的視覺資訊圖表必須要具備這三個領域的專長，因為要擅長收集及分析數據才能產生一個有內容的圖表，另一方面要有良好的設計能力，擅長使用圖像編輯軟體，加上好的邏輯才能把大量的資訊整理成一個主題式的圖表。 姑且不論自己原本是屬於那一個類別的人，其實以infographic入門來説，只要懂得基本繪圖軟體，加上以下的一些網路協助工具，其實就可以做出一個視覺資訊圖，只是不一定會是一個好的視覺資訊圖。 主要步驟是： 1. 2. 3. 4. 如果不想用以上的工具，也可以將就使用Excel、numbers及Google Doc上輸入數據產生圖表。 5. 6. 7. Visualizing.org | Data Visualizations, Challenges, Community. 新闻别动队 PressMine | 翻译：如何设计信息图示(infographic) 信息图示的设计是一个灰常复杂的过程，这篇文章展示的只是整个过程的冰山一角，准确的说，是所有工作都完成得差不多了之后的收尾部分。 看完了你只会有更多的困惑，诸如“这图怎么来的？” 、“怎么想到这样安排的？” 但至少这篇文章清晰地展示了信息图示设计需要注意的一个核心原则和三个关键要素： 核心准则：一切都是为了让读者与内容更好地沟通。 欢迎勘误！ ———————————-废话与翻译的分界线————————————– 信息图示能够以比普通文本牛B得多的方式呈现信息。 这幅信息图示展示了计算机编程领域的先锋，内容基于对各种编程语言的历史和现状所进行的分析。 图示上所有先驱者都对编程有巨大影响力。 你也许还会注意到，一些重要的算法——诸如dynamic programming、brute force 和 hash tables——没有出现在图示中，是因为在单独一幅信息图示里解释这些算法实在是太困难了。 信息图示是信息、数据和知识的视觉化呈现，因此，布局、用色和文字设计对于读者的理解来说都至关重要。
根据现有资料，我决定将图示分为三个主要部分： 在计算机编程历史中最重要的人 一个编程历史的大事时间表 程序语言的统计信息 设计目标是让信息图示简洁又美观。 红色方块表示插画，箭头表示时间线，蓝色矩形表示统计信息。 第一个布局很简洁，但是缺少作为一幅好的信息图示应该具有的吸引力。 第二个布局中，插图摆放成圆圈形状，但是要把每幅插图的相关信息（即图说）也摆放成圆圈会非常困难。 我决定使用一个结合了sine wave 和 golden rectangles（类似黄金分割线这样很牛B但不能证明的设计定理）的版面布局，这两个玩意我 在此前的文章讨论过 （你们就自己去看吧，看明白了告诉我）。 我用 Pixus 创建了一个由黄金矩阵组成的网格，如果你要创建多重黄金矩阵，这个小工具很方便。 选择正确的色彩是平面设计中最重要的事情之一。 我选了浅金色（#f9ebb3）作为背景。 我选择“学院”色系作为字体颜色，因为它与背景色彩和插图融合得很好，我们都知道，对比为王，所以我在插图部分主要使用原色，因为原色在文字块里提供很好的对比效果。 参考链接： Applying Mathematics To Web Design - Smashing Magazine. Advertisement “Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”
Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. Layouts featured in this post were created specifically for the purpose of this article. Golden Ratio and Golden Rectangle The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987.
We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. Large view Large view Books. Infographics. Infographics & Data Visualizations - Visual.ly. Infographics Library - Biggest Infographics Collection on the Internet Infographics Library. Cool Infographics - Blog.