內容和風格確定了,參考也找的的差不多了,對于自己要做的東西有一個比較清晰的思路之后,先在草圖上將自己大致的想法畫出來,然后才用軟件將想法構建完善。這里做的幾個圖標都是比較簡單的,基本上可以用圖層樣式來實現所有的效果。
因為是擬物風格,所以在圖標制作的過程當中,要注意體積和光影的表達。通過顏色的選擇、相似的裝飾元素使整體風格看起來更加統一和諧。
先看看效果圖

教程步驟
草圖

一、相機圖標
步驟 01 建立文檔并制作背景
新建文檔,大小2000x800px,分辨率72;新建圖層,命名背景,填充前景色#d6d6dd
步驟 02 制作底座
新建300x300px的圓角矩形,圓角半徑60px,命名底座,添加圖層樣式制造體積感




步驟 03 制作鏡頭外圓
新建228x228px的圓形,命名【外圓1】,添加圖層樣式
復制外圓1,修改大小190x19px,命名【外圓2】,添加圖層樣式
將外圓1,外圓2編組命名【外圓】





步驟 04 鏡頭內部
新建大小162×162 px的圓形,命名【內圓1】
復制3個,大小分別修改為130x130px、90x90px、56x56px
分別命名為【內圓2】、【內圓3】、【內圓4】
再按順序添加以下圖層樣式





步驟 05 制作玻璃球
新建大小24x24px的圓形,顏色#000000,復制一個備用
添加蒙版,擦去上半部分,添加圖層樣式
將復制的圓形顏色改為#ffffff,調整不透明度10%,添加蒙版,擦出一個月牙形狀


步驟 06 制作鏡頭高光
按住CTRL+左鍵點擊【外圓1】圖層縮略圖得到圓形選區
新建一個圖層,用柔邊圓筆刷(大概400px)在圓形選區的上半部分輕輕拍一下,顏色#ffffff,不透明度20%
用布爾運算做出圖中圖形(三個圖層),顏色#ffffff,不透明度30%
添加蒙版將邊緣擦的模糊一點,讓邊緣過渡看起來自然一些
在較大的兩個圖像上添加圖層樣式

步驟 07 添加裝飾性元素
新建100×300 px的矩形,顏色#d43131,調整圖層順序使它在底座上方,做剪貼蒙版
選個字體打一些裝飾性的文字啥的
至此,相機就做完啦~(做完記得將相機的都編成一個組)

二、日歷圖標
步驟 01 制作底座和日歷基本形狀
將相機底座復制一個,新建228x 224 px大小的圓角矩形,圓角半徑24,命名【底頁1】,添加圖層樣式
復制底頁1,命名【底頁2】,修改投影大小,相對底頁1上移2px
復制底頁2,命名底頁3,相對底頁2上移2px。




#p#副標題#e#
步驟 02 制作主頁面上半部分
新建228x114px大小的矩形,將上面兩個角的圓角半徑調整為24px,命名【上半頁】,添加圖層樣式


步驟 03 制作主頁面下半部分
復制上半頁,垂直翻轉,用小白適當調整形狀,添加圖層樣式



步驟 04 制作日期
選擇一個字體,隨便打個數字,將數字轉化為形狀,添加圖層樣式,復制一層備用
按住CTRL+左鍵點擊【上半頁】圖層縮略圖,選擇數字圖層,添加蒙版
為備用數字圖層添加圖層樣式
CTRL+左鍵點擊【下半頁】圖層縮略圖,選擇備用的數字圖層,添加蒙版
用小白工具對備用圖層的形狀進行調整,添加圖層樣式
最后加上月份星期



三、相冊圖標
步驟 01 制作底座和膠片基本形狀
新建225×144 px大小的矩形,將右邊的兩個角的圓角半徑修改為10px,顏色#f6f5f5
運用布爾運算做出上下兩排小孔(12x16px,圓角半徑4px)
新建圓角矩形116×80 px,圓角半徑10px;顏色#dad7d7
復制一個,適當調整位置和大小
將三個圖層編組,命名【膠片-下】
整組復制,命名【膠片-上】
運用布爾運算將【膠片-上】中的底修改成合適的形狀
將兩組合起來編成一個新的組命名【膠片】,添加圖層樣式


步驟 02 制作膠片高光和陰影
新建34x155px的矩形,顏色#ffffff,羽化4.6
復制一層,將寬改為9px
兩個高光圖層居中對齊
新建空白圖層,用柔邊圓畫筆在【膠片-上】左側邊緣畫出陰影
調整圖層順序,使高光和暗部圖層在【膠片-上】的上方,做剪切蒙版
添加紅色裝飾物,使整體圖標風格統一

四、設置圖標
步驟 01 制作齒輪基本形狀
新建180×180 px大小的圓,40×240 px的矩形,將矩形與圓形居中對齊
用鋼筆工具在矩形與圓形交點處,為矩形添加四個錨點
用小白調整使新增錨點兩邊偏移10px,根據情況上下調整,使得四個新增錨點仍為矩形與圓形的交點
復制兩層,分別旋轉120°和240°
將所有形狀合并形狀組件
新建80x80px的圓形,與剛剛合并形成的形狀居中對齊,減去頂層形狀
添加圖層樣式,得到設置圖標的基本形狀



