仅用PPT做出iOS7的用户界面（上）

仅用PPT做出iOS7的用户界面（上）

这篇文章有点长，分为上下两部分，但是我本人亲自编写，推荐给办公室常用PPT、喜欢钻研技术的宅们，有兴趣的朋友不妨自己动手做做。（之前有国外的大神用WORD做过，但我的做法与他的并不太相同，正如我前面所说，没别的意思，仅供与喜欢做PPT的朋友们交流。）

Q：能在PPT里做出一个iOS7的界面来吗？

A：能！而且仅仅只需要Microsoft PowerPoint一个软件！这里需要2013版，想破解长期免费使用的，可以百度。

效果如下图：（尺寸：3840*2400像素）

完全用PPT做出来，包括里面的icon，并非网上枪来的效果图，也根本不需要使用PS

如矢量般清晰的细节：（尺寸：1600*1000像素）

有几条操作会出现若干次：

1、格式下的形状填充，渐变停止点的设置，轮廓线的设置等；

2、格式下的合并形状，即多个形状的组合、修剪、拆分等；

闲话少说，直接进入正题：

新建Microsoft PowerPoint文档，新建一张幻灯片，删除标题与副标题的文本框（或直接设置版式为空白，为方便观看，我这里设置了灰色母版。）

画iPhone外观。在网上找一张iPhone5的外观图，插入一个圆角矩形，去轮廓线，让圆角矩形的大小和圆角贴合iPhone的大小，再插入四个矩形，调整合适的大小，分别放到Power键、静音键、音量键的位置上，全选这五个矩形，执行菜单下格式-合并形状-联合（记住这一操作，后面会的很多这个操作），iPhone的外观初成。（为避免电脑卡顿，这里将其合并，因为合并形状以后，就变成一个形状；不合并的话，形状太多可能会造成电脑卡顿。）

画边缘高光。复制iPhone外观，插入一个直角矩形，大小以能截取复制出的iPhone外观的一个角为宜，选择复制出的iPhone外观，与直角矩形，执行菜单下格式-合并形状-相交，去轮廓线，执行菜单下格式-形状填充-渐变-其他渐变，类型选择射线，角度158度，在渐变光圈上添加三个停止点（加上原有的两个，即有5个停止点，），颜色从左至右依次选择黑-黑-50%灰-黑-黑，位置分别为0、40%、55%、55%、100%（要保证第四个点的位置与第三个点的位置相同，才能产生高光与阴影的强烈反差）。复制三个，旋转，放到其他的三个角上。再插入一个比原iPhone外观稍小一点的圆角矩形，调整合适大小，作为iPhone的最上层面板。

画前置摄像头。插入一个正圆，调整大小，与素材iPhone的前置摄像头大小保持相同，放到合适的位置，执行菜单下格式-形状填充-渐变-其他渐变，在弹出的设置形状格式里，选择渐变填充，类型选择射线，方向选择中心辐射，在渐变光圈上添加三个停止点，颜色从左至右依次选择淡蓝-深蓝-淡蓝-黑-灰色，模拟镜头上的蓝宝石所反的暗光。

画听筒。插入圆角矩形，调整大小，与素材iPhone的听筒大小保持相同，放到合适的位置，执行菜单下格式-形状填充-渐变-其他渐变，在弹出的设置形状格式里，选择渐变填充，类型选择线性，角度选择150度，停止点的颜色分别为黑-灰-白-白-黑-灰-白-黑-黑，不需太精确，能模拟高光、中间调与阴影即可，因为上面还要放一层听筒的丝网状的膜。再插入一个圆角矩形，调整大小，与素材iPhone的听筒内网状物的膜大小保持相同，放到合适的位置，执行菜单下格式-形状填充-渐变-其他渐变，在弹出的设置形状格式里，选择图案填充，图案选择棚架（倒数第二行，倒数第二个），前景色选择黑色100%，背景色选择黑色淡色25%，再对其执行格式-形状效果-阴影-内部-内部居中。（参数仅供参考，下同）

画Home键。插入一个正圆，调整大小，与素材iPhone的Home键大小保持相同，放到合适的位置，执行菜单下格式-形状填充-渐变-其他渐变，在弹出的设置形状格式里，选择渐变填充，类型选择线性，角度选择90度，四个停止点的颜色分别为黑-黑-80%灰-50%灰，停止点的位置分别为0、55%、75%、100%。在线条选项里，类型选择线性，角度选择90度，五个停止点的颜色分别为80灰-黑-黑-黑-80灰，位置分别为０、35%、50%、65%、100%，亮度75%，宽度0.5磅。再画一个圆角矩形，去除填充，设置轮廓线为白色。（可以略微粗一点，后面做三维旋转以后，所有的线条会变细。参数自己看着合适就行吧，字多好难打的说。）

画屏幕与屏幕高光。复制iPhone最上层面板（稍小的那个圆角矩形），再插入一个三角形，调整到能截取一部来做高光的大小为宜，选择复制出iPhone最上层面板与三角形，执行菜单下格式-合并形状-拆分，执行菜单下格式-形状填充-渐变-其他渐变，在弹出的设置形状格式里，选择渐变填充，类型选择线性，角度选择180度，光圈停止点为黑-50灰，位置为0、100%，透明度85%，亮度-100%（此处参数可能有误，不行就设置为白-50%灰，位置为0、100%，透明度85%，亮度100%，建议选择红色参数，我把PPT做完，再到写这篇教程，中间隔了好一阵，一些详细的参数记不太清了。）。再画一个直角矩形，填充为灰色25%里的深色90%。调整合适的图层顺序，得下图：

