Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design

如何在Adobe Ilustrator中创造一组安卓桌面图标

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Yushine (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

在今天的教程中,我们将在我们的标准流程中做一点小改变,和解决一个我想要做很久了的项目。如果你从标题中不能想象到,没关系,我们将创造5个简单的图标,你可以转变为办桌桌面图标,应用于任何你可能创造或者创造相关的未来的app中。

至于这个过程,我们会使用到你的几何形状的基本选择,结合对齐面板和一些其他工具,是你可能在每天的工作中已经使用到的

也就是说,抓一批新鲜的咖啡,让我们开始吧。

噢,不要忘了你可以一直通过浏览GraphicRiver扩展这个项目,你可以在那里找到大量优秀的安卓图标包,就等着被点击。

1.如何创建一个新的文档

因为我猜你已经有Illustrator并在后台运行,打开它并让我们设置一个新建文档文件 > 新建 or Control-N)来使用如下设置:

  • 画板数量:1
  • 宽度:800px
  • 高度:600px
  • 单位:像素

并按 高级 标签

  • 颜色模式:RGB
  • 栅格效果:屏幕(72ppi)
  • 预览模式:默认值
setting up a new documentsetting up a new documentsetting up a new document

快速提示:你可能注意到一些细节,用像素网格来对齐新对象的命令不见了,这是因为我用的是新版CC 2017软件,一些大改变让Illustrator在形状对齐到像素网格的操作有了改变。

2.如何设置定制网格

因为我们要使用像素级工作流创建图标,所以我们要设置一个好用的小网格,这样我们才能够完全控制我们的形状——如果我们运行旧版本的软件。

步骤1

进入 编辑>偏好设置>参考线&网格 子菜单,并调节如下设置

  • 网格线间隔: 1 px
  • 次分隔线:1
setting up a custom gridsetting up a custom gridsetting up a custom grid

快速提示:你可以阅读 Illustrator的网格系统是如何工作 的当中学习更多关于网格

步骤2

我们建立的我们的定制网格后,所有我们需要达到的目的是确保我们的形状看起来清晰,找到显示网格命令在视图菜单下,每次你将和像素预览命令转换进入像素预览模式。

现在,如果你是整个“完美像素工作流”的新手,我强烈建议你进入我的如何创建完美像素工作教程,不需要太多时间久将帮助你提高你的技术技能。

3.如何设置面板

创建完新建文档,通过使用一组面板来构建我们的项目是个好主意,因为这样我们可以通过一次聚焦一个图标来保持稳定的工作流。

也就是说,打开图层面板,并创建共六个图层,我们将重命名如下:

  • 图层1:参考网格
  • 图层2:电池
  • 图层3:设置
  • 图层4:消息
  • 图层5:闹钟
  • 图层6:照片
setting up the layerssetting up the layerssetting up the layers

4.如何创建参考网格

参考网格(或基本网格)是一组精确的参考表面,这允许我们通过聚焦尺寸和一致性来创建我们的图标。

通常,网格的尺寸决定了实际图标的尺寸,它们应该是你开始一个新项目的第一个决定,因为你将一直想要从最小可能的图标开始,在此基础上创建。

现在,因为我们要创建图标并意图让它们中使用实际的Android操作系统,我们必须根据他们的建议的大小和格式规范,并建立一个96*96 px 的定制网格,周围用 4 px 来填充。

步骤1

首先锁定参考网格层,然后用矩形工具(M),并创建一个 96*96 px 橘色(#F15A24)形状,这将帮助定义图标的总体规模。

creating the main shape for the reference gridcreating the main shape for the reference gridcreating the main shape for the reference grid

步骤2

添加另一个小一点的 88*88 px 颜色为#FFFFFF的矩形形状,这将作为我们的绘图区域,从而使我们用 4 px 填充周围。

creating the main shape for the active drawing areacreating the main shape for the active drawing areacreating the main shape for the active drawing area

步骤3

将2个正方形使用快捷键 Control-G 编组来组成参考网格,然后创建3个复制的正方形,之间的间隔距离为24 px,确保他们和画板中心对齐。

一旦你完成了,锁定当前图层并移动到下一个,我们将开始我们的第一个图标。

creating and positioning all the reference gridscreating and positioning all the reference gridscreating and positioning all the reference grids

5.如何创建一个电池图标

我们将通过创建电池图标来开始这个项目,它可用于节能的app,甚至一个状态指示器,因为它非常基本。

也就是说,确保你在正确的图层(这将是第二个),然后放大第一参考网格,这样我们可以开始。

步骤1

从创建一个图标背景开始,使用一个88*88 px 的圆,我们使用 #00C853的颜色,之后,将它与下面的画图区域中心对齐。

creating and positioning the main shape for the battery icons backgroundcreating and positioning the main shape for the battery icons backgroundcreating and positioning the main shape for the battery icons background

快速提示:因为Google足够友好地发出颜色标准设计规范,我最终混合和匹配一组值,应用于背景中。

步骤2

创建电池的主要部分用 24*40 px 的矩形,采用 #FFFFFF的颜色,然后将它和大圆中心对齐,距离底部边缘 20 px

creating and positioning the main shape for the battery icons bodycreating and positioning the main shape for the battery icons bodycreating and positioning the main shape for the battery icons body

步骤3

将我们刚刚创建的形状转变为一个轮廓,通过翻转它的填充描边Shift-X),然后设置它的粗细4 px边角圆角,从这个描边面板。