步驟 02 制作齒輪內部
白色部分:新建160×160 px和100×100 px的圓形,減去頂層形狀,添加圖層樣式


紅色部分:新建140x140px和100x100px的圓形,減去頂層形狀,添加圖層樣式,最后加上文字就可以了


五、地圖圖標
步驟 01 制作基本形狀
創建190×190 px大小的圓形,140×140 px大小的矩形,將矩形旋轉45°
用錨點轉換工具和小白,將左右兩點調整至與圓相切,并且帶有下面兩條邊帶有弧度,像是從圓上延申過來的感覺
創建80x80px的圓形,將三個圖形合并形狀減去小圓,添加圖層樣式和文字裝飾



六、視頻圖標
步驟 01 制作外部結構
大圓:創建228×228 px大小的圓形,5個50×50 px的小圓,均勻分布,減去頂層形狀,添加圖層樣式
小圓環:用60×60 px和50×50 px的圓做出5個圓環,將大圓的圖層樣式復制到小圓環上,關掉投影內陰影,放在5個小圓相對應的位置上。


#p#副標題#e#
步驟 02 制作扣狀結構
分別創建大小40x40px、34x34px、24x24px的圓形,命名【圓1】,【圓2】,【圓3】,添加圖層樣式





步驟 03 制作膠卷帶
創建220x220px大小,顏色#d4d4d4的圓,命名【底面】
創建大小150x150px的圓形,命名【膠卷帶】,復制一層隱藏備份
然后將源圖層轉化為智能對象,雙擊智能對象縮略圖進入智能對象后,添加上圖層樣式,再將源圖層轉化為智能對象
并添加智能濾鏡,Ctrl+s保存,回到圖標源文檔
CTRL+左鍵選中備份圓縮略圖得到選區,再選中膠卷帶層添加蒙版,加上投影
最后添加一些文字和裝飾物就完成啦,要注意調整圖層順序



七、信息圖標
步驟 01 制作信封
創建240x140px大小的矩形,下邊兩個角的圓角半徑為20px
刪除右上角的點,添加圖層樣式
復制一層,水平翻轉,底部的創建矩形旋轉45°即可完成

步驟 02 制作信
創建200x140px大小的矩形,添加圖層樣式
制作幾個148×6 px大小,顏色#ededed的矩形用來表示文本信息

八、天氣圖標
步驟 01 制作玻璃管
創建50x146px的矩形,頂部圓角半徑25px
100x100px的圓形;合并形狀,填充調整為0,添加圖層樣式


步驟 02 制作紅色液體
這一部分主要由管狀和球狀兩部分組成

液體管:創建一個42×100 px的矩形,添加圖中對應的圖層樣式


液體頂:創建一個42×8 px的橢圓;顏色#d13131,添加圖層樣式

液體頂-暗部:將液體管復制一層,顏色修改為#9e1717,添加蒙版將左側部分稍稍擦去,添加圖層樣式

液體球:創建一個90×90 px的圓形,添加圖層樣式(注意調整漸變的位置),之后添加蒙版,再上方擦出一個小口子,使它和【液體管】放在一起的時候看起來更自然


液體球-高光:CTRL+左鍵點擊【液體球】圖層縮略圖得到選區,新建空白圖層;用柔邊圓畫筆在選區左上角的位置輕輕拍一下,圖層模式改為疊加,不透明度和填充看情況適當調整。
液體球-投影:創建一個90x70px大小的橢圓,顏色#e83333,調整羽化值6.2,不透明度60%。

步驟 03 制作玻璃管高光部分
先制作左側部分,新建14×135 px大小的圓角矩形兩個,圓角半徑拉滿,顏色#ffffff
調整位置,布爾運算減去頂層形狀,添加蒙版,將邊緣部分擦得柔和一些
然后復制一層,水平翻轉,將不透明度調為75%,這樣就把右邊的也做好了
然后做一個小小的橢圓,調整一下不透明度和羽化值,最后把文字和刻度加上就制作完成了


結語
本期教程到這里就結束了,希望大家在練習過程中多思考、理解制作思路和操作方法,活學活用。
]]>
最終效果圖:

首先,新建一個文檔,我的是1024*1024。

在背景層上拉一個徑向漸變,顏色如圖所示~~

新建一層,D鍵把前景背景改為默認,填充白色,選擇濾鏡-雜色-添加雜色,平均分布,數量50%,勾選淡色,如圖所示

確定后把混合模式改為柔光,透明度30%

新建一個圓角矩形,如圖所示,調整好圓角,填充顏色隨便。Ctrl+a 選擇水平居中,垂直居z中,Ctrl+d取消選擇

雙擊圓角矩形添加圖層樣式~,數值如下

還有內陰影,顏色疊加、
顏色數值如圖所示:


