水晶效果的網站界面十分常見，也是許多網頁設計師必學的設計手法之一。以下我們就來回顧下這種簡單實用的設計方法，對于初級網頁設計師可能會有很好的啟發作用

　　最終效果圖:

　　新建一個800*900，背景為#1e1e1e的文件。選擇圓角矩形工具，在頂部拖出一個高約30px的黑色矩形框。并添加以下樣式：

　　現在黑色圓角矩形條應該有點vista的意思了吧，選擇自定義形狀，添加網站首頁圖標，和站點地圖圖標。

|||

　　打開一張vista風格的壁紙，這里用vistagrass壁紙，(點著下載)，調整、裁剪大小。

　　下面制作高光區，用鋼筆工具做出下面選取：

　　填充白色，并添加圖層模板，梯度漸變。

　　添加網站標題和口號

　　復制第一步里面的黑色矩形框，去掉內陰影效果，移動到綠色草地下面作為導航欄。并添加導航文字。

　　下面制作，下面的內容板塊。同樣用圓角矩形工具，做出一個大小適當的，標題欄。添加如下樣式：

　　標題欄做好后，仍然是圓角矩型工具，在下面添加內容框。

　　最終得到頁面：