不管是設(shè)計(jì)小白還是久經(jīng)沙場的大佬，大家做詳情頁，都逃不過一樣?xùn)|西：圖標(biāo)。

圖標(biāo)又稱icon，一般以組合的形式在詳情頁中出現(xiàn)，充當(dāng)產(chǎn)品功能的展示要素。

作為詳情頁中很小的一部分，圖標(biāo)看著很簡單，但是對設(shè)計(jì)師的要求卻一點(diǎn)也不簡單。

好的圖標(biāo)是錦上添花，差的能直接把你送走。

想要設(shè)計(jì)出一組符合產(chǎn)品調(diào)性的優(yōu)質(zhì)圖標(biāo)，大小、形狀、顏色、角度、線條粗細(xì)、疏密關(guān)系等等，都需要設(shè)計(jì)師反復(fù)斟酌。

今天我們就以一組設(shè)計(jì)難度中等的圖標(biāo)給大家展示一下，想要把圖標(biāo)做好，都需要注意哪些細(xì)節(jié)。

先來一起梳理下這組詳情頁的設(shè)計(jì)邏輯，熟悉頁面的整體風(fēng)格。

詳情頁的頁面轉(zhuǎn)換其實(shí)有點(diǎn)類似于PPT，重點(diǎn)是流暢舒適，避免觀眾視覺疲勞。

這組詳情頁的一個優(yōu)勢就是利用了深淺跳色和圖形分割，控制畫面節(jié)奏感?；疑幕【€模擬產(chǎn)品外形，增強(qiáng)記憶點(diǎn)，與主題相呼應(yīng)。

然后，我們來觀察它的圖標(biāo)。

圖標(biāo)講究的就是整體的統(tǒng)一性，寫實(shí)不能跟寫意放一起；空心不能跟實(shí)心放一起；粗線條、細(xì)線條，雙線條也不能放一起。

這組圖標(biāo)走的就都是一個路子，靈感來源于產(chǎn)品中心的圓形按鈕，顏色也是一脈相承。

唯一的小問題是3L的字體選的一般，用的是橫細(xì)豎粗的形式。

建議大家做圖標(biāo)的時候還是多用橫豎等粗，線條感強(qiáng)一些的字體，這樣能跟整體的文字風(fēng)格更加符合。

下面，我們來具體拆解，看看這個圖標(biāo)是怎么做的。

先拉一個純色的背景，模擬詳情頁的光影走向，右上角加一些光，左下角壓暗，形成明暗過渡。

然后在背景中，拉一些類似墻面的素材，利用正片疊底、濾色等圖層模式，形成顆粒感。

背景一塊，可以多找找圖片，前期素材質(zhì)感到位，能給后期省很多事兒。

然后開始拆圖標(biāo)。

這個圖標(biāo)由上下兩個圓構(gòu)成，中間的小圓微微向下凹陷，兩個圓都有一定的厚度，且底部還有一些投影。

我們一開始先不用想怎么用斜面浮雕這種程序化的東西實(shí)現(xiàn)這種效果，先考慮能不能用手“搓”出來。

把底層的內(nèi)部結(jié)構(gòu)摸熟了，再用圖層這類快捷工具，這樣能學(xué)的更扎實(shí)，所以我們這次直接搓。

先用圓形工具拉出兩個圓，調(diào)整成圖標(biāo)的顏色。

然后開始描邊，這里為了方便大家觀察，我們先將顏色設(shè)成了紅色。

利用濾鏡或者屬性中的羽化，讓邊緣變得模糊。

將紅色調(diào)整成跟圖標(biāo)相適應(yīng)的顏色，這個感覺就出來了一點(diǎn)點(diǎn)。

下面開始加高光，復(fù)制圖層，將顏色調(diào)整為白色，注意高光圈圈的位置，是被底部的大圓完全包圍的。

然后，還是利用羽化模糊邊緣。

加一個蒙版，利用畫筆在右上角反復(fù)磨蹭，形成一個過渡，高光就弄好了。

這次，主要想給大家分享的是這些小技巧，所以，不用完全照搬原圖，還是之前一直強(qiáng)調(diào)的：

照搬參數(shù)沒有意義，要理解參數(shù)背后的原理。

投影同樣也可以不用斜面浮雕，復(fù)制一個圓出來，做一個錯位。

利用濾鏡中的旋轉(zhuǎn)模糊。這個模糊有個好處，就是可以設(shè)置中心點(diǎn)，調(diào)整模糊角度和過渡范圍。

越靠近中心點(diǎn)，旋轉(zhuǎn)和模糊的角度越小，我們就可以控制虛化的位置，讓影子的呈現(xiàn)更為自然。

教大家一個偷懶的小技巧，先挪出一個圓形成錯位。

然后依舊稍微給點(diǎn)羽化，再拉伸影子的形狀。

最后，利用蒙版工具將影子的邊緣擦淡。

靠近根部位置需要變實(shí)，所以就再復(fù)制一層。

