信息图制作教程案例

当大家看到很多好看的信息图的时候最喜欢问的两个问题是:用什么软件做的?怎么做的?

在工具选择上,使用Adobe Illustrator,制作过程大家可以从这些教程案例中学习。

步骤 1 首先使用矩形工具(M)画出背景,设置径向渐变。

步骤 2 该信息图的构思是四列分布,先建立参考线。

步骤 3 复制粘贴出同一个形状,顶部对齐,两个形状相接。形成四条参考线。

步骤 4 在中间的那条参考线上画一个白色的长方形矩形,与参考线中心对称。将原来的参考线删去,保留与长方形矩形的两个边重合的两条参考线,这样就将原来的一条参考线变为固定间距的两条参考线,同理处理其他的两条参考线。(这些参考线有利于后面的内容位置的精确)

步骤 5 使用文字工具添加信息图的标题,可以通过字体的不同、文字粗细的不同、颜色的不同、字体轮廓的再加工等方式呈现标题信息。

步骤 6

在本图的设计中,决定使用圆形作为装饰元素。使用圆形工具绘制大小不同的圆形,并摆放在不同的位置上。将圆形添加不同的颜色,也可以调整圆圈的透明度。

步骤 7

将一部分的圆圈放在标题的右上方。

步骤 8

使用AI中的图标工具绘制饼图,将需要呈现的数据填入数据区域,工具会自己生成对应的饼图。

步骤 9

这个饼图是自动编组的,即所有组成这个饼图的元素都处于编组状态,如果需要对饼图进行操作时需要点击”对象-取消编组”即可对饼图进行颜色变化、形状变化等操作。同样也可以旋转饼图的角度,在饼图上添加数据。

步骤 10

同理制作其他的饼图,并绘制虚线将饼图隔开。也可以绘制实线将内容和内容模块之前分开。可以绘制一条浅色和一条深色的线条合并造就凹陷的效果。

步骤 11

同理绘制条形图。

步骤12

使用文字工具,与参考线重合,将文字填充在其中。

步骤 13

使用圆角、直角矩形、椭圆工具绘制小人的各个部分,然后将需要合并的部分选中,进行合并。

步骤 14

为了让这个小人承载更多的信息,我们将小人和图标相结合。按照之前的方式绘制一个与小人同高度的图表,取消图标编组。将图标和小人一起选中,点击路径查找器-分割,然后取消编组,删除多余的内容即可得到第三张图的效果。

步骤15

同理可以绘制折线图。

步骤 16

同理绘制条形图。如果需要增强视觉效果,可以在图标上增加一些之前设计的圆圈作为装饰。

这就是这张信息图的诞生记!

原文发布于微信公众号 - 大数据挖掘DT数据分析(datadw)

原文发表时间:2014-07-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

SVG基础知识 Adobe Illustrator绘制SVG

此外还有阴影渐变,等滤镜,等就太复杂了,设计到矩阵变换等高等数学的内容,自己有心无力。

1375
来自专栏WindCoder

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度。 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里...

1631
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

5590
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

37510
来自专栏九彩拼盘的叨叨叨

前端学习 第1周 第5天

905
来自专栏HTML5学堂

前端特效开发 | 点击查看大图相册效果

HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效...

4598
来自专栏腾讯NEXT学位

药药切克闹!用酷炫的vue~制作酷炫的menu~

4055
来自专栏懒人开发

(1.4)James Stewart Calculus 5th Edition: Graphing Calculators and Computers

在电脑的展现窗口或者屏幕中,矩形部分,我们叫 矩形视图。(不知道这样翻译好不好,反正理解成一个矩形区域就行)

904
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

4053
来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

2274

扫码关注云+社区

领取腾讯云代金券