圖標從廣義上理解是具有指代意義的圖形符號，分為表象圖標和表意圖標。表象圖標表達具體事物，比如書籍、食物、衣物等；表意圖標則是表達一個抽象概念或是行動、情感等，比如加號、清除格式、點贊等。

圖標的信息傳達

其實人類最早的記錄和表達就是從圖形開始的，無論是人類祖先在洞穴里留下的壁畫，還是中國的甲骨文和埃及的象形文字，即使是過去幾千年，現在我們還是能從圖形上解讀還原出有效信息。

人類對圖形的理解力讓圖標可以跨越語言的壁壘，濃縮并快捷地傳達信息，與文字相比門檻更低更易于理解。我們或許看不懂下面各個國家的文字，不知道寫的是什么，但應該都能看懂下圖這些代表洗手間的圖標，順利的找到洗手間，這就是圖標的力量。

正因如此圖標對于兒童APP來說也是非常重要的一點，對于文字的熟練度和接受度較弱的孩子來說，圖形的表意無疑更加友好的和好理解的。那么下面我們就一起來看看在兒童APP中圖標都有哪些特點吧。 

兒童APP圖標的特點

1.線性-粗線條

兒童APP中的線性圖標，很少出現細線條，一般都是粗線條的表現形式。細線給人的感覺會更加精致細膩，而粗線條更加厚實，比細線面積大也更清晰，更容易被眼睛捕捉到。相對來說就容易識別對孩子們也就更友好。

2.面性-造型飽滿

兒童APP中的面性圖標，造型一般都比較飽滿，飽滿是指圖形在固定范圍內的正負形，正形面積大。比如下圖的五星，可以看到越飽滿的造型正形面積越大，圖形更有分量感越飽滿越給人一種憨憨的可愛感覺。

這點其實也與人類的成長過程吻合，兒童的體型特征更加圓潤飽滿，而成年后身材比例拉長，逐漸成型身材曲線會更加分明。

飽滿圓潤的造型更可愛更具少兒感，而棱角分明曲線優美的造型更具成熟感。

3.圓角的使用

由于人類的弧形偏好和人眼結構等因素，相比與直角的尖銳，平滑的圓角更容易被我們所接受。

直角給人感覺更加銳利有鋒芒具有攻擊性，圓角則是安全的象征讓圖標更加柔和，所以圖標普遍使用圓角也是兒童APP的一個特點，圓角的使用讓圖標其更有親和力和安全感。直角銳利邊緣的圖標整體風格偏硬朗符，更多在較商務的產品中使用。

4.色彩層次豐富

相比成人向的產品，兒童APP中的圖標色彩的選擇和層次都更加豐富。成人向很多產品為了保證內容突出和頁面統一，圖標會選擇使用單色來表現。經過后天的逐漸培養，成人更能接受”空、素、白”這種美學，使用產品時，對于內容的關注也多余頁面其他元素。

但是對于審美比較天然原生態的孩子們來說，豐富的色彩是更具吸引力的，顏色的刺激從我們祖先追逐顏色鮮艷的成熟果實就已經開始積累。在兒童APP中使用鮮艷多彩的圖標讓頁面更加生動活潑，更具吸引力。

其實從其他生活物品中也不難發現這一點，兒童使用的產品顏色更加多彩豐富，成人的很多產品顏色更加樸素。

5.寫實幫助理解

人們的認知都是先從簡單具體事物開始的，逐漸提取分析其特點概括成抽象的概念，掌握概念后又再運用于具體事物。比如蘋果，孩子先認識到的是真實的紅蘋果，通過大量的接觸和學習，逐漸知道蘋果的特征，可以理解圖形代表的蘋果，通過圖形中體現的特征，再認識黃蘋果也屬于蘋果。

孩子們對抽象符號的接受度不如成人，初期需要更多生活中真實熟悉的場景來輔助理解。所以在兒童APP的圖標設計中，與成人向的產品不同，一定程度的寫實是可以幫組孩子們理解其含義的。孩子不一定能理解一個矩形加一個橫條代表手機，但是真實的手機孩子們都能認識理解。

