开始前,请先准备一个iOS应用图标模板,可以从iOS Icon Template或者App Icon Template下载,我的电脑屏幕上只显示了1024PX的大图标,我觉得用这个模板做参考就可以了。
先看看效果图
![c5ed99faaaef0ed442bed3712054ab2a.png](https://i-blog.csdnimg.cn/blog_migrate/aa53ad18a418ac7fb773f1f15ddaaf2a.jpeg)
你可以将应用图标模板进行裁剪,只保留1024px的图标,或者处理模板上的其余元素。
![1235dad9d3f573dfa88744b194298661.png](https://i-blog.csdnimg.cn/blog_migrate/a4953329f716fc55768fbb0c2202a98a.jpeg)
下面我们正式开始。
步骤 1:创建 iOS 应用图标的基本形状
首先新建一个图层并填充背景色,参考色值是 #acced6。
![bbb82d44a774f885054bfd45100434e8.png](https://i-blog.csdnimg.cn/blog_migrate/cfc3630e38050fc83580ef0604cdbd6b.jpeg)
接下来,给颜色图层添加蒙版,使其呈现图标的轮廓。技术上来讲这一步可要可不要,因为上传图片之后,苹果官方会自动帮你切成圆角,不过,为了呈现更好的视觉效果,我建议使用蒙版。
怎么操作呢?按住 COMMAND (MAC 用户)或者 CTRL (Windows 用户)键的同时点击图标模板图层,颜色图层就会出现一个选区啦。
![ca96f81759334fd77097a800c862f763.png](https://i-blog.csdnimg.cn/blog_migrate/e244517f866134b04f3597205829469c.jpeg)
再在图层面板的底部点击蒙版图标,就可以创建蒙版了。
步骤 2:添加渐变色
在颜色图层点击鼠标右键,在弹出的菜单中选择混合选项。我们来给它加一个弱渐变。渐变的起始和终止色值分别为 #acced6 和 #7cbece。
![ac6a57e3a754096f2eafd3e488aadc38.png](https://i-blog.csdnimg.cn/blog_migrate/4ab9f97347c410551a8f19e4e9703a78.jpeg)
渐变样式选择线性渐变,角度设置为 135 度,呈现出由左上角的深蓝色到右下角的浅蓝色渐变效果。
如果这两种颜色顺序搞颠倒了,调整角度为 -135 度或者 315 度就行了。
![96cdc2657ac9c5d90f14c55609dbec4e.png](https://i-blog.csdnimg.cn/blog_migrate/aefe6d4cebbf918bd8a6959f2d75cc91.jpeg)
步骤 3:创建内圆
图标中部的白色圆形是整个图标设计的重要组成部分,我们可以利用iOS图标栅格画一个圆:使用椭圆工具(U)创建一个宽高为 890px 的正圆,
在属性面板中可以调整它的大小以便与栅格对齐。
![960de37f1bba5dc608de951cc42e4062.png](https://i-blog.csdnimg.cn/blog_migrate/7ab3b3b82071119be1fc9b9e0a8110fb.jpeg)
步骤 4:给圆形添加图层样式
给形状图层添加描边、阴影和渐变等图层样式。
![6d53c0807b1f07d22709aebf35c03272.png](https://i-blog.csdnimg.cn/blog_migrate/7799dd95ccea6c381cdd25435b399c68.jpeg)
添加渐变
圆的渐变比较简单,渐变色值为 #ffffff 和 #d9d9d9。
![f6a14fd3e104b85b38a32034ac7ded85.png](https://i-blog.csdnimg.cn/blog_migrate/7564ec9b4f4c7f7c4bb89904e5b4bd5c.jpeg)
渐变样式选择径向渐变。要让圆的中心呈现些许亮色,从圆心到边缘有一个白色到浅灰色的渐变,缩放比例设置为 150%。
![3522d896717c527d8f211f48c07c7d4d.png](https://i-blog.csdnimg.cn/blog_migrate/72d06b77e430641fd7029c872636a669.jpeg)
添加描边
圆的描边要加粗,描边位置选择内部,描边大小的参考数值为 30px,填充类型选择渐变。
![3cf7b716a091f3494718dd179c5a7003.png](https://i-blog.csdnimg.cn/blog_migrate/9becd267494d7386c9131b7b059ef748.jpeg)
渐变所用颜色比图标的背景渐变色要亮一些。起始色值和终止色值分别为 #d1e4e8 和 #a9deeb,渐变角度设置为 -45 度,呈现出由顶部的浅蓝色到底部的深蓝色渐变效果。
添加内阴影
这里的内阴影其实是白色高光,你也可以使用内发光样式。将混合选项设置为正常,距离设置为 0。将大小设置为 70。
(注:此处原文为 140px,但是与截图上的参数不符,所以译者暂时将参数改为70px)
![a1fb3fbf96ecd4c55bbfbb7995975813.png](https://i-blog.csdnimg.cn/blog_migrate/3a04085c58c1150c235b04cf59ad6273.jpeg)
添加投影
最后给这个圆添加投影,让描边看上去更清晰,也可以让整个圆在蓝色背景下看的也很明显。把阴影的透明度设置为 10%,
距离设置为 0,将大小设置的稍微大一点,我的参考数值是 55。
![645af50dcf61a9702c181f9aef993a1c.png](https://i-blog.csdnimg.cn/blog_migrate/b4c4a5bcea54521c4d372b8c76eb370d.jpeg)
效果如下图所示:
![0d0edd8f99cf4ffed4d37a65c417d5e0.png](https://i-blog.csdnimg.cn/blog_migrate/c9e17e79a104cd479bbb0ff84e3c473b.jpeg)
步骤5:添加铅笔图标
我们在上一步的基础上添加一枚图标,我选的是铅笔图标。你可以在 Sliceberry 或者 the Noun Project 搜索你想要的图标。由于我们制作的图标是 1024*1024 规格的,
所以一定要选大图标。
如果你也想用铅笔图标,可以从 the Noun Project 下载,作者是 Molly Bramlet,下载链接:download it here
![a41881d42c83730e906bdc1dd4ae6ef0.png](https://i-blog.csdnimg.cn/blog_migrate/c394345626dbbcdd9a43111e90eec8a9.jpeg)
将该图标导入你的PSD文件并调整大小。如果你用的铅笔图标跟我用的一样大,需要将其缩小到原来的 1/2。你可以利用 iOS 模板把该图标控制在内圆的范围之内。
![0aae8852c523bee81de44b76c269abd8.png](https://i-blog.csdnimg.cn/blog_migrate/79e8c461586c7cc89cd30bd4905d47e3.jpeg)
为了让该图标垂直于水平线,需要将其旋转 62.32 度。按下 COMMAND (MAC 用户)或者 CRTL (Windows 用户)键的同时按下 T 键,
在顶部紧挨着小三角形图标的窗口中输入数值 62.32。(你也可以跳过旋转图标这一步骤)
![ad7782b9dede40b9a26b029b2319b47d.png](https://i-blog.csdnimg.cn/blog_migrate/2aef72f5ac5ad3bee030aacd96832450.jpeg)
步骤6:给铅笔图层添加图层样式
终于到了图标制作最后的步骤了,我们来给它添加渐变叠加和内阴影。
![fe550e6f06975065addb05a58e58d284.png](https://i-blog.csdnimg.cn/blog_migrate/4923dbd00b5c27b7b976a08a2204b3d0.jpeg)
添加渐变叠加
打开该图层的混合选项,选择渐变叠加,色值参数同步骤 2,即起始色值和终止色值分别为 #acced6 和 #7cbece。渐变效果沿对角线方向呈现,
角度设置为 -45 度,从左上角的浅蓝色开始,到右下角的深蓝色结束。
![67175562fd9512371819a69c32d37f0e.png](https://i-blog.csdnimg.cn/blog_migrate/cf4279c45e70e85bec7e2bde881d0918.jpeg)
添加内阴影
这是本教程的最后一个小步骤。给铅笔图层添加内阴影,让它看起来有些厚度。内阴影其他参数不变,只降低其透明度,参考数值为15%。
这是因为图标整体使用的是亮色,所以我们让它有一点阴影的感觉就可以了。
![dcd915554867acec9fc53a6948a46d94.png](https://i-blog.csdnimg.cn/blog_migrate/0df4784c1e014be6f07ec54b34f355d1.jpeg)
最终效果
![14dac5806ec5fcdae3a13869da6c0f0f.png](https://i-blog.csdnimg.cn/blog_migrate/ae1ebee4fea4d65200f1e45aa03be5a5.jpeg)
图标到这里就制作完成了。这篇教程的目的就是向你展示漂亮的iOS应用图标制作方法,过程没那么复杂,最终的效果看起来也很棒,你可以使用这个方法尝试制作其他图标。
免责声明:本教程来源于网络,禁止商业使用, 禁止个人使用,仅供学习交流使用 ,版权归原作者所有, 若涉及版权问题,请及时联系删除!!!(小编分享只为自己和大家学习所用!越努力,越幸运!本头条号不承担任何法律责任!)