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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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