先看看效果圖：
我們使用950 x 1130px作為網(wǎng)頁(yè)設(shè)計(jì)文件尺寸，背景為黑色，用圓角矩形制作白色圖形，半徑設(shè)置為15px
如下圖我們完成的形狀是用于網(wǎng)站的頭部，放LOGO與導(dǎo)航文字的地方
現(xiàn)在為其添加圖層樣式
完成后的頭部形狀樣式如下
加入網(wǎng)站的域名文字與導(dǎo)航按鈕文字
我們只在右邊加入三個(gè)導(dǎo)航文字，為了使它們看上去不單調(diào)，我們?yōu)槊總€(gè)導(dǎo)航文字前添加發(fā)光小圖標(biāo)，先制作一個(gè)3px的長(zhǎng)線，隨后為其添加下面樣式，完成后復(fù)制三次
完成后如圖
用選區(qū)工具繪制選區(qū)
隨后新建圖層，填充白色，并設(shè)置不透明度為2%
在頭部區(qū)塊下再制作一個(gè)白色圓角矩形作為主要內(nèi)容的導(dǎo)航文字區(qū)域
添加樣式
完成如圖
選中其中一半?yún)^(qū)域
新建圖層，并在選區(qū)中填充白色，設(shè)置不透明度為5%,加入導(dǎo)航按鈕文字，文字之間的線條是用兩條1px的直線，一深一淺，這樣看上去就有了凹槽效果，這在websbook.com之前的網(wǎng)站設(shè)計(jì)教程中多次出現(xiàn)，這里不再詳細(xì)說(shuō)明
我們?yōu)閷?dǎo)航按鈕制作一個(gè)鼠標(biāo)滑過(guò)效果，先用橢圓在新圖層上制作白色圓圈
用"濾鏡> 模糊>高斯模糊"，設(shè)置參數(shù)為6～8，完成后裁剪掉導(dǎo)航部分，將剩余圓圈設(shè)置不透明度到23%
在導(dǎo)航圖層下新
使用如下樣式，使用放射漸變
上面的邊線漸變可根據(jù)下圖，完成后能出來(lái)如下圖樣子即可
配合網(wǎng)站本身的黑藍(lán)色色調(diào)使用對(duì)應(yīng)的素材圖片，加入歡迎文字，藝術(shù)網(wǎng)站使用的圖片可以隨意行，本文我們只是為了迎合整個(gè)網(wǎng)站的色調(diào)風(fēng)格選擇對(duì)應(yīng)的圖片
上圖中右下角的按鈕樣式如下
用同樣的方法為網(wǎng)頁(yè)制作區(qū)塊
使用頂部效果文字與發(fā)光圖標(biāo)
上面幾個(gè)區(qū)塊中第一個(gè)區(qū)塊我們將用來(lái)放圖片。所以我們?yōu)檫@個(gè)區(qū)塊中在劃出有個(gè)圓角矩形，并為其添加樣式
看到效果如下圖
將事先準(zhǔn)備好的圖片放入其中，并使用黑色做橫條來(lái)放說(shuō)明文字，黑色橫條不透明度設(shè)置為40%
另外一個(gè)區(qū)塊加入文字新聞等標(biāo)題
為最后一個(gè)區(qū)塊加入圓角矩形，這里我們放入一張張小圖片
請(qǐng)注意我們整個(gè)網(wǎng)站的風(fēng)格是圓角，所以圖片也盡量使用圓角來(lái)使整個(gè)網(wǎng)站風(fēng)格統(tǒng)一
為了更有設(shè)計(jì)感，我們將圖片兩邊各弄出兩個(gè)圓曹
然后再其上加入兩個(gè)箭頭，此時(shí)之后可以用flash來(lái)替換
完成后最后來(lái)整體看下我們的設(shè)計(jì)網(wǎng)站
推薦閱讀-Photoshop分類教程
聯(lián)系客服