不少APP都選擇了較寫實的圖標。

6.品牌化與IP形象結合

兒童APP中不少都有IP形象，為了更好擬人化作為孩子們的一種陪伴，以增加孩子與產品的親密度。于是也產生了圖標與IP形象相結合的設計，這種方式適合面積較大的圖標，如金剛區、功能 圖標等，IP形象與功能或使用場景結合，能突顯品牌基因同時也更具代入感，有助于孩子理解。

劃重點

• 人類對圖形的理解力讓圖標可以跨越語言的壁壘，濃縮并快捷地傳達信息，與文字相比門檻更低更易于理解。
• 兒童APP中圖標的特點有粗線條、造型飽滿、色彩層次豐富、寫實和與IP形象結合。

原文地址：海鹽社（公眾號）

作者： 焱小玖

先看看效果圖

我們從背景的創建開始，我用的尺寸是1000*800像素。創建一個“漸變填充”調整層，設置如下：

畫一個600*600像素的圓，設置填充為0，并添加一個斜面和浮雕。

設置前景色為#312f35，利用布爾運算，畫出下圖中的這個圓環。這個不多贅述，不懂的可以百度下。

為這個圓環添加一個圖層樣式。

設置前景色為黑色#000000，跟剛才一樣的操作方法，利用布爾運算，畫出下圖中的這個小的圓環出來，添加一個圖層樣式。

設置前景色為#aba9a8，畫一個350*350像素的圓，命名為“主體”，并添加一個圖層樣式。

用橢圓工具畫一個330*330像素的正圓，添加一個圖層樣式。

接下來，我們返回到剛才那個命名為“主體”的圓那里，復制一層，命名為“浮雕1”清除圖層樣式，設置填充為0，添加一個斜面浮雕。

#p#副標題#e#

接著復制一層“浮雕1”圖層，在圖層樣式中，勾選將內部效果混合成組，并更改斜面浮雕參數，添加一個圖層蒙版，擦拭一下。

復制“浮雕2”圖層，在圖層樣式中更改斜面浮雕的陰影角度，同時調整蒙版。

剛開始，想用一個斜面浮雕搞定這個效果，調節了好幾次等高線，效果不佳，于是放棄，改用了3個斜面浮雕配合蒙版來疊加效果，有大神能搞定的，請告之。

接下來，我們開始添加刻度，這個沒什么好說的，大家應該都會，畫個矩形，變換中心點，旋轉3度，CTRL+SHIFT+ALT+T，輕松搞定。這里我設置的顏色為白色，不透明度7%。

一樣的方法做出那橙色的刻度，顏色為#f6a303。

下面，我們來添加那個類似雷達掃描的漸變，從我們的截圖中，你可以清楚的看到，我們的形狀是利用布爾運算得到的，一個圓和一個旋轉了15度的矩形相交，將這個形狀的顏色設置為#171826，圖層填充設置為0，添加一個漸變疊加，并添加蒙版擦拭下方。

接著我們來添加高光，用橢圓工具畫一個圓，設置顏色為#bbaffd，圖層混合模式為“柔光”，不透明度“81%”，在屬性面板中，將這個形狀羽化35.6像素，并載入“主體”那個圓的選區，為這個高光添加一個蒙版。

接下來，我們完善一下高光，復制這個藍色高光圖層，左移上移一定像素，更改形狀顏色為#e9e5fe，羽化不修改，圖層混合模式依舊為“柔光”，圖層不透明度更改為“56%”。

復制一個剛才那個“主體”圖層，移到最頂層，設置圖層填充為0，添加一個內陰影。

打上文字和添加那三個形狀，形狀圖標的話，利用布爾運算來畫。

最后，我們添加左側的那個按紐，設置前景色為#a09e9f，畫個圓，添加個圖層樣式。

最終效果：

效果圖：

操作步驟：

第一步：打開PS，尺寸大小大家可以隨意，我這里設置的是900*900px;

