PhotoShop繪制質(zhì)感網(wǎng)頁下載按鈕圖標(biāo)(4)
在大多數(shù)的交互和網(wǎng)頁設(shè)計中,圖標(biāo)都是非常重要的一部分。雖然圖標(biāo)很小,但制作他們也經(jīng)常是個不小的挑戰(zhàn)。在這個ps教程里,我們將介紹到如何在PS中運用不同的形狀和反射制作一個下載文件夾的圖標(biāo)。我們開始吧
Step 1 – 新建文檔/鋼筆工具技巧
打開PS,新建一個一個文檔(Ctrl + N)。參數(shù)如下:
分辨率:72dpi
顏色模式:RGB
尺寸:600×600 px
使用鋼筆工具(P)創(chuàng)建如下形狀
Step 2 - 鋼筆工具繪制基本形狀
使用鋼筆工具繪制文件夾背后的部分,然后再繪制藍(lán)色條紋。如下圖所示
Step 3 – 完成基本型
繪制完成文件夾之后,繼續(xù)按下圖所示添加紙和箭頭。你現(xiàn)在應(yīng)該有五個圖層,每個形狀都會有自己的圖層。別忘了給每個圖層起一個好認(rèn)的名字
Step 4 – 添加顏色效果
為文件夾前面的部分添加下圖所示的圖層樣式。不透明的設(shè)為90%
為紙片添加如下的圖層樣式。不透明度降至90-95%左右
為條紋添加如下的圖層樣式
為文件夾的背面添加如下的圖層樣式
為箭頭添加如下的圖層樣式
現(xiàn)在你的圖標(biāo)應(yīng)該是這樣
Step 5 – 添加反射
新建一個組命名為"refs"。按下圖所示用鋼筆工具繪制反射。要確保你繪制的形狀是路徑曲線而非形狀圖層(注意下圖的黑箭頭所示)。閉合曲線之后,在工作區(qū)按右鍵選擇“建立選區(qū)”(羽化值為0)。選擇一個大筆刷(直徑大概470左右,硬度為0),沿選區(qū)的右半部份繪制反射。之后將混合模式改為疊加,不透明度為63%
Step 6 – 處理邊緣
新建一個組命名為"margins",在該組內(nèi)新建一個圖層(Ctrl + Shift + N)。現(xiàn)在增加邊緣的高光細(xì)節(jié)以使圖標(biāo)更具立體感。使用鋼筆工具沿拐角處和文件夾、箭頭和紙張的邊緣繪制路徑。然后在工作區(qū)右鍵選擇描邊路徑-畫筆。注意此時筆刷需要設(shè)置為直徑8像素,硬度為0;旌夏J礁臑榀B加,不透明度大概55%左右
Step 7 – 陰影
新建一層(Ctrl + Shift + N)制作陰影,將該層打入一個新組內(nèi)(Ctrl + G)。像第五步那樣繪制選區(qū)。為選區(qū)填充黑色,然后用模糊工具模糊邊緣。如果陰影太強了,需要將圖層的不透明度降至40%
Step 8 – 添加文字
用你喜歡的字體添加文字。這個示例中我用的是"Agency FB"。字體大小為40,不透明度75%
Step 9 – 添加最終的陰影和反射
用第五步所示的技術(shù)再為紙張?zhí)砑右恍┓瓷?/font>
用橢圓工具(U)添加一個陰影。如下圖所示繪制一個橢圓并添加一點點動感模糊。降低不透明度直到你覺得合適了
Final Preview – 最終效果
我還用相同的技術(shù)制作了一些不同的圖標(biāo),如下圖。希望你喜歡這個教程
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 下載圖標(biāo)
- 下載按鈕
學(xué)習(xí) · 提示
相關(guān)教程
- 圖標(biāo)設(shè)計,用PS快速給徽標(biāo)文字排版
- 圖標(biāo)設(shè)計,教你臨摹360寫實圖標(biāo)
- LOGO教程,臨摹QQ瀏覽器圖標(biāo)教程
- LOGO教程,曲面四分環(huán)的畫法
- LOGO教程,教你設(shè)計扁平化的谷歌logo圖標(biāo)
- LOGO教程,設(shè)計扁平化的瀏覽器圖標(biāo)
- LOGO教程,教你畫個四分環(huán)圖標(biāo)
- 圖標(biāo)設(shè)計,模仿QQ旋風(fēng)圖標(biāo)實例
- 圖標(biāo)設(shè)計,設(shè)計簡單的酷狗圖標(biāo)實例
- 圖標(biāo)設(shè)計,設(shè)計抽象的相機鏡頭圖標(biāo)教程