本文制作的網(wǎng)站很有設(shè)計(jì)感，作為藝術(shù)與設(shè)計(jì)類網(wǎng)站來(lái)說(shuō)，傳統(tǒng)的用戶體驗(yàn)與網(wǎng)站內(nèi)容可能并不是首要考慮的內(nèi)容，而更多得要讓整個(gè)網(wǎng)站在視覺(jué)上跟人以吸引力

先看看效果圖：

我們使用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)航圖層下新建一個(gè)圖層，使用圓角矩形制作如下虛線形狀

使用如下樣式，使用放射漸變

上面的邊線漸變可根據(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)站