Illustrator绘制卡通风格的应用程序图标

2016-02-16 18:56 41 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Illustrator绘制卡通风格的应用程序图标,一起来学习了解下吧!

【 tulaoshi.com - Illustrator 】

聊天应用程序图标,头脑风暴你会联想到什么,这里想到的是送邮件的小鸟。本教程主要讲解图标从最初的草图到矢量图标设计思路。简易教程,大神勿喷。

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

开始绘制草图

把头脑中的想法大概画出来,多画几版,可以不用画的很细。前期也可以收集一些相关的素材,设计应用程序图标时就要考虑图标放在应用程序商店时怎样识别度更高。所以这里选了小鸟的头部为主体,加上邮递员的帽子。

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

多画几张草图 从中挑选一个合适的

接下来风格的定位,可以到Dribbble找找灵感。

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

色彩线条风格确定

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/illustrator/)

第1步:

新建尺寸1024 x 1024文档,这是图标最大尺寸。本教程制作的是ios应用程序。

设置网格线间隔:编辑首选项参考线和网络(10px,10)

视图显示网络;视图对齐网络;

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

新建文档 设置尺寸和色彩

第2步:置入草图

文件置入,然后置入草图,在链接的文件中点击嵌入,不透明度50%,重命名为素描,并点击眼睛旁边图标锁定该图层。在素描层上新建一层来绘制形状。

分析草图,看看用什么几何形状可以更方便的勾勒出来,用不同的颜色描边,可以更好的区分。主要用的到是钢笔工具、路径查找器(圆形,矩形,三角形,曲线等)详情请看下图:

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

第3步:调整图层

文件管理,把每一个元素放在单独的图层并命名。图层顺序如下:

1. 帽子

2. 头发

3. 眼睛

4. 嘴

5. 颈

6. 头

7. 背景圈

8. 素描

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

有条理的排序

第4步:着色

在画好基本形后,接下来就是调整颜色(颜色数量最好不要过多)。这里选用的是ios7中常用的颜色。

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

ios7 色值表

这是给图形上的基本颜色,在这里左边和右边是分开的,左边75%不透明度和右边100%不透明度相同颜色,这样看起来不会很平。打开窗口颜色参考(Shift+F3)设置不同的颜色。选择四色组合2,吸管工具(I)吸取ios7中的颜色,就可以在颜色参考中选择合适的颜色;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/illustrator/)

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

颜色设置

这里顺便介绍一 形状生成器工具(Shift+M),它可以方便快捷的合并和减去形状。

如果你想把左边和右边的图形组合在一起,可以同时选中左右图形在使用形状生成器工具(Shift+M),然后单击其中一个图形拖动到另一个,你会看到一个加号,表示形状将被添加到当前形状,按下Alt将显示一个减号,表示减去当前选中的形状;

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

形状生成器工具

第5步:添加细节

画上眉毛,给眼睛、头发、嘴、头、帽子加上淡淡的阴影,可尝试不同用颜色看看效果,细节不宜太多,因为我们这是扁平的风格。

为了更能突出小鸟,复制整个图形,合并图形,并调整图层放在圆与头之间。打开窗口外观。设置白色描边为6pt,添加新红色描边12pt。在组件面板下中选择风格化阴影,添加淡淡的阴影,如下图:

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

添加细节

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

添加阴影效果

第6步:图标ios7模板

把我们画的图标放在ios7应用程序图标模板上展示效果;

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

图标在iOS模板效果

第6步:生成图标

使用Photoshop的动作模板来生成不同尺寸的图标,在把做好的图标放进模板;

Illustrator绘制卡通风格的应用程序图标,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1571431.html

延伸阅读
在本小节的实例学习中,通过将传统人物形象卡通化,使画面产生前卫另类的风格。画面色彩丰富,颜色过渡自然,对细节的刻画使整个画面精致鲜活起来,塑造出传统风格的商业插画效果。 制作步骤 (1)运行CorelDRAW,新建一个空白文档,保持其属性栏的默认设置。选择工具箱中的矩形工具在页面中绘制矩形并填充颜色。然后按下 键的同时拖动左右控...
标签: PS PS基础
鼠绘,即为使用鼠标借助图形图像处理软件来进行制作简单的说就是用鼠标画画。使用鼠标配合 电脑软件进行绘画,因为要求简单,所以在网络上很是流行。 入门 1.熟悉PS每一个工具的基本作用 2.狂练钢笔工具,鼠绘90%都是靠钢笔,没有技巧,没有诀窍,没有速成,唯一的就是多练,因为钢笔是一个360度立体的工具,每个一点都可以扭曲成不同的角度...
标签: PS PS基础
本教程的制作方法非常简单,以钢笔工具勾图为主。先制作好一个完整的头像,其它的复制后改下颜色即可。这些看似简单的卡通图像,现在非常流行,学起来咯。 最终效果: 1、新建立文档,大小:1024 x 768,设置前景色#683c19,背景色为#341906.,渐变填充,如下所示: 2、新建立一个图层,使用矩形工具,设置颜色为#2d1807绘制如下区域...
标签: PS PS基础
本教程主要使用Photoshop绘制卡通风格的QQ头像教程,作者没有美术基础大触请轻喷,作者主要鼠绘,板子可以不用,没有板子且不会用钢笔请出门右拐学习钢笔教程。 效果图: 附带圣诞版 嗯,如果不是大神的话,最开始就先打打草稿吧, 不用仔细画,起码先把脑海里的大体想法搬到屏幕上,因为鼠绘肯定要用到钢笔,画个大概的草稿,等开始...
绘制卡通石头在用Flash制作卡通动画与MTV时,石头也是经常出现的,本实例就教大家如何绘制石头。实例效果如图6-1所示。 图6-1 最终效果图 制作时间:5分钟 学习难度:★★☆☆☆ 核心技术:了解绘制Flash石头时的几种画法;使用【钢笔工具】、【部分选取工具】绘制石头形状。 理论浅谈:Flash石头的几种画法。 1.Flash石头时的几种画法...

经验教程

179

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部