這次不需要那么強(qiáng)的羽化，只羽化一點(diǎn)點(diǎn)。

將模式改為正片疊底，降低不透明度。

之后，根據(jù)畫面需要，再次利用羽化，讓圖層更好的過渡在一起。

再用畫筆修飾細(xì)節(jié)，最后將圖層打個組，整體調(diào)整不透明度。這樣做出來的影子層次會非常豐富。

影子搞定了，就是利用曲線，模擬一個從右上角打光的光源。

邏輯搞通了，中間的圓，我們就來試下斜面浮雕。

調(diào)整深度和角度，方法改為平滑，過渡更加自然。

這塊還可以用內(nèi)發(fā)光，增加細(xì)節(jié)，豐富光影變化。

又出現(xiàn)一個問題，光從右上角打入，原圖中，影子會形成一個凹陷感，這個部分要怎么處理？

注意一個細(xì)節(jié)，我們之前不是用斜面浮雕做的，是畫出來的圓。

所以可以利用曲線工具壓暗，然后反向處理，ctrl加左鍵得到中間的選區(qū)。

再利用畫筆，自己在選區(qū)中繪制光影。

手搓影子，我們已經(jīng)演示完了，下面再試試加投影。調(diào)整投影的方向和顏色，并且將模式改為正片疊底。

可以看到影子出現(xiàn)了，但是缺了點(diǎn)層次。

想要影子變化更豐富，就可以再次添加投影。

為了方便大家觀察，再次添加的投影，我們也設(shè)成紅色，這樣影子的中間就會形成過渡。

將顏色調(diào)回深灰色，降低不透明度，這樣圖標(biāo)的主體就做好了。

刻度部分可以通過加素材或者重復(fù)排列線條的方式解決，這部分這里就不詳細(xì)講啦。

我們直接來看下圖標(biāo)中的文字或者說符號要如何添加。

一般來說，這類符號要根據(jù)產(chǎn)品賣點(diǎn)，具體功能具體設(shè)計(jì)，就比如這個小火苗，PS中并沒有可以直接采用的圖標(biāo)。

我們需要做的是掌握方法，然后將設(shè)計(jì)好的符號融入圖標(biāo)，加強(qiáng)質(zhì)感。這里就簡化一下，以一個圓角矩形給大家舉例。

吸取參考圖的顏色，調(diào)整線條的粗細(xì)，先簡單的描一個邊。

光從右上方打入，所以在圖案內(nèi)部會形成一圈內(nèi)陰影，調(diào)整角度，顏色壓暗。

同時，右上方也需要出現(xiàn)高光區(qū)域，斜面浮雕、外發(fā)光、內(nèi)發(fā)光這些方法可以做，但是內(nèi)陰影同樣也可以。

只不過這次將顏色提亮，角度與剛剛內(nèi)陰影的相反，然后模式改為濾色，這樣也能模仿發(fā)光的效果。

最后，根據(jù)個人需求對細(xì)節(jié)進(jìn)行調(diào)整，這樣一個質(zhì)感滿滿的賣點(diǎn)圖標(biāo)就做好了。

這次的教程到這里就結(jié)束了，有收獲的朋友記得點(diǎn)贊、評論、轉(zhuǎn)發(fā)哦~

大家有什么沒有看懂的，也莫慌，點(diǎn)擊下面?zhèn)魉蛶В^看視頻教程~

【Photoshop電商教程】PS刻畫超有質(zhì)感的UI圖標(biāo)?。?！

另外，有什么想學(xué)的知識點(diǎn)，也可以在評論區(qū)告訴我們，我們也會在之后的教程中為大家持續(xù)講解。

就像我們開頭說的，圖標(biāo)這個元素看著不起眼，但是在電商詳情頁的產(chǎn)品展示中非常重要。

一般首屏抓住用戶注意力，敲定這組詳情頁的設(shè)計(jì)風(fēng)格。

下一屏就是帶著圖標(biāo)的賣點(diǎn)總述，幫助消費(fèi)者快速了解產(chǎn)品優(yōu)勢，接下來才是分屏賣點(diǎn)論述。

一組好的賣點(diǎn)圖標(biāo)能為整組詳情頁豐富細(xì)節(jié)，提升質(zhì)感。

而圖標(biāo)的制作其實(shí)并不難，斜面浮雕、內(nèi)外陰影、打光描邊、再疊疊光效材質(zhì)，就能搞定大部分圖標(biāo)。

關(guān)鍵是要契合產(chǎn)品調(diào)性，與整組詳情頁的設(shè)計(jì)風(fēng)格相統(tǒng)一。

這就需要大家在日常工作中，對這一塊多加注意，有意識的積累復(fù)盤，多多練習(xí)。

最后，這一次的詳情頁其實(shí)是來自我們一位學(xué)員的練習(xí)作品。

期待他在日后的學(xué)習(xí)工作中能做出更多的優(yōu)秀設(shè)計(jì) ，也歡迎其他學(xué)霸前來投稿~