Official website: http://appicontemplate.com/
這是一個快速製作App Icon的模板，非常方便，自從發現它後，我的icon都直接用它產出了，輕鬆搞定。iOS最新版本已經支援到iOS 8，也就是可以自動產出@3x的尺寸，超級貼心。個人覺得Android的問題不大，因為沒有硬性規範，你想要什麼R角都可以。之前做一套app通吃的時候我就會偷懶，連icon也通吃。iOS就毛多了，每次更新都有ㄧ些調整，像之前i6升i7的時候連icon的弧度都改了。有這個模板就非常方便呀，只要處理好視覺，一次搞定所有尺寸。由於iOS跟Android的icon規格部份不相同，如果要通吃的時候，記得再補幾個Android的size就可以了。
從官網下載模版解壓縮後會看到這些內容.....atn檔是指action，psd檔是模板，兩個都會用到。
打開psd檔後會看到這個畫面.....
圖層都已經分類好，可以對照名稱，功能分類都說名得很清楚。直接點開「1024 App Icon for the...」的群組，會看到兩個layer，一個是base，一個是慧型圖層，已經用英文標註 Edit me and save。
在智慧型圖層點擊兩下，打開它吧！
打開之後會看到同樣分類得很清楚的圖層群組。有一些內建好的色彩規劃、漸層及紋理效果可以直接選用。為了製作上的方便，Grid圖層保持開啟，下方圖層可視需求開啟或關閉。
接下來的說明將使用之前執行過但半途夭折的專案 -「Her Talk」示範。
Style A
Step 1：在Grid圖層上方新建一個圖層，並使用矩形工具繪製一個正方形，填入你需要的色碼。
Step 2：從AI檔中取出已經設計好的logo。
為了後製的方便，我會依照設計需求，將各元素分開複製貼入PS內。譬如這裡的「HerTalk」、「對話框」、「鑽石」我是分開複製貼入PS內，再一起調整比例大小至符合原本設定的規格。
Step 3：確認好位置後，存檔。回到原本的模板PSD，你會發現所有的sample都已被套入設計好的樣式了。這個模板還有一個好處，可以讓你即時看到icon在裝置內呈現的樣子，如果需要調整，也比較精準。
Step 4：接著載入資料夾中的atn檔，並叫出Action視窗，會看到已經載入的指令檔。由於iOS可以由系統裁切R角，所以這裡有Square跟Rounded兩種指令。Square就是直出無R角的版本，Rounded就是轉出有R角的版本。
選好選項後，按下執行箭頭.....
icon就自動產出並且連檔案名稱都命名好囉！
Style B
如果是像遊戲類的icon，或者有一系列的app，想在icon上置入template，做出品牌識別性，最常見到的做法就是加上邊框及logo，例如：LINE Game、Candy Crush等。這裡直接拿同一個案例示範說明。
Step 1：首先，先找到圖層中的「Inner Mask」，複製它，然後移到原本的矩形色塊上方。
Step 2：加上「筆畫」：居中，80像素。圖層設定：填滿 0%。
(這裡選擇居中的目的，有類似平面完稿須要出血的意義，等同於補漏白的效果)
Step 3：調整對話框的位置，通常都是放在四個角落。
Step 4：確認好位置後，存檔。回到原本的模板PSD，重複之前的步驟就完成囉！
0 意見:
張貼留言