第二步：使用圓角矩形工具，半徑70px，按住Shift鍵，建立圓角矩形

第三步：添加圖層樣式，斜面和浮雕+漸變疊加

色值：f845f8 ffc6a8

第四步：畫愛心，可以用鋼筆工具勾勒，也可以用自定義形狀工具畫出來，再修改

第五步：復制一層愛心，使用鋼筆工具，減去頂層形狀，勾勒心型缺角;

第六步：點擊下層愛心圖層，圖層樣式——漸變疊加;

色值：f03f03 f8561f fffbd5

第七步：按住Ctrl鍵，左鍵單擊最上層圖層，轉為選區;

第八步：新建一個空白圖層，羽化15px——描邊;

色值：fa63e6

第九步：給這一圖層添加圖層蒙版，按照第七步，建立選區如下，選擇反向，用黑色畫筆涂抹邊沿;

取消選區，用柔邊圓畫筆繼續處理圖層蒙版，如下效果;

圖層混合模式——強光;

最后一步：做心形陰影?？截愖钔暾膼坌男螤顖D層一次，編輯第一個愛心形狀圖層，填充為0，圖層樣式——投影;

一顆漂亮的心形圖案就創作完成了，同學們要按照步驟操作，才可以完成。

完成后的最終效果：

Projava：在Photoshop中，圖層樣式是最為直觀的東西，所有的效果都能量化，以數值的形式表現出來，就是各種晦澀難懂的等高線也可以用數字來表現。利用圖層樣式中的混合模式可以得到千變萬化的效果，很多的UI和icon絢麗的效果大多數是靠圖層樣式來實現的。

今天的iTunes圖標是一個非常經典的icon，不過現在你們看不到了?，F在的版本只能說是走火入魔，推崇扁平化，說它漂亮也談不上，說難看也不至于。

下面是我完成的效果圖，不過我對它的外輪廓作了一些惡搞性質的變化。這個外形介于正方形和圓形之間，它跟圓角矩形不是一個概念，迎合了現在的“審美觀”：

下面開始制作過程，首先我百度了一張原圖作為參考～

新建一個1000*1000的新畫布~

粘貼剛才復制的iTunes原圖，移動到角落上作為參考~

按ctrl+r打開標尺，右鍵標尺選擇百分比~

快捷鍵alt+v+e(按住alt，依次按V再按E)在垂直位置輸入50%~

繼續橫向位置也是50%~

設置好參考后點擊圖層欄下面的快捷按鈕添加一個漸變調整層。

選擇你認為比較合適的顏色搭配。本來我打算給出顏色的代碼，后來想想還是算了，每個人都有自己的獨好。我認為好看的你不一定也認同，所以這里你大可不必按照我的選擇。

在圖形工具里選擇橢圓工具~

以參考線的交叉點為中心畫一個大小差不多跟畫布大小的圓形。至于它的顏色大可不必在意，任何顏色都可以，我只要的是它的形狀~

右擊“選擇工具”，選擇“直接選擇工具”，也就是白色的箭頭。如果你比較熟悉這個工具的話可以結合ctrl建快速轉換。

框選水平方向的兩個錨點~

右鍵選擇“自由變換點”~

#p#副標題#e#

在”設置水平縮放”里輸入80%大小。這時候你看到這個圓形變成一個橢圓。

同樣框選垂直方向的兩個錨點，在垂直方向輸入80%。現在你看到的形狀跟我頂樓的差不多了~

按ESC隱藏路徑。雙擊打開圖層樣式，添加一個漸變。如果你的想象力足夠豐富的話，可以隨意填充你認為漂亮的顏色組合~

繼續添加描邊。其實用斜面浮雕效果也差不多，不過我認為用線性漸變的描邊來模擬“倒角”更加細膩~

ctrl+j復制一層，ctrl+t自由變換。打開“保持長寬比”，同比例縮小為95%~

重新修改它的圖層樣式數值，首先是漸變填充~

它同樣也有一個線性漸變的描邊，注意它的顏色要加深~