到此，iPhone的外观才算正式完成吧，接下来，开始点亮屏幕。实际上听筒左边应该有个近场感应的小灯，黑色的iPhone看不见，这里就不做他了吧。

画iPhone动态壁纸。在网上找一张iPhone的动态壁纸。选中做iPhone屏幕的矩形，设置渐变填充，左中右的停止点的颜色可以用颜色吸管在壁纸素材的顶端、中间、底端上吸一下，停止点分别为0、50%、100%。插入正圆若干，大小随机，颜色各异（大圆建议选冷色，小圆建议选暖色，使他们和谐不突兀）对各个正圆执行格式-形状效果-柔化边缘，设置不同的磅数（大圆建议大磅数，小圆建议小磅数），在填充下设置其不同的透明度（大圆建议高透明度，小圆建议低透明度），以产生景深。再加一个直角矩形，放在最底端，颜色用吸管吸，纯色填充，设置透明度为50%。

没有icon的界面总感觉哪里不对。。。。

短信。画一个圆角正方形，设置好圆角幅度，（建议复制若干，要多次用到，以便保持统一）设置渐变填充，如果对颜色把握不准，可以用吸管吸；再画一个椭圆，再插入一个新月形，选中椭圆与新月形，执行格式-合并形状-联合，输入文字短信，字体为华文黑体（iPhone自带的字体疑似一种叫苹果俪黑的字体，我没找到，就用相近的华文黑体代替）。为便于icon的查看，这里将母版的颜色改为灰色25%里的深色50%。

日历。设置填充为白色，星期的字体也暂用华文黑体，数字和英文的字体为Helvetica，网上可以找到全系列的字体，如果字体太粗，就加白色的轮廓，如果太细，就选择粗体，粗体仍不行，就加黑色轮廓（iOS7里的英文字母与数字一般是细体或极细体，通常不会出现需要通过轮廓来加粗的情况）。

照片。照片的icon其实不好做，这八个椭圆的分布从左上角以顺时针方向到左边的疑似颜色是以红-橙-黄-绿-青-蓝-紫-品红进行分布的，呈中心对称，建议先做水平的两个，复制，旋转成竖直的，然后再复制水平与竖直方向的4个，旋转45度，再调整颜色，可以保证中心对称，透明度设置为10%左右。

相机。这个又要用到形状的合并与修剪。先画两个圆角矩形，再画两个三角形把肩部修补起来（均为联合），然后再用两个正圆减去多余的部分得到中间的形状再用两个矩形减去不要的部分，最后添加相机的镜头，按钮等，别忘记给相机添外观添加一个内阴影，使效果更逼真。（26中的设置图标也会用到这种方法，请留意。）

视频。画6个镜面对称的平行四边形，然后合并形状-联合，复制一个圆角矩形，选中圆角矩形与合并后的平行四边形，合并形状-修剪，删去不要的部分。再复制一个圆角矩形，设置渐变，停止点（共4个）颜色分别为80%灰-黑-鲜绿 -淡蓝。位置分别为0、31%、32%、100%。

地图。地图icon可以用五个矩形与圆角矩形相交而得，导航的方向图标可以用一个锐角三角形与一个钝角三角形相减得来，盾牌图标是三个椭圆相减而得来的，最后设置白色轮廓，设置红白蓝三色的渐变填充即可。

天气。这个图标好办，设置圆角矩形的渐变。橙色的正圆为太阳，云朵的图标为三个正圆合并而成，最底端用一个直角矩形补齐，然后合并形状-联合，设置透明度15%。

Passbook。画三个直角矩形，与圆角矩形相交，然后再用椭圆，减去绿色块中的多余部分。黄色块中的波浪形可以用多个小圆相联合，如果觉得麻烦，也可直接添加一条黄色虚线，设置虚线的点为圆点即可。飞机、摄像机、茶杯图标用各种形状相加减可得。

备忘录。这个也不难，设置好圆角矩形的渐变即可，渐变填充的五个停止颜色点分别为浅黄-金色-白色-50%灰-白色，停止点位置分别为0、29%、30%、31%、100%，最后加上线条即可。

Game Center。Game Center应该是这里面最难做的icon之一（Safari与设置也比较难做）了，不过也有办法。这里要用到三维格式里的棱台。先画一个正圆，去掉轮廓，设置渐变类型为线性，方向90度，渐变色为紫-青绿-青绿-淡蓝（淡色40%），停止点位置分别为0、40%、65%、100%。停止点透明度分别为15%、25%、25%、50%，停止点亮度分别为0%、0%、0%、75%。最后是三维效果，顶部棱台设置为圆，宽度与高度分别为85磅，35磅，底部棱台也设置为圆，宽度与高度设置均为6磅，材料选择金属效果，照明选择平面，角度选择130度。这样，最大的气泡就做出来了，其余的只是渐变色不同（填充渐变色的时候要选择一定量的透明度，否则气泡可能会没有透明效果），其他操作相似，这里不重复。

提醒事项。这个icon很好做，左边四个标记点可以用两层，底层用大一点的正圆，顶层放小一点的正圆，再加上白色轮廓。

时钟。我截图的时间是下午17点19分，就照这个做吧，画正圆，插入12个数字文本，摆放到12个时间点上，注意对称，可以画个圆辅助摆放，实在不行就找张jpeg图贴着放，针的画法不难，正圆加上不同宽度的圆角矩形，秒针设置颜色为正红色，将他们的针头旋转到圆心位置。

由于图片较多，本教程分为两部分，

未完，待续，请继续查阅下半部分