photoshop快速设计一个IOS应用图标制作教程

 更新时间:2016年9月14日 23:50  点击:2058
今天小编在这里就来给photoshop的这一款软件的使用者们来说下快速设计一个IOS应用图标的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一起看一看制作方法吧。
给各位photoshop软件的使用者们来详细的解析分享一下快速设计一个IOS应用图标的制作教程。
教程分享:
开始前,请先准备一个iOS 应用图标模板,可以从iOS Icon Template或者App IconTemplate下载(我用的就是后者的素材)。
我的电脑屏幕上只显示了 1024px 的大图标,我觉得用这个模板做参考就可以了。
你可以将应用图标模板进行裁剪,只保留 1024px 的图标,或者处理模板上的其余元素。

 

AI教程,快速设计一个IOS应用图标_
下面我们正式开始。
步骤 1:创建 iOS应用图标的基本形状
首先新建一个图层并填充背景色,参考色值是#acced6。

 

AI教程,快速设计一个IOS应用图标_
接下来,给颜色图层添加蒙版,使其呈现图标的轮廓。技术上来讲这一步可要可不要,因为上传图片之后,苹果官方会自动帮你切成圆角。
不过,为了呈现更好的视觉效果,我建议使用蒙版。
怎么操作呢?按住COMMAND(MAC 用户)或者CTRL(Windows 用户)键的同时点击图标模板图层,颜色图层就会出现一个选区啦。

 

AI教程,快速设计一个IOS应用图标_
再在图层面板的底部点击蒙版图标,就可以创建蒙版了。
步骤 2:添加渐变色
在颜色图层点击鼠标右键,在弹出的菜单中选择混合选项。我们来给它加一个弱渐变。渐变的起始和终止色值分别为#acced6和#7cbece。

 

AI教程,快速设计一个IOS应用图标_
渐变样式选择线性渐变,角度设置为135度,呈现出由左上角的深蓝色到右下角的浅蓝色渐变效果。
如果这两种颜色顺序搞颠倒了,调整角度为 -135 度或者 315 度就行了。

 

AI教程,快速设计一个IOS应用图标_
步骤 3:创建内圆
图标中部的白色圆形是整个图标设计的重要组成部分,我们可以利用iOS图标栅格画一个圆:使用椭圆工具(U)创建一个宽高为 890px 的正圆,
在属性面板中可以调整它的大小以便与栅格对齐。

 

AI教程,快速设计一个IOS应用图标_
步骤 4:给圆形添加图层样式
给形状图层添加描边、阴影和渐变等图层样式。

 

AI教程,快速设计一个IOS应用图标_
添加渐变
圆的渐变比较简单,渐变色值为#ffffff和#d9d9d9。

 

AI教程,快速设计一个IOS应用图标_
渐变样式选择径向渐变。要让圆的中心呈现些许亮色,从圆心到边缘有一个白色到浅灰色的渐变,缩放比例设置为150%。

 

AI教程,快速设计一个IOS应用图标_
添加描边
圆的描边要加粗,描边位置选择内部,描边大小的参考数值为30px,填充类型选择渐变。

 

AI教程,快速设计一个IOS应用图标_
渐变所用颜色比图标的背景渐变色要亮一些。起始色值和终止色值分别为#d1e4e8和#a9deeb,渐变角度设置为-45度,呈现出由顶部的浅蓝色到底部的深蓝色渐变效果。
添加内阴影
这里的内阴影其实是白色高光,你也可以使用内发光样式。将混合选项设置为正常,距离设置为0。将大小设置为70。
(注:此处原文为 140px,但是与截图上的参数不符,所以译者暂时将参数改为70px)

 

AI教程,快速设计一个IOS应用图标_
添加投影
最后给这个圆添加投影,让描边看上去更清晰,也可以让整个圆在蓝色背景下看的也很明显。把阴影的透明度设置为10%,
距离设置为0,将大小设置的稍微大一点,我的参考数值是55。

 

AI教程,快速设计一个IOS应用图标_
效果如下图所示:

 

AI教程,快速设计一个IOS应用图标_
步骤5:添加铅笔图标
我们在上一步的基础上添加一枚图标,我选的是铅笔图标。你可以在Sliceberry或者the Noun Project搜索你想要的图标。由于我们制作的图标是1024*1024规格的,
所以一定要选大图标。

 

