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