Photoshop教程:設計藝術類網站設計過程

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

先看看效果圖：

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

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

現在為其添加圖層樣式

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

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

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

完成后如圖

用選區(qū)工具繪制選區(qū)

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

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

添加樣式

完成如圖

選中其中一半區(qū)域

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

我們?yōu)閷Ш桨粹o制作一個鼠標滑過效果，先用橢圓在新圖層上制作白色圓圈

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

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

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

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

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

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

用同樣的方法為網頁制作區(qū)塊

使用頂部效果文字與發(fā)光圖標

上面幾個區(qū)塊中第一個區(qū)塊我們將用來放圖片。所以我們?yōu)檫@個區(qū)塊中在劃出有個圓角矩形，并為其添加樣式

看到效果如下圖

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

另外一個區(qū)塊加入文字新聞等標題

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

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

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

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

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