App 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/