Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

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

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

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

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

我們將網(wǎng)站標(biāo)志放在正中央，標(biāo)志很簡單，都是字母組成，使用comfortaa字體,中間文字使用綠色
 

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

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

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

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

隨后利用PS中的網(wǎng)格線來將網(wǎng)站界面劃分成三欄，大小如下圖標(biāo)識
 

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

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

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

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

右側(cè)欄主要放廣告或其他你想要放的內(nèi)容，這里我們選放上一些圖標(biāo)菜單，可以連接到對應(yīng)的欄目與內(nèi)容中
 

我們將用藍(lán)色與綠色相間的小圖標(biāo)進(jìn)行裝飾，看上去效果不錯
 

目前來看我們的網(wǎng)站布局如下
 

當(dāng)然網(wǎng)站還有很多空白處，我們要讓其感覺比較飽滿，在左側(cè)主要內(nèi)容欄下加上兩分欄的標(biāo)題內(nèi)容
 

在右側(cè)欄菜單下加上藍(lán)色背景的圖文內(nèi)容，使用一些淡色系的背景色與圖文排列是很常用的一種網(wǎng)頁設(shè)計技巧
 

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

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

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

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