Illustrator绘制精致APP图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制精致APP图标的教程。

分享一览:

我们先来看看最终的效果图吧:

 


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

开始绘制草图

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

 


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

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

 


色彩线条风格确定

第1步:

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

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

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

 


新建文档 设置尺寸和色彩

第2步:置入草图

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

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

 


第3步:调整图层

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

1. 帽子

2. 头发

3. 眼睛

4. 嘴

5. 颈

6. 头

7. 背景圈

8. 素描

 


有条理的排序

第4步:着色

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

 


ios7 色值表

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

 


颜色设置

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

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

 


形状生成器工具

第5步:添加细节

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

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

 


添加细节

 


添加阴影效果

第6步:图标ios7模板

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

 


图标在iOS模板效果

第6步:生成图标

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

 


好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的绘制精致APP图标的教程解析分享的全部内容了,各位看到这里的使用者,小编相信大家现在是非常的清楚了绘制方法了吧,那么大家就快去按照小编上面给大家分享的教程自己去制作精致的图标吧。

时间: 2024-08-03 23:19:26

Illustrator绘制精致APP图标教程的相关文章

Illustrator绘制精致APP图标教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下绘制精致APP图标的教程. 教程分享:             好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的绘制精致APP图标的教程解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是非常的清楚了精致APP图标的制作教程了吧,那么各位就快去按照小编的教程自己去尝试着绘制吧.

Illustrator简单绘制洗衣机APP图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下简单绘制洗衣机APP图标的教程. 教程分享: 在Ai软件中,新建一个800*800的文档,选择圆角矩形工具,画一个圆角图形,并填充颜色,如图所示   然后选择椭圆工具,按住shift画两个正圆图形,并填充颜色,如图所示   接着再选择椭圆工具,按住shift画一个正圆图形,并填充颜色,不透明度改为i阿50%,如图所示   接下来选择直线工具,画两条直线,描边改为4pt,最后选择椭圆工具,按住shift画3个正圆图形,并填充颜色. 好了

Illustrator绘制质感电池图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制质感电池图标的教程. 教程一览: 最后效果   下面我们开始学习制作过程: STEP 1 先新建一个文档,把背景设成黑色.设成任何尺寸都可以,我的是600px乘以400px的.我们先做这个电池尾部的金属帽.首先先画出它的形状,就像下面的这样.过渡颜色为90%灰度的灰色,白色和黑色.此外,要给对象1px的羽化,并把透明度调为75%.   STEP 2 复制(ctrl+C)这个对象然后直接把它粘贴到前面(ctrl+F).然后按向右的箭

Illustrator绘制化学玻璃容器图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制化学玻璃容器图标的教程. 教程分享: 1.在Ai软件中,新建一个800*800的文档,选择矩形工具,按住shift画一个正方形,并填充颜色,如图所示   2.然后选择矩形工具,画一个矩形图形,并填充颜色,再选择椭圆工具,画一个椭圆图形,并填充颜色,如图所示   3.选中圆形和矩形,按ctrl+c复制,按ctrl+f粘贴,再按shift+Alt等比例缩放,并填充颜色,如图所示   4.接下来选择椭圆工具,按住shift画3个正圆图形

Illustrator绘制SVG圣诞图标教程一览

给各位Illustrator软件的使用者们来详细的解析分享一下绘制SVG圣诞图标的教程. 教程分享: 一.认识SVG图标 首先,我们来说说SVG这个图片格式.SVG对WEB端非常友好,尤其是近些年显示屏的革新.适应无数手机屏幕尺寸不一的要求,矢量图发挥了自身的特性,那就是无论屏幕尺寸大小,它都显示得非常清楚,而像素级图片相形见绌. 对于WEB来说,"全屏"一直是个问题(因为没有任何人愿意通过手机端去等待一张重量级图片的加载),而SVG是经过简化的矢量格式,它是由XML传输,许多没必要的

Illustrator绘制SVG圣诞图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制SVG圣诞图标的教程. 教程分享: 一.认识SVG图标 首先,我们来说说SVG这个图片格式.SVG对WEB端非常友好,尤其是近些年显示屏的革新.适应无数手机屏幕尺寸不一的要求,矢量图发挥了自身的特性,那就是无论屏幕尺寸大小,它都显示得非常清楚,而像素级图片相形见绌. 对于WEB来说,"全屏"一直是个问题(因为没有任何人愿意通过手机端去等待一张重量级图片的加载),而SVG是经过简化的矢量格式,它是由XML传输,许多没必要的

Illustrator绘制手机振动图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制手机振动图标的教程. 教程分享: 在Ai软件中,新建一个800*800的文档,选择椭圆工具,按住shift画一个正圆图形,并填充颜色,如图所示   然后选择圆角矩形工具,画一个圆角图形,并填充颜色,如图所示   接着选择矩形工具,画一个矩形图形,并填充颜色,如图所示   接下来选择圆角矩形工具,画一个圆角图形,并填充颜色,如图所示   最后选择钢笔工具,勾出两条路径,并描边改为6pt,如图所示   效果如下图所示   好了,以上的

Illustrator绘制手机亮度图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制手机亮度图标的教程. 教程分享: 在Ai软件中,新建一个800*800的文档,选择椭圆工具,按住shift画一个正圆图形,并填充颜色. 然后再选择椭圆工具,按住shift画一个正圆图形. 接着选择椭圆工具,按住shift画一个正圆图形,并填充颜色,再选择直接选择工具,把圆形的锚点删除掉. 接下来选择圆角矩形工具,画一个圆角图形,并填充颜色,再选中圆角图形,按R键,按Alt移动圆角图形锚点的位置到中心点,再按ctrl+D复制,如图所

Illustrator绘制一个地球仪图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制一个地球仪图标的教程. 教程分享: 1.在Ai软件中,新建一个800*800的文档,选择圆角矩形工具,按住shift画一个圆角图形,并填充颜色,如图所示   2.然后选择椭圆工具,按住shift画一个正圆图形,描边改为4pt,如图所示   3.接着选择钢笔工具,勾出多条路径,描边改为4pt,如图所示   4.接下来选择直线工具,画两条直线,描边改为6pt,如图所示   5.最后选择椭圆工具,画一个椭圆图形,并填充颜色,再选择弧线工