turning the battery icons body into an outline using the stroke panelturning the battery icons body into an outline using the stroke panelturning the battery icons body into an outline using the stroke panel

步骤4

创建第一个状态指示器棒,用一个 12*4 px矩形(#FFFFFF)或一个12 px 宽的描边(#FFFFFF粗细为 4 px,我们将它与电池主体对齐,留一个 4 px 的间隔给它。

creating and positioning the battery icons first state indicator barcreating and positioning the battery icons first state indicator barcreating and positioning the battery icons first state indicator bar

步骤5

增加2个指示棒,和另一个之间垂直叠放且距离为 4 px,之后将它们编组(Control-G)。

adding the remaining state indicator bar to the battery iconadding the remaining state indicator bar to the battery iconadding the remaining state indicator bar to the battery icon

步骤6

通过添加顶部的帽子来完成这个图标,我们将用一个较小的 8*4 px 的矩形(#FFFFFF)来创建,将它与电池主体居中对齐,距离为 6 px4 px的填充+ 2 px的上半部分)。

一旦你都做了,不要忘了选择并编组(Control-G)所有电池的组合形状,对所有的图标的组合形状做同样的事情。

finishing off the battery iconfinishing off the battery iconfinishing off the battery icon

6.如何创建设置图标

假设你已经成功地完成了第一个图标,锁定它的图层然后转移到下一个图层(应该是第三个图层)并让我们开始开始做设置图标吧。

步骤1

让我们做和先前图标一样的工作,从创建一个 88*88 px 圆的背景开始,颜色使用#2196F3,然后使它与绘画区域的中心对齐。

creating and positioning the main shape for the settings icons backgroundcreating and positioning the main shape for the settings icons backgroundcreating and positioning the main shape for the settings icons background

步骤2

开始做中间的滑块通过创建一个 4*32 px 的矩形或一个 32 px 的长线段,粗细设置为 4 px,颜色用白色(#FFFFFF)然后使它与大圆的中心对齐,距离大圆顶部边缘为18 px

creating and positionign the main shape for the settings icons center slidercreating and positionign the main shape for the settings icons center slidercreating and positionign the main shape for the settings icons center slider

步骤3

创建这个滑块的状态指标用一个12*4 px的矩形(#FFFFFF),我们将它与先前创造的形状居中对齐,并与它的底部边缘距离为 4 px

creating and positioning the main shape for the center sliders state indicatorcreating and positioning the main shape for the center sliders state indicatorcreating and positioning the main shape for the center sliders state indicator

步骤4

添加滑块的较低的部分用 4*12 px 矩形(#FFFFFF),放置在状态指示棒的下方,然后选择并编组(Control-G)这3个形状。

creating and positioning the main shape for the center sliders lower sectioncreating and positioning the main shape for the center sliders lower sectioncreating and positioning the main shape for the center sliders lower section

步骤5

使用小一点的 4 x 12 px 矩形(#FFFFFF)创建顶部左边的滑块,我们将它与中心滑块的顶部边缘对齐,距离中心滑块12 px

creating and positioning the main shape for the left sliders upper sectioncreating and positioning the main shape for the left sliders upper sectioncreating and positioning the main shape for the left sliders upper section

步骤6

创建一个 12*4 px 矩形(#FFFFFF)来增加滑块的状态指示器,我们将它与先前创建的形状垂直堆放,距离它的底部边缘 4 px

creating and positioning the main shape for the left sliders state indicatorcreating and positioning the main shape for the left sliders state indicatorcreating and positioning the main shape for the left sliders state indicator

步骤7

我们将通过创建 4*32 px 的矩形(#FFFFFF)来添加底部从而完成通左边滑块,并置于滑块底部。

一旦你完成,选择这三个形状并将它们编组(Control-G)就像我们在做中心滑块那样。

finishing off the settings icons left sliderfinishing off the settings icons left sliderfinishing off the settings icons left slider

步骤8

创建一个左边滑块的复制形状(Control-C > Control-F),我们将放置在圆圈的右边,距离中心滑块 4 px ,完成这个图标。

一旦你完成,不要忘了选择并编组(Control-G)所有的滑块联结部分,这样他们才不会以外被分开。

finishing off the settings iconfinishing off the settings iconfinishing off the settings icon

7.如何创建信息图标

假设你已经移动到下一个图层(应该是第四个图层),放大第三个参考网格并让我们开始吧。

步骤1

用一个 88*88 px 的圆来创建图标的背景,颜色使用 #7C4DFF,然后将它与绘图区域中心对齐。

creating and positioning the main shape for the messaging icons backgroundcreating and positioning the main shape for the messaging icons backgroundcreating and positioning the main shape for the messaging icons background

步骤8

创建消息框左边的主要形状,使用 32*24 px 矩形,我们将使用白色(#FFFFFF)然后放置在距离绘画区域和圆圈顶部边缘都是 20 px 的地方。

creating and positioning the main shape for the messaging icons left text boxcreating and positioning the main shape for the messaging icons left text boxcreating and positioning the main shape for the messaging icons left text box

步骤3

开始调整我们刚才创建的形状,首先调出像素预览模型(Alt-Control-Y),然后在它的底部添加一个新的锚点,距离它左边的形状10 px,通过在左边点击获得添加锚点工具的帮助。

一旦你完成,不要忘了编辑像素预览模型通过快捷键 Alt-Control-Y。

adding a new anchor point to the bottom edge of the messaging icons left text boxadding a new anchor point to the bottom edge of the messaging icons left text boxadding a new anchor point to the bottom edge of the messaging icons left text box

步骤4

继续调整矩形,选择其左下侧锚点通过用直接选择工具(A),然后下拉 8 px移动工具右击 > 变换 > 垂直 > 8 px

adjusting the shape of the messaging icons left text boxadjusting the shape of the messaging icons left text boxadjusting the shape of the messaging icons left text box

步骤5

将产生的形状变成一个轮廓,翻转它的填充描边Shift-X),然后设置它的粗细 4 px,和它的边角圆角

turning the messaging icons left text box into an outlineturning the messaging icons left text box into an outlineturning the messaging icons left text box into an outline

步骤6

冉家一个更小的文本行通过创建一个 10*4 px 的矩形,我们将用白色(#FFFFFF),然后放置在小信息框里,与它的左上角对齐,确保有 4 px 间隔的距离。

creating and positioning the first text line onto the messaging icons left text boxcreating and positioning the first text line onto the messaging icons left text boxcreating and positioning the first text line onto the messaging icons left text box

步骤7

使用一个 20*4 px 矩形(#FFFFFF)来添加一个更宽的文本行,我们将与先前创建的文本行左对齐,并与它的底部边缘距离 4 px

一旦你完成了,不要忘记选择并编组所有的文本框的形状,使用快捷键 Control-G

creating and positioning the second text line onto the messaging icons left text boxcreating and positioning the second text line onto the messaging icons left text boxcreating and positioning the second text line onto the messaging icons left text box

步骤8

创造一个复制(Control-C > Control-F)的小信息框的轮廓,然后对称 (右击 > 变换 > 对称 > 垂直),放置在圆的右侧,距离绘图区域的右侧和大圆底部边缘的距离为 18 px

creating and positioning the messaging icons second text boxcreating and positioning the messaging icons second text boxcreating and positioning the messaging icons second text box

步骤9

完成这个图标,通过删除文本框的重叠部分(红色强调),这样你最终有 4 px 的间隔在它和左边的轮廓之间。这样做,简单地添加一个新的锚点在它的顶部和左边缘,然后删除所有其他的。

一旦你做完,选择所有图标的联结部分并编组,使用快捷键 Control-G

finishing off the messaging iconfinishing off the messaging iconfinishing off the messaging icon

8.如何创建闹钟图标

因为现在你可能已经知道这个训练,锁定图层并继续下一层(这将是第五个),让我们开始报警图标。

步骤1

创建一个 88*88 px 的圆,然后用颜色 #3FFC07,让它与绘图区域中心对齐。

creating and positioning the main shape for the alarm icons backgroundcreating and positioning the main shape for the alarm icons backgroundcreating and positioning the main shape for the alarm icons background

步骤2

创建这个闹钟的主体,用一个 40*40 px 的圆,颜色使用白色(#FFFFFF),然后将它与绘图区域中心对齐,距离圆圈的底部为 20 px

creating and positioning the main shape for the alarm icons bodycreating and positioning the main shape for the alarm icons bodycreating and positioning the main shape for the alarm icons body

步骤3

将我们刚刚创建的形状变成一个轮廓,通过翻转它的填充描边,然后设置其粗细4 px描边面板。

turning the alarm icons main body into an outlineturning the alarm icons main body into an outlineturning the alarm icons main body into an outline

步骤4

选择钢笔工具(P)并绘制时钟的指针,使用4 px 厚度的描边,颜色设置为白色(#FFFFFF),边角圆角,确保与结束的锚点和大圆间有4 px 的距离。

drawing in the little hands inside the alarm clocks main bodydrawing in the little hands inside the alarm clocks main bodydrawing in the little hands inside the alarm clocks main body

步骤5

朝上移动几个像素,创建一个8*6 px 的矩形(# FFFFFF),我们将设置为与大圆的上面部分居中对齐,将它最终放置在与描边的上半部分重叠的位置。

creating and positioning the main shape for the alarm clocks upper sectioncreating and positioning the main shape for the alarm clocks upper sectioncreating and positioning the main shape for the alarm clocks upper section

步骤6

添加一个16*4 px 矩形(# FFFFFF)在我们刚刚创建的形状的顶部,然后将它们一起选择和编组(Control-G)。

finishing off the alarm clocks top sectionfinishing off the alarm clocks top sectionfinishing off the alarm clocks top section

步骤 7

完成图标,通过画出两个对角线段,使用4 px 描边,颜色设置为白色(# FFFFFF)。一旦你完成,选择并编组(Control-G)闹钟的所有组合形状,然后做同样的事为整个图标。

finishing off the alarm clock iconfinishing off the alarm clock iconfinishing off the alarm clock icon

9.如何创建一个照片图标

进入你的第六个也就是最后一个图层,让我们完成这个项目通过创建照片图标。

步骤1

使用一个 88*88 px 的圆(#FF6F00)创建这个图标的背景,与绘图区域中心对齐。

creating and positioning the main shape for the photos icons backgroundcreating and positioning the main shape for the photos icons backgroundcreating and positioning the main shape for the photos icons background

步骤2

创建这个照片的主体使用一个 36*36 px 的矩形,用白色(#FFFFFF)填充,然后与背后的绘图区域中心对齐,并距离顶部边缘 20 px

creating and positioning the main shape for the photos icons bodycreating and positioning the main shape for the photos icons bodycreating and positioning the main shape for the photos icons body

步骤3

将我们刚刚创建的这个形状转化为一个轮廓,通过翻转填充描边Shift-X),然后设置它的描边 4 px,它的边角圆边,从描边面板中。

turning the photos icons main body into an outlineturning the photos icons main body into an outlineturning the photos icons main body into an outline

步骤4

使用钢笔工具(P)绘制一条水平分割线使用一个 4 px 厚度的描边#FFFFFF),放置在先前创建的形状中,距离它的底部边缘 4 px

adding the horizontal divider line to the lower body of the photos iconadding the horizontal divider line to the lower body of the photos iconadding the horizontal divider line to the lower body of the photos icon

步骤5

使用同样的 4 px 厚度的描边#FFFFFF)用圆角连接,开始会出第一个山通过放置你的第一个锚点在照片的左边边缘,距离先前创建的水平线为 10 px

添加第二个锚点在距离第一个锚点的水平和垂直距离都10 px 的位置。完成这个山通过添加第三个和最后一个锚点在水平分隔线上,同时按住 Shift 键画一个完美的对角线。

drawing the photos icons first mountaindrawing the photos icons first mountaindrawing the photos icons first mountain

步骤6

画第二个小的山,使用相同的 4 px 厚度的描边(# FFFFFF),一旦你完成,选择并编组所有照片组成的形状,使用快捷键 Control-G

drawing the photos icons second mountaindrawing the photos icons second mountaindrawing the photos icons second mountain

步骤7

创建图标的使用 28*6 px 矩形底部分,我们将使用白色(# FFFFFF),然后设置为与照片轮廓的较低的部分居中对齐,距离为 4 px。

creating and positioning the main shape for the lower section of the photos iconcreating and positioning the main shape for the lower section of the photos iconcreating and positioning the main shape for the lower section of the photos icon

步骤8

完成这个图标,通过把我们刚刚创建的形状变成 4 px 厚度的轮廓(# FFFFFF)用圆角连接,然后调整它通过添加一个新的锚点在它顶部边缘的中心,我们将它删除为了打开路径(以红色突出显示)。

选择最终的形状和其余的照片的组成元素并将它们编组(Control-G),然后对图标的组成部分做同样的操作。

finishing off the photos iconfinishing off the photos iconfinishing off the photos icon

完成了!

我希望你设法跟上每一步骤中,最重要的是在这个过程中学到新的有用的东西。也就是说,我会在下一个教程里和你见面!

Final DesignFinal DesignFinal Design
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.