PhotoShop設(shè)計(jì)制作Web2.0質(zhì)感文字圖標(biāo)

2022-12-26 11:17:06 來(lái)源/作者: / 己有:31人學(xué)習(xí)過(guò)


作者:河馬 翻譯   出處:網(wǎng)

今天我將帶大家學(xué)習(xí)這篇PS教程,教程主要講述了如何使用Photoshop去制作一個(gè)簡(jiǎn)約美觀的文件圖標(biāo)。
在開始之前看參考一下最終效果,如圖所示

1、首先我們新建一個(gè)圖片文件,尺寸大小可以自由決定,在這里我使用512*512px的尺寸。接著新建一個(gè)圖層,
使用“圓角矩形工具”,半徑大約為20像素左右,畫出一個(gè)正方形,如圖所示。

2、選擇“圖層—圖層樣式—漸變疊加”,雙擊漸變調(diào)色板,設(shè)置漸變顏色。接著設(shè)置(樣式:徑向、角度90、
縮放:150),然后在圖片中向上拖動(dòng)漸變的中心,使它靠近頂部,如圖所示。

3、設(shè)置“內(nèi)發(fā)光”圖層樣式,如圖所示。在這里你可以嘗試使用不同的等高線,這樣會(huì)得到一個(gè)明顯的內(nèi)發(fā)光薄膜,
如圖所示

 


4、設(shè)置“描邊”圖層樣式,大?。?、混合模式:疊加、不透明度:43%、顏色:黑色、填充類型:顏色,如圖所示。 

5、下面制作絲帶。新建一個(gè)圖層,使用“矩形工具”畫出一個(gè)暗紅色的長(zhǎng)方形,選擇“編輯—變換—旋轉(zhuǎn)”
調(diào)整其角度,并把它置于正方形的右上角,如圖所示。調(diào)整好角度和位置后不要按下Enter或雙擊確定。
(當(dāng)使用Ctrl+T調(diào)整角度時(shí),按著Shift鍵,可以獲得完美的45度旋轉(zhuǎn),)

6、按下Ctrl+'顯示網(wǎng)格,然后選擇“編輯—變換—斜切”參考下圖所示調(diào)整其形狀,如圖所示。

7、調(diào)整好以后,我們可以使用方向鍵微調(diào)一下得到最佳位置

8、接下來(lái),我們制作絲帶的背面。在正方形圖層的下面創(chuàng)建新圖層,然后參照下圖所示,使用鋼筆工具畫出路徑,
并填充黑色即可

 


9、返回絲帶正面的圖層,為它添加漸變疊加、投影兩個(gè)圖層樣式,如圖所示 

10、如果你發(fā)現(xiàn)絲帶的投影超出了正方形的邊界,那么你就必須把超出的部分處理掉

11、對(duì)細(xì)節(jié)進(jìn)行處理后,我們將得到下圖所示的效果

12、下面我們來(lái)為這個(gè)圖標(biāo)制作一個(gè)名稱標(biāo)簽。按著Ctrl鍵單擊圖層面板中“正方形圖層”的“縮略圖”,
載入其選區(qū)。接著選擇“矩形選框工具”在屬性欄設(shè)置“從選區(qū)減去”,然后刪除選區(qū)的大半部分,如圖所示

 


得到如下選區(qū)。 

13、現(xiàn)在創(chuàng)建一個(gè)新圖層位于正方形圖層上面,然后使用漸變工具在選區(qū)中填充一個(gè)線性漸變效果,如圖所示

14、參考下圖所示,為圖層添加內(nèi)發(fā)光圖層樣式

效果如圖所示

15、最后,我們?cè)趫D標(biāo)上添加文字就大功告成了



標(biāo)簽(TAG) UI設(shè)計(jì)教程