UI教程,設(shè)計(jì)不銹鋼質(zhì)感的ICON圖標(biāo)(8)
教程介紹了如何使用PhotoShop制作一個(gè)逼真的方形不銹鋼按鈕的過程,主要使用的是圖層樣式和形狀,在配合路徑完成最終效果,教程步驟很多,練習(xí)需要點(diǎn)耐心,有興趣的朋友可以跟著學(xué)一下,做完記得交作業(yè)。
臨摹的成果:
下面,我們開始山寨之旅。 新建文檔,我用的大小是2000*1500像素,設(shè)置背景色為# 101010
新建一層,設(shè)置前景色為白色,使用圓角柔邊畫筆,設(shè)置大小為1500像素,在畫布中點(diǎn)一點(diǎn),設(shè)置圖層的不透明度為60%。
下面,我們來做背景中那個(gè)圓形的圖案,我這里是用一個(gè)無縫圖案來完成的。新建一個(gè)40*40像素的文件,背景為透明,用橢圓工具畫一個(gè)20*20像素的正圓,并讓其水平居中,垂直居中。
以下截圖為方便觀看,是放大了1200%的截圖。
復(fù)制一層橢圓圖層,執(zhí)行“濾鏡—其他—位移”,設(shè)置水平和垂直位移均為我們文檔大小的一半。
現(xiàn)在我們的效果應(yīng)該是這樣。
下面,我們將自定圖案預(yù)設(shè)。點(diǎn)擊“編輯—自定圖案”
OK,現(xiàn)在回到我們那個(gè)圖標(biāo)的文檔,在剛才那個(gè)白色畫筆圖層的頂層新建一層,執(zhí)行“編輯—填充”,選擇我們剛才自定義的圖案。
為這個(gè)圖案圖層設(shè)置一個(gè)圖層樣式。
設(shè)置完圖層樣式,我們完成了背景的創(chuàng)建,效果如下:
下面,我們開始圖標(biāo)部分的操作。 用圓角矩形工具,運(yùn)用減去模式,畫出如下的外框形狀來。
為這個(gè)外框添加一個(gè)圖層樣式。
接下來,還是用圓角矩形工具,畫出如下圖中的紅色的內(nèi)框。
為其添加一個(gè)圖層樣式。
接下來,我們來做那個(gè)紋理效果,紋理的話網(wǎng)上估計(jì)大把,我也試著做了一下。新建一層,填充#333333,執(zhí)行“濾鏡—雜色—添加雜色”,設(shè)置數(shù)量為13%,高斯分布,勾選單色。
執(zhí)行“濾鏡—濾鏡庫(kù)—畫筆描邊—陰影線”,設(shè)置描邊長(zhǎng)度為38,銳化程度為3,強(qiáng)度為1。
將這個(gè)紋理圖層旋轉(zhuǎn)45度,創(chuàng)建剪貼蒙版。
復(fù)制一層內(nèi)框圖層,置于頂層,設(shè)置填充為0,添加一個(gè)圖層樣式,來模擬內(nèi)部的陰影效果。
用圓角矩形工具畫出頂層的這個(gè)框來。
為其添加一個(gè)圖層樣式。
下面,我們?yōu)榻饘倏蛱砑右粋(gè)拉絲效果。新建一層,填充#272727,執(zhí)行“濾鏡—雜色—添加雜色”,設(shè)置數(shù)量為20,高斯分布,勾選單色。
執(zhí)行“濾鏡—模糊—動(dòng)感模糊”,設(shè)置角度為0度,距離為200像素。
選擇頂框加外框的選區(qū),為拉絲紋理添加一個(gè)圖層蒙版,更改拉絲紋理圖層混合模式為“線性減淡(添加)”,不透明度為35%。
拉絲效果不是很明顯,復(fù)制一層拉絲圖層,更改圖層混合模式為柔光,不透明度為25%。
放入我們的LOGO,設(shè)置填充為0,并為其添加一個(gè)圖層樣式。
這兒同學(xué)們放一個(gè)自己喜歡的圖案/文字就好,比如優(yōu)設(shè)LOGO神馬的哈哈哈
OK,完成了LOGO的添加,我們最后來添加左右兩側(cè)的那兩個(gè)線狀的東西。設(shè)置前景色為#1f1f1f,畫一個(gè)矩形。
為這個(gè)矩形添加一個(gè)圖層樣式。
復(fù)制一層矩形圖層,清除掉圖層模式,重新添加一個(gè)圖層樣式。
現(xiàn)在效果如下,右邊的線直接把左邊的復(fù)制過去就行了。
大功告成!
部分作業(yè)展示:
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- P大點(diǎn)S
- ps網(wǎng)頁(yè)設(shè)計(jì)
- UI教程
- icon圖標(biāo)
- ICON
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡(jiǎn)約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)