Photoshop網頁設計:雜志風格網站界面(3)

雜志風格也就是我們平時看到的報紙或雜志，主要特點是排版干凈簡潔，主要以區(qū)塊對內容進行風格，這種風格應用到網站中后，也能制作出簡潔大方的網站，而且這種制作方法主要在排版，無需多余效果。

本文推薦的這款雜志風格網站界面也是秉承了其特點，沒有多余修飾，只是用虛線來分割排版，很適合一些博客網站借鑒

開始制作過程，首先我們要做的是設置好網格，因為主要步驟都是通過排版實現，在PS中建立一個寬1680px,高1100px的背景，隨后左右各留出360px的空白區(qū)域，這樣中間部分寬度就是960px。這是目前網站最流行的寬度設置
 

之后我們將網站界面左右空白部分用灰色填充，留出中間的雜志網站容器區(qū)域，這樣看起來更明顯
 

我們將網站標志放在正中央，標志很簡單，都是字母組成，使用comfortaa字體,中間文字使用綠色
 

添加導航菜單，還是只需要使用文字就行，導航文字顏色分別為#7b7c7c與#92a801
 

在導航菜單下面加上一段文字，我們想用其作為滾動新聞，在文字最后還可以加上兩個小箭頭，以后方便利用JS代碼來對文字內容進行翻頁瀏覽
 

然后在后面加上社會化標簽與RSS，對于以內容為主的博客或雜志網站來說，社會化標簽是很重要的，幾乎每個此類網站都會使用，我們也不例外
 

接著用虛線進行區(qū)域分割，我們網站所有的布局區(qū)域都是統(tǒng)一用虛線分割
 

隨后利用PS中的網格線來將網站界面劃分成三欄，大小如下圖標識
 

左側欄是主要內容區(qū)域，以圖文形式排列
 

為了區(qū)分突出每個標題與內容的獨立性，每個圖文區(qū)塊都使用灰色背景進行區(qū)分，這樣視覺上更出色，標題顏色也使用統(tǒng)一的綠色
 

之后為了讓讀者獲得更好視覺體驗，我們?yōu)槊總�標題右側添加一個小圖標，以表示這是一篇文章的標題，讓其更醒目
 

中間欄內容以文字標題與內容介紹為主，標題顏色依然用綠色，這欄放的內容主要是推薦文章或并非最重要的內容
 

右側欄主要放廣告或其他你想要放的內容，這里我們選放上一些圖標菜單，可以連接到對應的欄目與內容中
 

我們將用藍色與綠色相間的小圖標進行裝飾，看上去效果不錯
 

目前來看我們的網站布局如下
 

當然網站還有很多空白處，我們要讓其感覺比較飽滿，在左側主要內容欄下加上兩分欄的標題內容
 

在右側欄菜單下加上藍色背景的圖文內容，使用一些淡色系的背景色與圖文排列是很常用的一種網頁設計技巧
 

繼續(xù)加入內容，這里我們要遵循一個原則，盡量將不同區(qū)塊內容在橫向上都平行，這樣網站看上去的效果會很舒服，比如下圖中我們加入的一塊廣告區(qū)域就與左側欄內容頂部平行
 

當然并非所有都要遵循平行原則，但主要區(qū)域還是做得整齊一點較好，這樣避免視覺上的無謂干擾
 

最后我們再用虛線來分割三分欄內容，一般來說如果用虛線分割會增加網站視覺上的干擾系數，所以虛線左右空白部分最好都留有10px以上的區(qū)域，這樣可以減少虛線產生的視覺干擾，同時又能讓網站看上去整齊豐富
 

[url]www.tutu001.com[/url]最后完成效果如下