AI教程,快速设计一个IOS应用图标_
将该图标导入你的PSD文件并调整大小。如果你用的铅笔图标跟我用的一样大,需要将其缩小到原来的1/2。你可以利用iOS模板把该图标控制在内圆的范围之内。

 

AI教程,快速设计一个IOS应用图标_
为了让该图标垂直于水平线,需要将其旋转62.32度。按下COMMAND(MAC用户)或者CRTL(Windows用户)键的同时按下T键,
在顶部紧挨着小三角形图标的窗口中输入数值62.32。(你也可以跳过旋转图标这一步骤)

 

AI教程,快速设计一个IOS应用图标_
步骤6:给铅笔图层添加图层样式
终于到了图标制作最后的步骤了,我们来给它添加渐变叠加和内阴影。

 

AI教程,快速设计一个IOS应用图标_
添加渐变叠加
打开该图层的混合选项,选择渐变叠加,色值参数同步骤2,即起始色值和终止色值分别为#acced6和#7cbece。渐变效果沿对角线方向呈现,
角度设置为-45度,从左上角的浅蓝色开始,到右下角的深蓝色结束。

 

AI教程,快速设计一个IOS应用图标_
添加内阴影
这是本教程的最后一个小步骤。给铅笔图层添加内阴影,让它看起来有些厚度。内阴影其他参数不变,只降低其透明度,参考数值为15%。
这是因为图标整体使用的是亮色,所以我们让它有一点阴影的感觉就可以了。

 

AI教程,快速设计一个IOS应用图标_
最终效果

 

AI教程,快速设计一个IOS应用图标_
图标到这里就制作完成了。这篇教程的目的就是向你展示漂亮的iOS应用图标制作方法,过程没那么复杂,最终的效果看起来也很棒,
你可以使用这个方法尝试制作其他图标。
好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的快速设计一个IOS应用图标的制作教程解析分享的全部内容了,各位看到这里的使用者们现在是非常的清楚了制作方法了吧,那么各位就快去按照小编的教程自己去制作吧。
[!--infotagslink--]

相关文章

  • Photoshop制作雨中野外孤独行走的一头牛海报教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
  • photoshop想象力无边界超现实合成图鉴赏

    今天小编在这里就为各位photoshop的这一款软件的使用者们带来了想象力无边界超现实合成图,各位想知道这些超现实的合成图都是些什么呢?那么下面各位就来跟着小编一起看...2016-09-14
  • photoshop简单制作一个搞笑的换脸表情包教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
  • photoshop合成爱丽丝漫游仙境的小人国场景制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说合成爱丽丝漫游仙境的小人国场景制作教程,各位想知道具体的合成制作方法的使用者们,那么各位就快来...2016-09-14
  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • photoshop给手绘画调色变换场景后期教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
  • photoshop用各种素材合成闪电侠效果制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来跟着小编一起看...2016-09-14
  • Photoshop火龙变冰龙制作教程分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程,各位想知道具体的制作步骤的使用者们,那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14
  • photoshop制作延时摄影城市照片效果教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说制作延时摄影城市照片效果的教程,各位想知道具体制作方法的使用者们,那么就快来看看教程吧。 给...2016-09-14
  • photoshop画斜线/直线/虚线的入门级教程

    这篇文章算是超级入门级别的了,我们下面来给各位介绍在photoshop画斜线/直线/虚线的教程了,希望下面这篇文章给你入门来帮助。 PS怎么画斜线 选择铅笔工具,或者画笔...2016-09-14
  • Photoshop打开PSD文件空白怎么解决

    有时我们接受或下载到的PSD文件打开是空白的,那么我们要如何来解决这个 问题了,下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14
  • photoshop制作菱形编织图案的无缝纹理背景教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说制作菱形编织图案的无缝纹理背景的教程,各位想知道具体制作方法的,那么下面就来跟着小编一起看一看吧。...2016-09-14
  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • photoshop设计暗红色金属文字效果制作步骤

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计暗红色金属文字效果的制作步骤,各位想知道具体制作步骤的使用者们,那么各位朋友们就快来跟着小...2016-10-10
  • Photoshop功夫熊猫电影海报制作步骤分享

    不知不觉功夫熊猫这部电影已经出到3了,今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报,各位想知道制作方法的,那么下面就来跟着小编一起看看吧。 给各...2016-09-14
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • AI源文件转photoshop图像变模糊问题解决教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程,各位想知道具体解决方法的使用者们,那么下面就快来跟着小编...2016-09-14