在Adobe Illustrator中设计一整套Apple Watch ICON图标

  [复制链接]
admin 发表于 2016-8-15 01:37:15 | 显示全部楼层 |阅读模式
影视动画视频教程
行业: UI设计
模块: 图标设计 
软件: Illustrator 
插件:  
讲解: 电子书
源文件: 包含
格式: 其他
播放时长: -
大小:
等级: 中级
版权: 本资源来自互联网,仅供学习交流
下载链接: 隐藏内容 【注意:请回复本帖获取提取密码;如果本链接失效请加失效帖子举报QQ群:156583568申请更新】

马上注册CG织梦网,结交更多CG好友,下载更多CG素材,让你轻松学习。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标

What You'll Be Creating


在本教程中,我们将创建一套在默认的情况下,能在 Apple Watch 初始主菜单上找到的 Apple Watch 扁平化图标 我们将会使用一些基本的形状和扭曲效果以及一些用更复杂方法制作的新潮的用户界面设计。 让我们开始吧!

1.Apple Watch 图标准则
Apple Watch 的图标被设计成与其他iOS图标非常相似的新潮的扁平化风格,这些图标能在iPhone最新的iOS系统中,iPad或其他苹果设备中找到。 然而有一个引人注目的特定特征:图标是圆形的。 在 你可以下载一个非常漂亮的矢量图标模版让你工作变得更容易。
如果你对制作Apple Watch图标的更深入的理论有兴趣,我强烈推荐你去看官方的Apple Watch界面准则和规范。
也可以查这些非常有用和说明性的文章“创造Apple Watch图标“和Apple Watch图标——权威指南”,人们在这里分享他们免费的模版和创建自定义图标的知识。
现在是时候行动起来创造Apple Watch图标! 如果你想要你的图标成为多像素并且像生活一样真实,如同初始Apple Watch图标一样,你可以在谷歌图片上找一个Apple Watch主屏幕样本的图片。 文件>将其放置到你的画板并且用它作为一个模版,在其顶部画出你的图标,保证所希望的尺寸和比例。 除此以外,只要按着这个教程作为一个灵感的指南,而不是一个创造精确的原始图标复制品的严格的说明。