ctrl+j復制一層，在圖層縮略圖上右鍵清除圖層樣式~

ctrl+t自由變換。同樣要打開“保持長寬比”縮小為95%~

按ESC或者點擊矢量蒙版隱藏路徑。雙擊進入圖層樣式，添加一個徑向漸變。每個人的口味不同，這里我想盡量模擬原圖的風格，所以選擇了接近原圖的顏色~

添加內發光，我們要摒棄一個概念，“發光”不一定是亮的，有時候也可以的暗的~

再次添加“投影”，現在我得到一個邊緣看上去比較柔和的效果。其實這里你盡可使用“外發光”，效果是一模一樣的，不過投影的控制更加靈活，它還有”距離“的選項，”外發光“相比之下比較死板~

還有這個形狀下面的反射效果，以前我在別的網站見過PS愛好者臨摹這個icon的時候比較拘謹，他另外使用選區的減除來實現這個效果，這里我覺得可以鄙視一下，相比之下他對圖層樣式的理解沒有我透徹，我就這樣吹一下牛大概不會影響到我的光輝形象吧?開啟內陰影模擬下面的反射效果，這里我要提醒各位注意”使用全局光“的選項~

繼續復制一層，在圖層上右鍵清除圖層樣式~

ctrl+t把這個形狀縮小至98%~

單獨選擇下面的錨點往上移動~

結合shift選擇左右兩個錨點，右鍵選擇”自由變換點“編輯這個·····形狀的外形~

#p#副標題#e#

雙擊這個結果編輯的形狀進入圖層樣式，添加線性黑白漸變，注意混合模式的變化~

還有白色的”內陰影“模擬高光~

接著是icon中的音符，這里要使用到圖形工具。先畫一個橢圓，大小隨意，到時候我們可以編輯~

用”疊加模式“畫一個矩形，記得要用第二個的疊加按鈕，這樣能保證它們在一個圖層里~

選擇”路徑選擇工具“，框選這兩個形狀后按ctrl+alt+t復制移動到合適的位置~

同樣還是選擇”路徑選擇工具“，點擊任意一個矩形，ctrl+alt+t自由變換，把它設為音符橫向~

點擊上面的”組合“合并~(合并形狀組件，不同版本顯示不一樣，勿糾結)

選擇鋼筆中”刪除錨點工具“，刪除右邊多余的錨點~

選擇”添加錨點工具“，在橫條中間增加兩個錨點~

ctrl+t 編輯這個音符，在垂直斜切里輸入-11度，這里沒有硬性規定必須要11度。我只是目測它大概是這個角度~

使用”直接選擇工具“選擇這兩個剛剛添加的錨點，往上移動一些距離~

雙擊這個音符圖層打開圖層樣式，先添加一個徑向漸變~

添加斜面浮雕效果~

外發光，我使用了”柔光“模式以強化它的通透效果~

這個音符的外發光還有更深的一層，既然我已經用過了”外發光“，只好使用投影來實現，不過我前面說過了，用投影來實現一點也不遜色于外發光~

#p#副標題#e#

接著用一個內發光來強化這個音符。這里我墨跡幾句，個人認為圖層樣式里最強大的功能不是投影，也不是斜面浮雕，而是等高線。如果你的觀察力足夠強的話你會發現我使用了一個很特別的等高線~

選中所有可移動的圖層，往上一動一段距離~

最后一步，我用Photoshop力最基礎的畫筆來制作它的陰影，畫筆是Photoshop里最強大的功能，而且沒有之一。如果沒有畫筆你什么都干不了，在漸變背景層上新建一層，用一個硬度為0，差不多120大小在底下點一下~

ctrl+t自由變換，水平拉伸~

不要確認這個操作，繼續右鍵選擇變形，仔細的把它調成這個形狀~

稍微往上移動~

選擇這個陰影層，開啟圖層欄上面的”鎖定像素“按鈕，給它填充比漸變背景上更深的顏色~

選擇畫筆，減少透明度和流量，在最接近圖標的地方涂抹更深的顏色~

