寒山闻钟专业版 | Zero Status
iClock - Simplest Always Best | Zero Status

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍

iOS教程 Zero Status 1,362 浏览 0评论

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 1

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

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 2

App Icon Template [4.0]界面介绍:

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 3

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 4

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

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 [4.0].psd文件,双击Edit me and save图层,弹出一个对话框,点击确定即可。

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 5

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 6

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 7

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

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 8

然后ctrl+s即可

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 9

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 10

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 11

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 12

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

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

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 13

磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍 - App Icon Template - iOS教程 | Zero Status - 14

转载请注明:Zero Status » 磨刀不误砍柴工:学会使用App Icon 模板让你iOS开发事半功倍

您必须 登录 才能发表评论!