2.创建时间,邮件,和音乐App图标第1步
首先打开其中一个图标模版(这个教程中,我们将使用80x80px的图标模版适用于38mm 手表)。 转到视图>隐藏网格使网格不可见,如果它干扰到你,但是要确保智能参考线对齐功能可以(你可以在同样的菜单下找到它们)让你工作更容易。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
让我们创建我们第一个图标,一个放置了一个4x4 px圆在模版的中心的时间App。 双击椭圆工具(L)调用弹出的选项窗口,然后前往对齐面板使圆在画板的水平和垂直放向上对齐。 用橙色(#FF9506)填充这个圆。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第 3 步
矩形工具(M)创造一个2 x 40 px我们时钟的秒针。用相同的橙色填充,然后把它中心参考线上,如截图显示的一样。


在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


你可以通过按住 Alt 键的同时单击圆对齐关键对象和秒针。


在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
让我们复制秒针,使它变得更短一点然后选择-60度,如下面显示那样放在参考线上。


在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


现在我们将形成分针的身体。 制作一个黑色4 x 30 px的矩形,然后利用活动角的特征通过拉动小圆圈标记使尾端变圆,利用直接选择工具使他们最大化。(在我们这个例子中是2 px的圆角半径)。


在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
放这个指针在参考线旁边合适的位置(你可以使它小一点,这样它适合图标底子内部的圆形。


在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第6步
创建另一个4 x 20 px尺寸的矩形作为我们的时针。 使其变圆,旋转60度然后放在与分针相反的一变。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第7步
最后,用椭圆工具(L)创建一个 80 x 80 px 白色的椭圆作为图标的底子,然后放在其他所有图标的下面。 太好了! 我们的第一个图标就绪;让我们转到下一个吧。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第8步
现在我们将创建邮件图标。 首先用一个任意颜色 50 x 33 px的矩形制作一个信封。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


多边形工具钢笔工具创建一个有3边的三角形,并且添加2 pt的描边。 对象>扩展使这个三角形变得弯曲。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第9步
添加另一个三角形在信封底子的上面,使其最下面的角圆润,扩展形状。 你可以用橡皮擦工具(Shift-E)擦去顶部和底部的矩形,因为我们不需要它们。



橡皮擦工具(Shift-E)删除顶部的较低的三角形,然后在路径查找器合并这部分三角形。 最后,拷贝底子信封形状(Control-C > Control-F),选择矩形和顶部的形状,然后用路径查找器交集功能切掉信封外面的部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第10步
再次选择矩形和条纹然后应用路径查找器减去顶层功能切除这些线。 将信封的颜色转为白色然后为我们的图标添加一个圆形的底子,用线性渐变从顶部的深蓝色(#2066F0) 到底部的亮蓝色(#1DD4FD) 填充。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第11步
我们接下来的图标是音乐App,仅包含一个元素:一个音符标志。 首先创建一个27 x 11 px的矩形符号。 用直接选择工具选中形状左边的锚点,然后向下拉使形状发生偏斜。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第12步
矩形工具 (M)创建2个形状,然后开始形成符号的“腿”。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第13步
用直接选择工具选中下面方块的3个锚点然后使其角圆化。 然后在路径查找器合并这些形状,并且利用活动角的特点使其变得圆润。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第14步
添加这个符号的第二部分并且使总体形状更加光滑圆润。 制作底子结束这个图标的制作,填充从橙色(#FA5D3B)到粉色(#FF2968)线性渐变。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


3.呈现 世界时钟,秒表,定时器和闹钟图标
第1步
现在我们将转到一套与时间有关的图标,并且全部被创建为一种风格。 首先形成一个48 x 48 px的连圆,并且一个小圆在里面。 使用路径查找器中的减去顶层功能创建一个圆环。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
在第一个形状中创建一个更小,椭圆环并且添加2个交叉线,居中对齐。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在这个形状的上面部分添加一个水平线,在效果>变形>弧的帮助下与其混合。 设置水平弯曲值为-35%



第3步
添加另一个弯曲线在我们球的底部,通过扩展球的形状形成一个由底部深橘色(#ff7632)和顶部亮橘色(#ff9408).的线性渐变的底子用来完成这个图标的制作。 添加一个更小的深橘色 (#e45221)圆并且藏在球形形状的后面,给予更多的对比。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
为了我们下一个图标——秒表——我们将使用来自我们之前以创建的世界时针图标的底子。 从描表中心制作一个 8 x 8 px椭圆,与一个 2 x 25 px矩形对齐作为手表的秒针。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
利用矩形工具  (M)在我们的秒表的顶部添加次要的细节。 为了使秒表的底部更圆滑,利用活动角并且设置角半径为1.4px。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第6步
让我们转到计时器图标上— 它与秒表有着同样的底子。 用矩形工具(M)在圆环顶部的中心创建一个2.5 x 13 px的条纹。 然后抓住多边形工具,设置边数3,或者用钢笔工具(P)画一个三角形。 放在如下面截图显示的那样,因为它小菜一碟。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第7步
选中基本白色圆环和三角形然后用减去底层功能减去圆环左边部分。 在外面图标的中心添加一个6 x 6 px圆。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第8步
最后,旋转这个圆使其它上面的锚点大约向左偏45度。 用直接选择工具(A)拉动锚点,扩大形状。 在控制面板上的转换按钮或用点击锚点工具 (Shift-C)的帮助下转化选中的锚点为角,因此将我们的形状变为手表的指针。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第9步
我们这一组最后图标是闹钟。 它与之前的橘色图标具有相同的底子以及白色的圆环。 闹钟的指针由用矩形工具(M)制作的两个狭窄的条纹形成的。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第10步
让我们利用椭圆工具(L)制作的圆形成一个闹钟的上部分,并且这个圆用剪刀工具(C)点击侧锚点的方法划分为2个相等的部分。 在闹钟底部放置半圆,然后添加两个小"腿"在底部完成这个图标。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


4.创建地图,天气,相机应用图标
第1步
地图图标比较简单且没有太多元素。 首先在其中心形成一个蓝色(#087eff)的40 x 40 px圆 从一个17 x 25 px的三角形形成一个罗盘箭头,导航。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
添加一个米色 (#e5decb)的图标底部。 找到对象>路径>添加锚点,然后选中中间和底部的锚点拉一段距离,形成箭头。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第3步
放置一个宽的垂直的条纹,制作一个26 x 83.5 px矩形横跨图标,然后合并它与另一个宽条纹,放在垂直的位置。 隐藏十字形状在蓝色包含箭头的圆圈后面。 选中图标底部和十字条纹然后用路径查找器划分功能将这个形状分为3个部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
填充图标底部颜色从绿(#78c73d)到色浅粉红色(#fbc7d2)。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
让我们转到天气图标。 用从深蓝色(#2066f0)的顶部到浅蓝色(#1dd4fd)的底部的线性渐变填充基本天空形状。 添加一个黄色(线性渐变从#ffc505到#fee403)圆成为太阳在图标的左边部分。 首先用两个圆形成云:一个25.5 x 25.5 px 圆在模版中心,和一个21 x 21 px 圆在这个图标的右边部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第6步
创建一个43 x 16 px矩形并且使其角圆润有8 px角半径。 对齐这个矩形和圆形,然后在路径查找器合并3个形状形成一个光滑圆润的云。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第7步
用白色填充云且使它半透明,降低透明度90%

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第8步
让我们转到照相机图标。 制作一个灰色的底部圆,用底部深灰色 (#dadcdd)到顶部浅灰色 (#dadcdd) 的线性渐变填充,然后首先从深灰色 (#3c3c3c) 圆角矩形形成相机的侧影。
在顶部添加一个小的 30 x 17 px矩形,然后使其左上的角变圆有7px 圆角半径。 合并这些形状然后也使这些形状之间的角变圆。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第9步
添加一个狭窄条纹在照相机的上端,然后用减去顶层将它减去。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


9 x 4 px的矩形中形成快门图标,然后放在我们模版的中央。 用钢笔工具添加一个箭头来指向快门 设置描边宽度4 pt 然后在描边面板中使端点和边角圆滑。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第10步
为我们的照相机添加最后的细节:形成一个6 x 6 px 大小的亮黄色(#fac81b)的指示灯。 此外,创建一个有4pt 描边宽度的大圆。 如截图显示那样,将这个圆放在照相机右边角底部的位置上。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第11步
对象>扩展这个大圆,转换它为圆环。 选中圆环和照相机,然后应用减去顶层减去圆环,形成对象-玻璃。 然后选择我们相击深灰色的部分并且按下 Control-8转变它们为单独组合形状。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


最后,利用形状生成工具(Shift-M)路径查找器中的相交功能切除我们照相机图标外面不需要的部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


5.制作电话,短信,和远程应用图标第1步
让我们为电话图标制作一个话筒。 创建一个8 x 40 px矩形,然后到效果>扭曲>弧选择27%垂直弯曲值弯曲矩形的左边。 添加2个17 x 20 px矩形在顶部和底部的话筒,然后是它们的角圆润,使形状光滑。 在路径查找器合并全部话筒的部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
通过用删除锚点工具删除 (-)不需要的锚点使听筒左边变得光滑,然后利用活动角的特征是内部变得圆润。 最后,旋转电话45度并且把它放在图标底部的上变,然后用浅绿色 (#86fb71)到深绿色 (#0fd51c)的线性渐变填充。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第3步
让我们用之前用过的相同绿色的底子形成短信图标。 制作一个 40 x 40 px白色圆然后延伸一点边,使形状压扁到 48 x 40 px。 添加一个小小的三角形在白色形状的底部,形成一个言语泡泡。 使三角形下面的角稍微变圆一点。 利用-36%垂直弯曲值的弧弯曲效果使三角形稍微变为弧形。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


这里显示了完整图标的样子。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
我们接下来的图标是远程应用图标,这也是一个包含单个元素的非常简单的图标。 首先,形成一个渐变的底子(从深蓝色#2066f0的底部到浅蓝色#1dd4fd的顶部)。 添加5.3pt宽的白色描边,然后从内部对齐。 在我们的图标的中心放置一个30 x 30 px白色三角形。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
最后,使三角形的角有2.5角半径。 太好了! 这个图标已经到位,所以让我们转到下一个。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


6.创建外出,设置和照片App图标
第1步
外出图标描绘了一个风格化的跑步者的身影。 创一个明亮的底子,用顶部黄绿色(#c2ec38)和底部绿色(#a3fc3f) 的线性渐变来填充。
钢笔工具(P)创建分离的线作为弯曲胳膊,腿,和躯干,添加3 pt 描边宽度以及圆形的端点和边角。 增加躯干的描边宽度的厚度到6 pt 然后添加一个9 x 9 px圆形作为头部。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
对象>扩展线条,然后用黑色填充这个形状。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标

第3步
设置的图标包含一个齿轮。 形成齿轨的底子是从48 x 48 px圆切掉中间部分,制成了一个环。 添加3个有3 pt 描边宽度线条,在图标模版的中心相互连接。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
现在我们需要添加波纹到我们的齿轨。 制作一个 5 x 9 px矩形然后使上端稍微窄一点。 使上面的角有1.6px角半径的圆润。 放这个波纹在齿轨的顶部和底部。
让我们用旋转工具(R)添加更多元素。 选中全部波纹,双击旋转工具(R)调用弹出选项窗口,然后设置旋转值为360/18。 这种方式, Adobe Illustrator将会自动计算出18个形状的合适值。 按下拷贝按钮。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
按下Control-D多次重复我们上一个动作,添加更多元素。 为了完成这个图标,选择所有波纹,转换颜色为白色,然后将所有的波纹一起旋转-10度。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第6步
我们接下来的图标是一个风格化花的照片App。 首先创建一个20 x30 px且具有10 px角半径的圆角矩形形成的花瓣。 复制花瓣然后放其拷贝在图标模版的底部,如下面截图所示。 选择全部花瓣用旋转工具(R)制作8份花瓣拷贝,应用 360/8角值,然后按下拷贝按钮。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第7步
按下 Control-D数次形成八瓣花。 转换花瓣为正片叠底混合模式且降低透明度80%。 让我们应用喜爱的颜色到每片花瓣,从中间最上的开始顺时针移动:橙色 (#fa9700),黄色(#f0e22c),绿色(#b5d558),绿松石色(#6ec19d),蓝色(#71b5e1),紫罗兰色(#8f60c3),粉色 (#d782a4)和红色(#ff2c2c)。
将花放在白色的图标底板上。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


7.呈现股票,活动,存折和日历图标
第1步
股票图标包含一个极简图。 首先制作一个浅蓝色(#02a6f5)的3pt大小的,用直线工具(\)制成的竖线形成的图。 把它放在模版的中间,在一个深色(#3f3f3f)图标底板上。
添加一个蓝色的小圆圈在上面的模版并且应用一个深灰色(#3f3f3f) 1pt 描边,为了使它在视觉上分隔开来。 添加另外4条线在这个图标的两边,用浅灰色(#555555)的3pt 描边
对象>扩展线条并且切除图标底部不需要的部分,无论是形状生成工具(Shift-M)或在路径查找器帮助下都可以。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第2步
钢笔工具(P)画一个有一个1.5pt 描边的锯齿状线条添加到图上以结束这个图标的制作。 扩展线条使他符合图标底子。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第3步
这个活动图标更复杂并且是一个有趣的制作。 它包含3个彩色的渐变圆环。 为了形成这样一个圆环,首先文明需要制作一个混合组。
制作2个相同的6 x 7 px的矩形,其中一个粉色(#ff2b91)一个红色(#f1281e). 选中矩形然后找到对象>混合>建立。 你可以在对象>混合>混合选项编辑这个设置,应用顺滑颜色制作一个漂亮的无缝混合。 拖动创建的混合组到笔刷面板,然后创建一个新的默认设置的艺术画笔

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第4步
创建一个深灰色 (#393839)的圆作为我们图标的底子,然后放置另一个圆在它的顶部,用我们创建的画笔作为描边。 调整圆的尺寸,以便它符合图标模版的外部边缘。 设置描边宽度1 pt,然后选择对象>扩展外观将笔刷描边变为形状。 如果需要,用镜像工具(O)旋转或水平地翻动形状,以便我们有一个从左边粉红到右边红色的圆环。
创建一个粉红色 (#ff2b91)的小圆环放在彩色圆环中间顶部的区域,使它符合形状的高度,用来隐藏两个颜色之间的联系。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第5步
现在我们需要添加一个微妙的阴影以补充其尺寸到圆环。 你可能会注意到,这个环在我们扩展它后被分为几个部分。 这正是我们所需要的! 选择圆环顶部红色的片段,拷贝它然后粘贴在前面(Control-C > Control-F)。 在拷贝层上添加深红色 (#a11b17)到白色的线性渐变,然后转换为正片叠底的混合模式,因此渐变使白色的末端不可见。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第6步
用相同的技术在第一个形状的里面创建两个更多彩的圆环。 创建艺术画笔从黄色(#d8ff06)和绿色(#86e402)的混合组和一个从绿松石色 (#06ffaa) 到蓝色 (#06e3f9)的混合组。 添加小圆和应用柔和的阴影来完成这个图标的制作。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第7步
接下来是存折图标,包含4个小小的象形图:一个信用卡,一个飞机,一个摄像机和一个咖啡杯。 这些象形图都是简约的,并且都由基本的形状在路径查找器活动角特征的帮助下制成的。 你可以从下面一步步的截图看到每个象形图标是怎样连接而成的。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第8步
这个图标的底子由4个不同颜色的条纹构成:红色(#ff4e46),蓝色 (#439eca),绿色 (#3dca36)和橙色(#ffa02b),每个高度都是 20 px。 在形状生成器工具(Shift-M)的帮助下创建一个默认的80×80px 图标的圆形底子,并删除不需要的条纹片段通过选择所有对象,同时按住Alt键,然后单击不需要的部分。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第9步
形成一个3.5 x 3.5 px的圆,与橙色条纹的顶部相交,拷贝它到右键同时按住AltShift键拉动形状。 按住Control-D多次以形成圆的更多的复本。 然后,选中所有复本并且通过按Control-8转化为组合路径。 选中圆形和橙色的条纹应用减去顶层功能切割出洞,使条纹带孔。
最后,放置我们之前创建的象形图在我们图标的中心对齐它们。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标


第10步
我们一套图标最后一个是日历图标 它是由Helvetica Neue 字体制成的文字和一个简单的白色图标底子构成。

在Adobe Illustrator中设计一整套Apple Watch ICON图标

在Adobe Illustrator中设计一整套Apple Watch ICON图标

很好! Apple Watch主屏幕图标已经完成!
这是一个漫长又令人兴奋的任务! 我们已经创建了总计20个组屏幕应用的图标,使用了一些基本形状,弯曲效果和一些技巧和效果。 我希望你能享受跟随这个指南的过程,并且发现一些有趣的技术。 祝你与您的设计好运!




更多图片 小图 大图
组图打开中,请稍候......
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
0229775280 发表于 2016-11-8 15:19:31 | 显示全部楼层
太棒了~感恩^^!!
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

crazybirds7 发表于 2016-10-12 07:40:09 | 显示全部楼层
非常感谢,感谢分享
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

image_lover 发表于 2016-9-2 00:15:53 | 显示全部楼层
感谢楼主分享
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

anima3dmaker 发表于 2016-9-1 00:16:40 | 显示全部楼层
感谢分享啊   好资源
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

39001180 发表于 2016-8-27 23:50:04 | 显示全部楼层
谢谢分享 很珍贵的教程
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

灰白黑 发表于 2016-8-22 21:40:45 | 显示全部楼层
刚好要学习一下,谢谢分享!
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

woaizlf001 发表于 2016-8-21 17:30:22 | 显示全部楼层
感谢提供分享
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

Debyao畅想 发表于 2016-8-21 08:33:53 | 显示全部楼层
感谢提供分享
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

kfan01 发表于 2016-8-21 01:59:11 | 显示全部楼层
thanks for share
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

xiaoye2007 发表于 2016-8-18 16:41:20 | 显示全部楼层
感谢提供分享
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

derman 发表于 2016-8-16 22:06:09 | 显示全部楼层
很用心 感谢分享!
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

tommy871005 发表于 2016-8-16 01:01:16 | 显示全部楼层
thank for sharing
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

笨小孩ai5 发表于 2016-8-15 11:43:35 | 显示全部楼层
好看,学习了
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

jan00112 发表于 2016-8-15 10:49:58 | 显示全部楼层
这教程真是太棒了! 真是辛苦大大了~收藏先~
织梦网限时推出月度VIP会员,50元/月。 截止到2016年11月30日,VIP下载全站资源无需梦币,详情:http://www.cgdream.com.cn/thread-841-1-1.html
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文
 
 
失效帖子处理
失效举报群
156583568
工作时间:
9:00-22:00
 
在线客服(工作时间:9:00-22:00)
18916069001
织梦网微信公众号

Copyright   ©2015-2016  CG织梦网 - 影视动画学习交流平台!  Powered by©Discuz!  技术支持:织梦网     ( 沪ICP备12043823号-6 )