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
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面男孩喝咖啡插画设计
金色颗粒质地的平面
城市园林平面布局航拍
城市园林平面布局航拍
金色颗粒质地的平面
城市园林平面布局航拍
平面插画设计女孩喝咖啡
金色颗粒质地的平面
城市园林平面布局航拍
空的平台平面和自然景观
空的平台平面和自然景观
你可能喜欢
相关收藏夹
大家都在看
登录注册