APP icon模板基本使用教程

用户头像
北京/设计爱好者/12年前/46200浏览
APP icon模板基本使用教程

如何运用模板快速制作icon的各种尺寸,一个简单的小教程,希望大家可以喜欢。

                                App Icon 模板基本使用教程

   App Icon Template,用于快速的导出符合规范的ios应用图标,很容易上手。虽然现在制作Ios应用图标程序有很多,不过个人喜欢用PhotoShop处理所以选择了这个,这是一个PSD文件,需要有photoShopCS2或者更高的版本.本教程使用的是 :PhotoShopCC作为示例,其它版本也是一样道理的。

   App Icon Template 主要包含两个文件,psd文件和atn文件,psd文件就是我们主要用于设计图标的文件,我们要设计的图标都是在这里处理,atn文件就是用于导出符合规范的应用程序图标。如下图:




App Icon Template [3.3]界面介绍:



左边的就是主要界面,简单的来说主要就是用于显示最终效果,因为处理应用程序图标的时候不是在这个界面上进行的,待会儿会说到。



以下是对上图中标示的位置进行解释:

1 -Rounded Mask层,Rounded Mask文件夹代表是各个尺寸的图标,就是代表着左边主要界面里面的蓝色图标。最后要导出应用程序图标的时候只保留这个文件夹。这个文件夹主要包含四个子文件夹:1024 Retina App Icon,512 App Icon,iPad,iPhone。


2 -1024 Retina App Icon 这个是最大的那一个应用程序图标,这个文件夹是Rounded Mask中的子文件夹。我们以后要处理应用程序图标的时候要用到Edit me and save这个对象。就是上图中有蓝色标示的那个。


3 -其它的文件夹我们就不需要编辑了,所以大家可以对他置之不理喔。

介绍完毕,以下讲如何处理应用程序图标和导出符合规范的应用程序图标(只是个人的一个制作流程)

1.首先制作一个1024*1024的PNG文件(这个就是我们之后要套用模板的icon喔)

2.制作好图标以后现在打开App Icon Template [3.3].psd文件,双击Edit me and save图层,弹出一个对话框,点击确定即可。





3.这个蓝蓝的图层经过双击之后会在另一个界面打开喔!如图:




我们当前看到的到的蓝色渐变背景就是Gradient Fill6,这个文件中的图层都是icon的背景,可以随意隐藏显示图层,看效果,这个需要各位亲们自己来试验了,在这里就不一一赘述了。



4.之后我们就可以把刚才制作好的1024*1024的icon直接拖到这个界面里了喔!如图:




然后ctrl+s即可


5.现在让我们切换到刚才的App Icon Template [3.3].psd文件中,可以看到界面是这样子的,icon显示的形式都会展现出来喔!




6.下面我们的App Icon Template [3.3]动作文件就开始隆重登场了,在窗口>动作>载入动作(App Icon Template .atn),点击开始动作开始按钮,我们刚才录入界面中的icon就会自动打包一个文件夹,里面就是我们需要的各种尺寸的小icon喔



7.看看我们的成果,O(∩_∩)O哈哈~,各位亲们还等什么呢,赶快感觉一下吧!


模板下载的链接喔:http://appicontemplate.com/

不过本人也有将模板的压缩包上传了喔,大家随意选择。


212
举报
|
364
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
金色颗粒质地的平面
金色颗粒质地的平面
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
城市园林平面布局航拍
“知识宅急送”外卖,快递,平面,海报,素材,教育
城市园林平面布局航拍
古风平面仕女与瓷器
城市园林平面布局航拍
金色颗粒质地的平面
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
海底世界插画
空的平台平面和自然景观
城阙凡花
平面书法字手写
中国传统纹样创新图案设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
平面插画情侣/矢量
倒计时,海报,平面
金色颗粒质地的平面
平面男孩喝咖啡插画设计
牛奶乳液层次梯田平铺平面
平面插画设计女孩喝咖啡
平面花卉图案扁平简约无缝拼接插画
你可能喜欢
相关收藏夹
大家都在看
登录注册