本文制作的網站很有設計感，作為藝術與設計類網站來說，傳統的用戶體驗與網站內容可能并不是首要考慮的內容，而更多得要讓整個網站在視覺上跟人以吸引力

先看看效果圖：

我們使用950 x 1130px作為網頁設計文件尺寸，背景為黑色，用圓角矩形制作白色圖形，半徑設置為15px

如下圖我們完成的形狀是用于網站的頭部，放LOGO與導航文字的地方

現在為其添加圖層樣式

完成后的頭部形狀樣式如下

加入網站的域名文字與導航按鈕文字

我們只在右邊加入三個導航文字，為了使它們看上去不單調，我們為每個導航文字前添加發光小圖標，先制作一個3px的長線，隨后為其添加下面樣式，完成后復制三次

完成后如圖

用選區工具繪制選區

隨后新建圖層，填充白色，并設置不透明度為2%

在頭部區塊下再制作一個白色圓角矩形作為主要內容的導航文字區域

添加樣式

完成如圖

選中其中一半區域

新建圖層，并在選區中填充白色，設置不透明度為5%,加入導航按鈕文字，文字之間的線條是用兩條1px的直線，一深一淺，這樣看上去就有了凹槽效果，這在websbook.com之前的網站設計教程中多次出現，這里不再詳細說明

我們為導航按鈕制作一個鼠標滑過效果，先用橢圓在新圖層上制作白色圓圈

用"濾鏡> 模糊>高斯模糊"，設置參數為6～8，完成后裁剪掉導航部分，將剩余圓圈設置不透明度到23%

在導航圖層下新建一個圖層，使用圓角矩形制作如下虛線形狀

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

上面的邊線漸變可根據下圖，完成后能出來如下圖樣子即可

配合網站本身的黑藍色色調使用對應的素材圖片，加入歡迎文字，藝術網站使用的圖片可以隨意行，本文我們只是為了迎合整個網站的色調風格選擇對應的圖片

上圖中右下角的按鈕樣式如下

用同樣的方法為網頁制作區塊

使用頂部效果文字與發光圖標

上面幾個區塊中第一個區塊我們將用來放圖片。所以我們為這個區塊中在劃出有個圓角矩形，并為其添加樣式

看到效果如下圖

將事先準備好的圖片放入其中，并使用黑色做橫條來放說明文字，黑色橫條不透明度設置為40%

另外一個區塊加入文字新聞等標題

為最后一個區塊加入圓角矩形，這里我們放入一張張小圖片

請注意我們整個網站的風格是圓角，所以圖片也盡量使用圓角來使整個網站風格統一

為了更有設計感，我們將圖片兩邊各弄出兩個圓曹

然后再其上加入兩個箭頭，此時之后可以用flash來替換

完成后最后來整體看下我們的設計網站