從零開始畫圖標系列:啟動圖標設計指南

本文我們開始講解最后一種類型的圖標 ── 啟動圖標。在第一章我們已經對啟動圖標有了基礎的認識,所以下圖再簡單回顧一遍。

從零開始畫圖標系列:啟動圖標設計指南

想要在啟動圖標設計入門,就要先從規范開始學習,然后了解不同的風格以及對應風格的設計過程。

往期回顧:

啟動圖標的設計規范

說到啟動圖標的規范,首先會想到的,就是 iOS 提供的圖標柵格。通過這個柵格,會規范圖形的尺寸,以及所處的位置。

從零開始畫圖標系列:啟動圖標設計指南

這個模板和工具圖標的使用方法類似,我們在后面的案例進一步講解。接著,來說明一個更重要的問題,就是啟動圖標畫布的尺寸。

默認的情況下,我們使用 1024x1024 尺寸來設計啟動圖標,這個參數在 iOS 和 Android 中都適用。

之所以使用這么大的尺寸,是由屏幕分辨率的差異和使用場景導致的。

第一,在手機硬件中,根據屏幕規格的不同,展示圖標的實際像素量也不同,即圖標的尺寸會發生改變。

例如在 1x 的屏幕中,圖標使用 60x60px;在 2x 的屏幕中,就使用 120x120pt;3x 則是 180x180。

從零開始畫圖標系列:啟動圖標設計指南

第二,不同設備和顯示場景里,應用的圖標尺寸也不一樣。對于一個真實的項目來說,圖標不是只放在手機上運行,無論是 iOS 還是 Android 的 APP 都可以在 PAD 上安裝,圖標尺寸規格就不同。并且,在網頁或者手機應用商店里,也需要展示啟動圖標,顯示的規格和真實應用列表中又不同。

從零開始畫圖標系列:啟動圖標設計指南

所以,在 iOS 官方的圖標模板中,我們會看見里面羅列了非常多的圖標尺寸,我們只需要設計第一個 1024 規格的,將這個圖標置入到 PS 的智能對象,或者 Sketch 的 Symbol 中,就可以一次性生成所有尺寸,不需要我們自己手動調整各種規格的圖標輸出。

從零開始畫圖標系列:啟動圖標設計指南

應該有同學這時候還會產生疑問,模板里的畫布就是一個正方形,但是大多數手機的 APP 圖標使用的是圓角,所以,應該如何制作這個圓角,以及它的相關參數呢?

真實項目中,除非項目的特定要求,只需要提交正方形的圖形即可,之后無論是 APP Store,還是多數安卓應用商店,都會「自動」對該圖形進行裁切,生成符合自己系統的圓角圖標。

從零開始畫圖標系列:啟動圖標設計指南

如果我們想要設計出正方形圖形后預覽真實的效果,就可以用我們準備的 PSD 模板,將正方形置入到模板中即可。

從零開始畫圖標系列:啟動圖標設計指南

在設計已經確認以后,我們就要導出這些圖標。因為啟動圖標有很多擬物的設計或會使用真實的攝影素材,所以應用商店提交的格式會選用位圖格式而不是矢量格式,所以導出啟動圖標,只需要導出對應尺寸的 PNG 即可。

啟動圖標的設計演示

1. 圖標形式

從零開始畫圖標系列:啟動圖標設計指南

在一些比較基礎的應用類型中,通常會直接使用工具圖標的圖形設計啟動圖標。因為基礎的 APP 服務大多有表意極其清晰的工具圖標與之對應,例如郵箱、計算器、音樂、地圖等類型應用,企業往往在使用一些抽象的品牌化圖形與表意更清晰的工具圖標中選擇后者。

工具圖標的設計其實很簡單,就是在畫板中完成兩種元素的設計,一個是背景,一個是上方圖標。

背景的設計,比較常見的有兩種類型,純色、漸變。而上方圖標的設計里,包含的類型就是我們前面講過的幾種常見的工具圖標。所以你看,只要將它們組合,就可以很輕松地設計出符合主流特征的啟動圖標。

從零開始畫圖標系列:啟動圖標設計指南

所以,如果我們要設計一款筆記應用,那么就可以先畫一個線性的筆記圖標,然后再將它置入格線模板中確認大小,再分別為它們上色,就可以完成設計了。

2. 文字形式

從零開始畫圖標系列:啟動圖標設計指南

文字形式的設計,背景和上方一樣,也只使用純色和漸變,但這種設計的主要難點在于字體的設計上。

想要放文字,大家首先想到的肯定是直接用字體打進去,但是切記,字體的商業版權問題是不能視而不見的。選擇字體前,一定要關注該字體是否是免費的,百度或者官網都可以查詢。或者一開始就在免費字庫中挑選,如思源黑、思源宋、王漢宗系列等等。

可商用字體合輯:《我整理了200款免費商用字體,放心下載不會侵權!》

從零開始畫圖標系列:啟動圖標設計指南

如果覺得直接使用字庫文字太沒有設計感,那可以選擇做一次字體的二次創作,對于新手來說簡單一點。即一開始挑選一個合適的字體,然后在 AI 中對該字體進行臨摹,再對細節進行重新加工,比如襯線的調整,筆畫粗細的調整等等。

比如要設計一個我的應用,那么我可以取「超人的電話亭」的第一個字──超,作為圖標上方的文字。然后我選用「方正蘭亭大黑」作為基礎字形,對它進行重構即可。

從零開始畫圖標系列:啟動圖標設計指南

最后建議,如果不是一些比較嚴肅或是傳統的題材,盡量不要選用宋體或是楷體進行設計。

前往優設字體設計專題學習更多干貨:「字體設計」

3. 擬物形式

從零開始畫圖標系列:啟動圖標設計指南

雖然現在整體設計環境中,擬物已經被扁平取代,但不代表它已經消失,或是在形式上不合理。適當的擬物設計會讓我們對應用功能的認識更清晰,且更有趣味性。

還是老慣例,我們從簡單的擬物設計入手。目前擬物的領域中,使用最普遍的風格也是新手最容易學習的風格,即「輕擬物」的設計。這種風格需要刻畫的細節相對較少,更易于我們掌握,只要能用好漸變即可。

比如,iOS 的官方應用──文件,圖標的形式就符合輕擬物的特征。簡單分析一遍,即在確定完輪廓后,通過漸變填充來表示物體本身的高光和陰影,并添加投影來制造立體感。

從零開始畫圖標系列:啟動圖標設計指南

如果要設計一些更復雜的擬物圖形,可以通過多做擬物圖標的練習會更有幫助。在今天扁平化圖形當道的環境中,設計得精良的擬物圖標往往可以在滿屏的扁平圖標中脫穎而出,助于吸引用戶啟動應用。

總結

啟動圖標的介紹到這里就結束了,新手該掌握的知識點并不多。無論是更好的字體、圖案、插畫,都已經進入 LOGO 設計的范疇。如果要在這個領域進一步提升,那么針對性訓練的效果反而不理想,需要長期積累視覺、圖形的整體設計能力。

歡迎關注作者的微信公眾號:「超人的電話亭」

從零開始畫圖標系列:啟動圖標設計指南

收藏 543
點贊 48

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。