马上注册CG织梦网，结交更多CG好友，下载更多CG素材，让你轻松学习。
您需要 登录 才可以下载或查看，没有帐号？立即注册
 QQ登录
x
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 手表）。 转到视图>隐藏网格使网格不可见，如果它干扰到你，但是要确保智能参考线和对齐功能可以（你可以在同样的菜单下找到它们）让你工作更容易。
第2步
让我们创建我们第一个图标，一个放置了一个4x4 px圆在模版的中心的时间App。 双击椭圆工具（L）调用弹出的选项窗口，然后前往对齐面板使圆在画板的水平和垂直放向上对齐。 用橙色(#FF9506)填充这个圆。
第 3 步用矩形工具（M）创造一个2 x 40 px我们时钟的秒针。用相同的橙色填充，然后把它中心参考线上，如截图显示的一样。
你可以通过按住 Alt 键的同时单击圆对齐关键对象和秒针。
第4步让我们复制秒针，使它变得更短一点然后选择-60度，如下面显示那样放在参考线上。
现在我们将形成分针的身体。 制作一个黑色4 x 30 px的矩形，然后利用活动角的特征通过拉动小圆圈标记使尾端变圆，利用直接选择工具使他们最大化。（在我们这个例子中是2 px的圆角半径）。
第5步放这个指针在参考线旁边合适的位置（你可以使它小一点，这样它适合图标底子内部的圆形。
第6步创建另一个4 x 20 px尺寸的矩形作为我们的时针。 使其变圆，旋转60度然后放在与分针相反的一变。
第7步最后，用椭圆工具（L）创建一个 80 x 80 px 白色的椭圆作为图标的底子，然后放在其他所有图标的下面。 太好了！ 我们的第一个图标就绪；让我们转到下一个吧。
第8步现在我们将创建邮件图标。 首先用一个任意颜色 50 x 33 px的矩形制作一个信封。
用多边形工具或钢笔工具创建一个有3边的三角形，并且添加2 pt的描边。 对象>扩展使这个三角形变得弯曲。
第9步添加另一个三角形在信封底子的上面，使其最下面的角圆润，扩展形状。 你可以用橡皮擦工具（Shift-E)擦去顶部和底部的矩形，因为我们不需要它们。
用橡皮擦工具(Shift-E)删除顶部的较低的三角形，然后在路径查找器中合并这部分三角形。 最后，拷贝底子信封形状(Control-C > Control-F),选择矩形和顶部的形状，然后用路径查找器的交集功能切掉信封外面的部分。
第10步再次选择矩形和条纹然后应用路径查找器的减去顶层功能切除这些线。 将信封的颜色转为白色然后为我们的图标添加一个圆形的底子，用线性渐变从顶部的深蓝色(#2066F0) 到底部的亮蓝色(#1DD4FD) 填充。
第11步我们接下来的图标是音乐App，仅包含一个元素：一个音符标志。 首先创建一个27 x 11 px的矩形符号。 用直接选择工具选中形状左边的锚点，然后向下拉使形状发生偏斜。
第12步用矩形工具 (M)创建2个形状，然后开始形成符号的“腿”。
第13步用直接选择工具选中下面方块的3个锚点然后使其角圆化。 然后在路径查找器中合并这些形状，并且利用活动角的特点使其变得圆润。
第14步添加这个符号的第二部分并且使总体形状更加光滑圆润。 制作底子结束这个图标的制作，填充从橙色(#FA5D3B)到粉色(#FF2968)线性渐变。
3.呈现 世界时钟，秒表，定时器和闹钟图标第1步现在我们将转到一套与时间有关的图标，并且全部被创建为一种风格。 首先形成一个48 x 48 px的连圆，并且一个小圆在里面。 使用路径查找器中的减去顶层功能创建一个圆环。
第2步在第一个形状中创建一个更小，椭圆环并且添加2个交叉线，居中对齐。
在这个形状的上面部分添加一个水平线，在效果>变形>弧的帮助下与其混合。 设置水平弯曲值为-35%。
第3步添加另一个弯曲线在我们球的底部，通过扩展球的形状形成一个由底部深橘色(#ff7632)和顶部亮橘色(#ff9408).的线性渐变的底子用来完成这个图标的制作。 添加一个更小的深橘色 (#e45221)圆并且藏在球形形状的后面，给予更多的对比。
第4步为了我们下一个图标——秒表——我们将使用来自我们之前以创建的世界时针图标的底子。 从描表中心制作一个 8 x 8 px椭圆，与一个 2 x 25 px矩形对齐作为手表的秒针。
第5步利用矩形工具 (M)在我们的秒表的顶部添加次要的细节。 为了使秒表的底部更圆滑，利用活动角并且设置角半径为1.4px。
第6步让我们转到计时器图标上— 它与秒表有着同样的底子。 用矩形工具(M)在圆环顶部的中心创建一个2.5 x 13 px的条纹。 然后抓住多边形工具，设置边数为3，或者用钢笔工具(P)画一个三角形。 放在如下面截图显示的那样，因为它小菜一碟。
第7步选中基本白色圆环和三角形然后用减去底层功能减去圆环左边部分。 在外面图标的中心添加一个6 x 6 px圆。
第8步最后，旋转这个圆使其它上面的锚点大约向左偏45度。 用直接选择工具（A）拉动锚点，扩大形状。 在控制面板上的转换按钮或用点击锚点工具 (Shift-C)的帮助下转化选中的锚点为角，因此将我们的形状变为手表的指针。
第9步我们这一组最后图标是闹钟。 它与之前的橘色图标具有相同的底子以及白色的圆环。 闹钟的指针由用矩形工具(M)制作的两个狭窄的条纹形成的。
第10步让我们利用椭圆工具(L)制作的圆形成一个闹钟的上部分，并且这个圆用剪刀工具(C)点击侧锚点的方法划分为2个相等的部分。 在闹钟底部放置半圆，然后添加两个小"腿"在底部完成这个图标。
4.创建地图，天气，相机应用图标第1步地图图标比较简单且没有太多元素。 首先在其中心形成一个蓝色(#087eff)的40 x 40 px圆 从一个17 x 25 px的三角形形成一个罗盘箭头，导航。
第2步添加一个米色 (#e5decb)的图标底部。 找到对象>路径>添加锚点，然后选中中间和底部的锚点拉一段距离，形成箭头。
第3步放置一个宽的垂直的条纹，制作一个26 x 83.5 px矩形横跨图标，然后合并它与另一个宽条纹，放在垂直的位置。 隐藏十字形状在蓝色包含箭头的圆圈后面。 选中图标底部和十字条纹然后用路径查找器的划分功能将这个形状分为3个部分。
第4步填充图标底部颜色从绿(#78c73d)到色浅粉红色(#fbc7d2)。
第5步让我们转到天气图标。 用从深蓝色(#2066f0)的顶部到浅蓝色(#1dd4fd)的底部的线性渐变填充基本天空形状。 添加一个黄色（线性渐变从#ffc505到#fee403）圆成为太阳在图标的左边部分。 首先用两个圆形成云：一个25.5 x 25.5 px 圆在模版中心，和一个21 x 21 px 圆在这个图标的右边部分。
第6步创建一个43 x 16 px矩形并且使其角圆润有8 px角半径。 对齐这个矩形和圆形，然后在路径查找器中合并3个形状形成一个光滑圆润的云。
第7步用白色填充云且使它半透明，降低透明度到90%。
第8步让我们转到照相机图标。 制作一个灰色的底部圆，用底部深灰色 (#dadcdd)到顶部浅灰色 (#dadcdd) 的线性渐变填充，然后首先从深灰色 (#3c3c3c) 圆角矩形形成相机的侧影。 在顶部添加一个小的 30 x 17 px矩形，然后使其左上的角变圆有7px 圆角半径。 合并这些形状然后也使这些形状之间的角变圆。
第9步添加一个狭窄条纹在照相机的上端，然后用减去顶层将它减去。
从9 x 4 px的矩形中形成快门图标，然后放在我们模版的中央。 用钢笔工具添加一个箭头来指向快门 设置描边宽度为4 pt 然后在描边面板中使端点和边角圆滑。
第10步为我们的照相机添加最后的细节：形成一个6 x 6 px 大小的亮黄色(#fac81b)的指示灯。 此外，创建一个有4pt 描边宽度的大圆。 如截图显示那样，将这个圆放在照相机右边角底部的位置上。
第11步对象>扩展这个大圆，转换它为圆环。 选中圆环和照相机，然后应用减去顶层减去圆环，形成对象-玻璃。 然后选择我们相击深灰色的部分并且按下 Control-8转变它们为单独组合形状。
最后，利用形状生成工具(Shift-M)或路径查找器中的相交功能切除我们照相机图标外面不需要的部分。
5.制作电话，短信，和远程应用图标第1步让我们为电话图标制作一个话筒。 创建一个8 x 40 px矩形，然后到效果>扭曲>弧选择27%的垂直弯曲值弯曲矩形的左边。 添加2个17 x 20 px矩形在顶部和底部的话筒，然后是它们的角圆润，使形状光滑。 在路径查找器中合并全部话筒的部分。
第2步通过用删除锚点工具删除 (-)不需要的锚点使听筒左边变得光滑，然后利用活动角的特征是内部变得圆润。 最后，旋转电话45度并且把它放在图标底部的上变，然后用浅绿色 (#86fb71)到深绿色 (#0fd51c)的线性渐变填充。
第3步让我们用之前用过的相同绿色的底子形成短信图标。 制作一个 40 x 40 px白色圆然后延伸一点边，使形状压扁到 48 x 40 px。 添加一个小小的三角形在白色形状的底部，形成一个言语泡泡。 使三角形下面的角稍微变圆一点。 利用-36%垂直弯曲值的弧弯曲效果使三角形稍微变为弧形。
这里显示了完整图标的样子。
第4步我们接下来的图标是远程应用图标，这也是一个包含单个元素的非常简单的图标。 首先，形成一个渐变的底子（从深蓝色#2066f0的底部到浅蓝色#1dd4fd的顶部）。 添加5.3pt宽的白色描边，然后从内部对齐。 在我们的图标的中心放置一个30 x 30 px白色三角形。
第5步最后，使三角形的角有2.5角半径。 太好了！ 这个图标已经到位，所以让我们转到下一个。
6.创建外出，设置和照片App图标第1步外出图标描绘了一个风格化的跑步者的身影。 创一个明亮的底子，用顶部黄绿色(#c2ec38)和底部绿色(#a3fc3f) 的线性渐变来填充。 用钢笔工具（P）创建分离的线作为弯曲胳膊，腿，和躯干，添加3 pt 描边宽度以及圆形的端点和边角。 增加躯干的描边宽度的厚度到6 pt 然后添加一个9 x 9 px圆形作为头部。
第2步对象>扩展线条，然后用黑色填充这个形状。
第3步设置的图标包含一个齿轮。 形成齿轨的底子是从48 x 48 px圆切掉中间部分，制成了一个环。 添加3个有3 pt 描边宽度线条，在图标模版的中心相互连接。
第4步现在我们需要添加波纹到我们的齿轨。 制作一个 5 x 9 px矩形然后使上端稍微窄一点。 使上面的角有1.6px角半径的圆润。 放这个波纹在齿轨的顶部和底部。 让我们用旋转工具(R)添加更多元素。 选中全部波纹，双击旋转工具(R)调用弹出选项窗口，然后设置旋转值为360/18。 这种方式， Adobe Illustrator将会自动计算出18个形状的合适值。 按下拷贝按钮。
第5步按下Control-D多次重复我们上一个动作，添加更多元素。 为了完成这个图标，选择所有波纹，转换颜色为白色，然后将所有的波纹一起旋转-10度。
第6步我们接下来的图标是一个风格化花的照片App。 首先创建一个20 x30 px且具有10 px的角半径的圆角矩形形成的花瓣。 复制花瓣然后放其拷贝在图标模版的底部，如下面截图所示。 选择全部花瓣用旋转工具（R）制作8份花瓣拷贝，应用 360/8角值，然后按下拷贝按钮。
第7步按下 Control-D数次形成八瓣花。 转换花瓣为正片叠底混合模式且降低透明度到80%。 让我们应用喜爱的颜色到每片花瓣，从中间最上的开始顺时针移动：橙色 (#fa9700)，黄色(#f0e22c)，绿色(#b5d558)，绿松石色(#6ec19d)，蓝色(#71b5e1)，紫罗兰色(#8f60c3)，粉色 (#d782a4)和红色(#ff2c2c)。 将花放在白色的图标底板上。
7.呈现股票，活动，存折和日历图标第1步股票图标包含一个极简图。 首先制作一个浅蓝色（＃02a6f5）的3pt大小的，用直线工具（\）制成的竖线形成的图。 把它放在模版的中间，在一个深色(#3f3f3f)图标底板上。 添加一个蓝色的小圆圈在上面的模版并且应用一个深灰色(#3f3f3f) 1pt 的描边，为了使它在视觉上分隔开来。 添加另外4条线在这个图标的两边，用浅灰色(#555555)的3pt 描边 。 对象>扩展线条并且切除图标底部不需要的部分，无论是形状生成工具(Shift-M)或在路径查找器帮助下都可以。
第2步用钢笔工具（P）画一个有一个1.5pt 描边的锯齿状线条添加到图上以结束这个图标的制作。 扩展线条使他符合图标底子。
第3步这个活动图标更复杂并且是一个有趣的制作。 它包含3个彩色的渐变圆环。 为了形成这样一个圆环，首先文明需要制作一个混合组。 制作2个相同的6 x 7 px的矩形，其中一个粉色(#ff2b91)一个红色(#f1281e). 选中矩形然后找到对象>混合>建立。 你可以在对象>混合>混合选项编辑这个设置，应用顺滑颜色制作一个漂亮的无缝混合。 拖动创建的混合组到笔刷面板，然后创建一个新的默认设置的艺术画笔。
第4步创建一个深灰色 (#393839)的圆作为我们图标的底子，然后放置另一个圆在它的顶部，用我们创建的画笔作为描边。 调整圆的尺寸，以便它符合图标模版的外部边缘。 设置描边宽度为1 pt，然后选择对象>扩展外观将笔刷描边变为形状。 如果需要，用镜像工具（O）旋转或水平地翻动形状，以便我们有一个从左边粉红到右边红色的圆环。 创建一个粉红色 (#ff2b91)的小圆环放在彩色圆环中间顶部的区域，使它符合形状的高度，用来隐藏两个颜色之间的联系。
第5步现在我们需要添加一个微妙的阴影以补充其尺寸到圆环。 你可能会注意到，这个环在我们扩展它后被分为几个部分。 这正是我们所需要的！ 选择圆环顶部红色的片段，拷贝它然后粘贴在前面(Control-C > Control-F)。 在拷贝层上添加深红色 (#a11b17)到白色的线性渐变，然后转换为正片叠底的混合模式，因此渐变使白色的末端不可见。
第6步用相同的技术在第一个形状的里面创建两个更多彩的圆环。 创建艺术画笔从黄色(#d8ff06)和绿色(#86e402)的混合组和一个从绿松石色 (#06ffaa) 到蓝色 (#06e3f9)的混合组。 添加小圆和应用柔和的阴影来完成这个图标的制作。
第7步接下来是存折图标，包含4个小小的象形图：一个信用卡，一个飞机，一个摄像机和一个咖啡杯。 这些象形图都是简约的，并且都由基本的形状在路径查找器和活动角特征的帮助下制成的。 你可以从下面一步步的截图看到每个象形图标是怎样连接而成的。
第8步这个图标的底子由4个不同颜色的条纹构成：红色(#ff4e46)，蓝色 (#439eca)，绿色 (#3dca36)和橙色(#ffa02b)，每个高度都是 20 px。 在形状生成器工具（Shift-M）的帮助下创建一个默认的80×80px 图标的圆形底子，并删除不需要的条纹片段通过选择所有对象，同时按住Alt键，然后单击不需要的部分。
第9步形成一个3.5 x 3.5 px的圆，与橙色条纹的顶部相交，拷贝它到右键同时按住Alt和Shift键拉动形状。 按住Control-D多次以形成圆的更多的复本。 然后，选中所有复本并且通过按Control-8转化为组合路径。 选中圆形和橙色的条纹应用减去顶层功能切割出洞，使条纹带孔。 最后，放置我们之前创建的象形图在我们图标的中心对齐它们。
第10步我们一套图标最后一个是日历图标 它是由Helvetica Neue 字体制成的文字和一个简单的白色图标底子构成。
很好！ Apple Watch主屏幕图标已经完成！这是一个漫长又令人兴奋的任务！ 我们已经创建了总计20个组屏幕应用的图标，使用了一些基本形状，弯曲效果和一些技巧和效果。 我希望你能享受跟随这个指南的过程，并且发现一些有趣的技术。 祝你与您的设计好运！
| 
[复制链接]
组图打开中，请稍候......
收藏
分享
圆梦
碎梦
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
