UI教程,快速设计一个IOS应用图标

来源:站酷 作者:Criscroc 学习:10961人次
教你快速打造优美的 iOS 应用图标

开始前,请先准备一个iOS 应用图标模板,可以从iOS Icon Template或者App IconTemplate下载(我用的就是后者的素材)。

我的电脑屏幕上只显示了 1024px 的大图标,我觉得用这个模板做参考就可以了。

你可以将应用图标模板进行裁剪,只保留 1024px 的图标,或者处理模板上的其余元素。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

下面我们正式开始。

步骤 1:创建 iOS应用图标的基本形状

首先新建一个图层并填充背景色,参考色值是#acced6。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

接下来,给颜色图层添加蒙版,使其呈现图标的轮廓。技术上来讲这一步可要可不要,因为上传图片之后,苹果官方会自动帮你切成圆角。

不过,为了呈现更好的视觉效果,我建议使用蒙版。

怎么操作呢?按住COMMAND(MAC 用户)或者CTRL(Windows 用户)键的同时点击图标模板图层,颜色图层就会出现一个选区啦。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

再在图层面板的底部点击蒙版图标,就可以创建蒙版了。

步骤 2:添加渐变色

在颜色图层点击鼠标右键,在弹出的菜单中选择混合选项。我们来给它加一个弱渐变。渐变的起始和终止色值分别为#acced6和#7cbece。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

渐变样式选择线性渐变,角度设置为135度,呈现出由左上角的深蓝色到右下角的浅蓝色渐变效果。

如果这两种颜色顺序搞颠倒了,调整角度为 -135 度或者 315 度就行了。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

步骤 3:创建内圆

图标中部的白色圆形是整个图标设计的重要组成部分,我们可以利用iOS图标栅格画一个圆:使用椭圆工具(U)创建一个宽高为 890px 的正圆,

在属性面板中可以调整它的大小以便与栅格对齐。

AI教程,快速设计一个IOS应用图标_www.16xx8.com

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
受伤的心还可以爱谁2016-12-05 04:35
受伤的心还可以爱谁2016-12-05 04:35
感觉很不错

关注大神微博加入>>

网友求助,请回答!