用PS制作一款vista經(jīng)典風(fēng)格網(wǎng)頁(yè)(3)
Vista前一陣子流行了一段時(shí)間,什么都是vista的,現(xiàn)在好像不是那么火了,炫麗的效果,還是值得我們重溫下的,
用ps制作一個(gè)vista風(fēng)格的網(wǎng)頁(yè)。
最終效果圖:
新建一個(gè)800*900,背景為#1e1e1e的文件。選擇圓角矩形工具,在頂部拖出一個(gè)高約30px的黑色矩形框。并添加以下樣式:
現(xiàn)在黑色圓角矩形條應(yīng)該有點(diǎn)vista的意思了吧,選擇自定義形狀,添加網(wǎng)站首頁(yè)圖標(biāo),和站點(diǎn)地圖圖標(biāo)。
打開(kāi)一張vista風(fēng)格的壁紙,這里用vistagrass壁紙,(點(diǎn)著下載),調(diào)整、裁剪大小。
下面制作高光區(qū),用鋼筆工具做出下面選。
填充白色,并添加圖層模板,梯度漸變。
添加網(wǎng)站標(biāo)題和口號(hào)
復(fù)制第一步里面的黑色矩形框,去掉內(nèi)陰影效果,移動(dòng)到綠色草地下面作為導(dǎo)航欄。并添加導(dǎo)航文字。
下面制作,下面的內(nèi)容板塊。同樣用圓角矩形工具,做出一個(gè)大小適當(dāng)?shù),?biāo)題欄。添加如下樣式:
標(biāo)題欄做好后,仍然是圓角矩型工具,在下面添加內(nèi)容框。
最終得到頁(yè)面:
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類(lèi)陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡(jiǎn)單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁(yè)常見(jiàn)的圖片投影效果
- 網(wǎng)頁(yè)圖片,設(shè)計(jì)一個(gè)網(wǎng)頁(yè)登陸框圖片教程
- 設(shè)計(jì)知識(shí),新手詳情頁(yè)制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂(lè)播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁(yè)面圖片
- 圓角教程,教你制作網(wǎng)頁(yè)常用的圓角矩形邊角
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
推薦教程
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop制作網(wǎng)頁(yè)搜索條
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- 用ps制作豎列導(dǎo)航
- 陰影效果,教你制作各類(lèi)陰影教程
- Photoshop制作網(wǎng)站導(dǎo)航圖
- 界面設(shè)計(jì),設(shè)計(jì)音樂(lè)播放器界面圖片
- banner教程,用ps制作960*90的廣告圖片
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框