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

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

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

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

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

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

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

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

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

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

并按 高级 标签

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

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

2.如何设置定制网格

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

步骤1

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

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

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

步骤2

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

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

3.如何设置面板

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

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

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

4.如何创建参考网格

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

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

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

步骤1

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

creating the main shape for the reference grid

步骤2

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

creating the main shape for the active drawing area

步骤3

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

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

creating and positioning all the reference grids

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

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

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

步骤1

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

creating 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 body

步骤3

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

turning 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 bar

步骤5

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

adding 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 icon

6.如何创建设置图标

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

步骤1

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

creating 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 slider

步骤3

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

creating 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 section

步骤5

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

creating 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 indicator

步骤7

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

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

finishing off the settings icons left slider

步骤8

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

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

finishing off the settings icon

7.如何创建信息图标

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

步骤1

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

creating 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 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 box

步骤4

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

adjusting the shape of the messaging icons left text box

步骤5

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

turning 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 box

步骤7

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

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

creating 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 box

步骤9

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

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

finishing off the messaging icon

8.如何创建闹钟图标

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

步骤1

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

creating 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 body

步骤3

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

turning 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 body

步骤5

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

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

步骤6

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

finishing off the alarm clocks top section

步骤 7

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

finishing off the alarm clock icon

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

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

步骤1

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

creating 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 body

步骤3

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

turning 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 icon

步骤5

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

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

drawing the photos icons first mountain

步骤6

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

drawing 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 icon

步骤8

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

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

finishing off the photos icon

完成了!

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

Final Design
Envato qr branded
关注我们的公众号
Advertisement
Advertisement
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.