完成!

最終效果：

下面一起來學習吧：

步驟一：首先新建畫布900px*900px畫布，命名為日歷圖標，為背景添加圖層樣式。

步驟二：使用圓角矩形工具、繪制一個530px*530px圓角半徑為90px底座，并為它添加圖層樣式。

步驟三：高逼格的底座一下就出來了，有木有!!!接下來繼續使用圓角矩形工具、繪制一個398px*398px圓角半徑為40px日歷，并為它添加圖層樣式。

步驟四：復制日歷圖層，將復制的圖層移動到合適的位置。

步驟五：再次復制日歷圖層，利用形狀圖層布爾運算，減去頂部，命名為變形圖層，并合并形狀組件。

步驟六：我們復制變形圖層吧， ctrl+t調整中心點垂直翻轉一下，調節高度，右鍵透視調節合適形狀，合并兩個形狀清除之前的圖層樣式，并從新添加圖層樣式吧。

#p#副標題#e#

步驟七：現在我們來繪制右側裝飾，制一個14px*56px圓角半徑為3px的矩形顏色為#101010，并為它添加圖層樣式。

步驟八：選擇橢圓工具，繪制一個寬高8px*4px的橢圓，并添加高斯模糊命令，復制出另外三個并移動到合適位置。

步驟九：將右側裝飾打組，復制裝飾組移動到左側位置。

步驟十：現在我們來繪制文字部分，字體方正蘭亭黑簡體 R.大小200點，顏色為#92181a，復制文字，將兩個文字右鍵柵格化文字，刪除不需要的位置。

步驟十一：將文字下圖層，ctrl右鍵執行透視效果，并添加圖層樣式。

步驟十二：現在我們來繪制最后一個橫線吧，用直線工具、繪制一個寬度360px粗細3px的直線，為它添加圖層樣式，并添加高斯模糊效果就完成這個案例了哦。

下面就是最終效果圖：

最終效果：

老規矩，先來分析一下。這里我們主要分為四個部分：底座、綠條、大鏡頭、小鏡頭，其他問題都不大，主要是鏡頭部分、需要用到多個圖層及圖層樣式，來表現圖標的立體感，騷年分析完已經成功一半了，離成功還會遠么，噢耶!!!

步驟一：

首先新建畫布800*600畫布，命名為相機，填充背景顏色#c5c3c6

步驟二：

使用圓角矩形、繪制一個280*280，圓角半徑為50px的圖層，并為它添加圖層樣式。

步驟三：

接下來我們新建85*280的矩形，命名為綠條、添加圖層樣式。

步驟四：

使用橢圓工具、繪制一個170*170的大圓，并為它添加圖層樣式。

步驟五：

繼續使用橢圓工具、繪制一個150*150的圓，并為它添加圖層樣式。

步驟六：

繼續使用橢圓工具、繪制一個135*135的圓，并為它添加圖層樣式。

步驟七：

我們繼續使用橢圓工具、繪制一個115*115的圓，并為它添加圖層樣式。

#p#副標題#e#

步驟八：

繼續使用橢圓工具、繪制一個70*70的圓，并為它添加圖層樣式。

步驟九：

繼續使用橢圓工具、繪制一個65*65的圓，并為它添加圖層樣式。

步驟十：

有木有很快，現在我們來繪制最后一個圓，繼續使用橢圓工具、繪制一個28*28的圓，并為它添加圖層樣式。

步驟十一：

使用橢圓工具、繪制二個白色的圓，調節變換大小。

步驟十二：

現在使用形狀工具布爾運算為鏡頭添加高光吧、繪制兩個正圓相交命令下留取高光形狀，顏色為白色。

步驟十三：

接下來為高光添加圖層蒙版擦除不需要的位置，將填充數值重新設置。

步驟十四：

嘻嘻差不多了ヽ(￣▽￣)?，高逼格的趕腳有木有，最后我們用形狀工具，高斯模糊命令將投影位置處理一下吧。

詳細過程

最終效果