新建一層,D鍵把前景背景改為默認,填充白色,執行濾鏡-雜色-添加雜色。

濾鏡-模糊-動感模糊,數值如下,接著在兩個圖層之間按Alt+左鍵創建剪貼蒙版。

新建一個小一點的圓角矩形,圓角調整好,居中對齊!顏色無所謂。
#p#副標題#e#
雙擊圖層添加圖層樣式~斜面與浮雕。

內陰影。

內發光

漸變疊加

外發光

現在的效果如圖所示:

新建一個圓角矩形,填充白色,調整好參數和位置:

雙擊圖層樣式添加投影

新建一層文字層,打上數字,顏色為黑色,調整好位置和大小。

Alt+v+e彈出水平線對話框,拉出一條水平為50%,一條垂直為50%的水平線,以便我們調整位置。

復制下方的圓角矩形到最頂層,Ctrl+t調整大小,填充白色,我加了個灰色是便于大家觀看。

并把透明度調整為12%,然后選中三個圖層Ctrl+g組合起來。

復制整個組到右邊,調整好位置,如圖:

Ctrl+J復制右邊日歷下方的白色層,把圖層移動到頂部,Ctrl+t調整好大小及位置,然后再Ctrl+t右鍵選擇透視,選中左上角的點按住shift鍵向左拖動,效果如圖

#p#副標題#e#
雙擊圖層添加圖層樣式



復制一層,右鍵圖層選擇清除圖層樣式,Ctrl+t右鍵選擇垂直翻轉,調整好位置:

Ctrl鍵加左鍵單機圖層縮略圖,執行選擇-修改-羽化,數值為10

新建一層空白層,填充黑色,Ctrl+d取消選區,并且把剛才的的圖層隱藏掉。

選擇濾鏡-模糊-高斯模糊。

往上移動一段距離,然后把填充透明度和圖層透明度調整下。

復制文字圖層,Ctrl+shift+] 把圖層移動到頂層。

右鍵圖層,選擇柵格化選區,然后用矩形選框工具刪除下面部分。

Ctrl+d取消選擇。Ctrl+t調整好大小,然后右鍵選擇透視,調整一下透視。

最終效果:

先看看效果圖

新建文檔,將我們所提供的紋理素材放入文檔中,充當背景。

我添加了一個色彩平衡調整層,調整了一下背景的顏色。

下面,用圓角矩形工具,畫出圖標的主體,并添加圖層樣式,我添加了斜面浮雕、內陰影、投影三個樣式。




復制一層這個主體,右鍵清除圖層樣式,將填充修改為0,重新添加一個新的圖層樣式。




接下來,我們來畫QQ瀏覽器的圖標,這個相信大家肯定會畫,非常簡單的布爾運算,在這里,我們分成了兩層來畫,首先,我們畫出了下面這個形狀。

我為這個形狀添加了一個漸變疊加。


接下來,還是用布爾運算,補上欠缺的那部分云。

選擇住組成QQ瀏覽器圖標的這兩個圖層,CTRL+G,創建圖層組,給這個圖層組添加一個圖層樣式。




最后我添加了一個色階調整層,作最后的微調。

最終效果如下:

很多人喜歡折騰圖標,所以,很多人問,有沒有新的圖標教程,于是,今天,是一個簡單的圖標制作,重點是金屬質感,同往常一樣,我們都是用圖層樣式來實現。
先看看效果圖

新建一個文檔,我用的大小是1000X800像素,創建一個漸變填充調整層,參數如下。

將這個漸變背景圖層轉換為智能對象,添加一個雜色。

用圓角矩形工具畫出我們的圖標主體,顏色設置為#f6f5f5,添加一個斜面浮雕和投影。



復制一層主體圖層,右鍵清除圖層樣式,將填充修改為0,添加一個投影樣式,我們來做投影加強。


用橢圓工具畫一個圓,設置圖層樣式。





同樣的用橢圓工具畫出一個小一點的圓,這個將是我們的旋紐,設置圖層樣式。



畫一個稍微小一點的圓,我們來制作金屬旋紐,效果我們通過圖層樣式實現。



#p#副標題#e#
新建一個圖層,填充白色,轉換為智能對象,添加一個雜色。

執行一個徑向模糊濾鏡,參數如下:

將這個拉絲圖層圖層混合模式修改為“顏色加深”,因為這個拉絲層我們是要用來給金屬旋紐增加金屬質感的,所以我們載入金屬旋紐的選區,添加一個圖層蒙版。

接下來,畫個三角箭頭,添加個圖層樣式。



最后,我們添加環繞旋紐的圖標。圖標不應該位于最頂層,應該在我們中間的旋紐下層,所以請注意看我們的圖層關系。這里我用的圖標,不是現畫的,是來自于Asif Aleem的分享。

我為箭頭指向的圖標添加了一個樣式,使其看了像是浮現。



而其他的圖標,我設置的顏色是#151926,施加的樣式則是讓其看了像是凹陷。



我們的最終結果如下:
