進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條(5)
這個(gè)進(jìn)度條主要利用圖層樣式來制作,方法很簡單,喜歡的跟著一起練習(xí)吧,做完交作業(yè)。
先看看效果:
新建個(gè)文檔,我這里用的是800*800像素,填充黑色,并設(shè)置一個(gè)圖層樣式。
將“背景”圖層轉(zhuǎn)換為智能對象,執(zhí)行“濾鏡—雜色—添加雜色”,設(shè)置數(shù)量為1,高斯分布,勾選單色。
執(zhí)行“濾鏡—濾鏡庫—畫筆描邊—陰影線”,設(shè)置描邊長度4,銳化程度10,強(qiáng)化1。
現(xiàn)在,我們就完成了背景的創(chuàng)建。
畫一個(gè)620*45像素的圓角矩形。
為這個(gè)圓角矩形添加一個(gè)圖層樣式。
設(shè)置完圖層樣式,我們得到如下效果。
接下來,我們畫一個(gè)白色的500*25像素的圓角矩形。
我們畫一個(gè)細(xì)長矩形,然后旋轉(zhuǎn)30度。
用直接選擇工具,選擇住這旋轉(zhuǎn)后的矩形,CTRL+T,把X軸的水平位置增加35像素。如我下圖中的截圖,原來的位置是80像素,更改為115像素。
用直接選擇工具選擇住這個(gè)矩形,CTRL+ALT+SHIFT+T,瘋狂復(fù)制,友情提示,用直接選擇工具選擇住,再次變換的時(shí)候,就不會生成新圖層,因?yàn)槲覀冎幌胍玫揭粋(gè)圖層而已,現(xiàn)在,我們得到如下效果。
我將這一堆的條紋取名為漸變,將其下移到白色圓角矩形的位置,創(chuàng)建一個(gè)剪貼蒙版,并設(shè)置個(gè)圖層樣式。
這里的這個(gè)漸變參數(shù)隨自己喜歡,你想讓進(jìn)度條的漸變是什么顏色,就設(shè)置什么顏色。
下面,我們回到那個(gè)白色的圓角矩形,設(shè)置一個(gè)圖層樣式。
現(xiàn)在我們得到如下效果:
下面,我們來畫一個(gè)進(jìn)度框,沒啥說的,畫一個(gè)矩形和一個(gè)三角形來拼湊,然后拷貝那個(gè)黑底的圓角矩形的圖層樣式就可以了。
最后,打上文字80%,收工。
看看我們的效果。
就是這么簡單,想更換顏色的話,那個(gè)條紋的圖層樣式的漸變疊加修改一下就可以了。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- P大點(diǎn)S
- ps網(wǎng)頁設(shè)計(jì)
- 教程
- 進(jìn)度條
- 網(wǎng)頁圖片
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 設(shè)計(jì)知識,新手詳情頁制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 圓角教程,教你制作網(wǎng)頁常用的圓角矩形邊角
- 圖標(biāo)設(shè)計(jì),ps設(shè)計(jì)六邊形圖標(biāo)實(shí)例
推薦教程
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- 陰影效果,教你制作各類陰影教程
- banner教程,用ps制作960*90的廣告圖片
- 用ps制作豎列導(dǎo)航
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- Photoshop制作網(wǎng)頁搜索條
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop制作網(wǎng)站導(dǎo)航圖