日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

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

時間:2024-02-08 06:45作者:下載吧人氣:14


作者:佚名 出處:tutu001

雜志風(fēng)格也就是我們平時看到的報紙或雜志,主要特點是排版干凈簡潔,主要以區(qū)塊對內(nèi)容進行風(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è)置
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

之后我們將網(wǎng)站界面左右空白部分用灰色填充,留出中間的雜志網(wǎng)站容器區(qū)域,這樣看起來更明顯
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

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

我們將網(wǎng)站標志放在正中央,標志很簡單,都是字母組成,使用comfortaa字體,中間文字使用綠色
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

添加導(dǎo)航菜單,還是只需要使用文字就行,導(dǎo)航文字顏色分別為#7b7c7c與#92a801
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面


在導(dǎo)航菜單下面加上一段文字,我們想用其作為滾動新聞,在文字最后還可以加上兩個小箭頭,以后方便利用JS代碼來對文字內(nèi)容進行翻頁瀏覽
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

然后在后面加上社會化標簽與RSS,對于以內(nèi)容為主的博客或雜志網(wǎng)站來說,社會化標簽是很重要的,幾乎每個此類網(wǎng)站都會使用,我們也不例外
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

接著用虛線進行區(qū)域分割,我們網(wǎng)站所有的布局區(qū)域都是統(tǒng)一用虛線分割
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

隨后利用PS中的網(wǎng)格線來將網(wǎng)站界面劃分成三欄,大小如下圖標識
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

左側(cè)欄是主要內(nèi)容區(qū)域,以圖文形式排列
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

為了區(qū)分突出每個標題與內(nèi)容的獨立性,每個圖文區(qū)塊都使用灰色背景進行區(qū)分,這樣視覺上更出色,標題顏色也使用統(tǒng)一的綠色
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

之后為了讓讀者獲得更好視覺體驗,我們?yōu)槊總€標題右側(cè)添加一個小圖標,以表示這是一篇文章的標題,讓其更醒目
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

中間欄內(nèi)容以文字標題與內(nèi)容介紹為主,標題顏色依然用綠色,這欄放的內(nèi)容主要是推薦文章或并非最重要的內(nèi)容
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面


右側(cè)欄主要放廣告或其他你想要放的內(nèi)容,這里我們選放上一些圖標菜單,可以連接到對應(yīng)的欄目與內(nèi)容中
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

我們將用藍色與綠色相間的小圖標進行裝飾,看上去效果不錯
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

目前來看我們的網(wǎng)站布局如下
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

當(dāng)然網(wǎng)站還有很多空白處,我們要讓其感覺比較飽滿,在左側(cè)主要內(nèi)容欄下加上兩分欄的標題內(nèi)容
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

在右側(cè)欄菜單下加上藍色背景的圖文內(nèi)容,使用一些淡色系的背景色與圖文排列是很常用的一種網(wǎng)頁設(shè)計技巧
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

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


當(dāng)然并非所有都要遵循平行原則,但主要區(qū)域還是做得整齊一點較好,這樣避免視覺上的無謂干擾
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面

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

[url]www.tutu001.com[/url]最后完成效果如下
Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面



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

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 成人午夜久久精品 | 99精品网| 万全影院亚洲影院理论片 | 视频一区中文字幕 | 天天爱天天做天天爽天天躁 | 男女视频免费网站 | 不卡无毒免费毛片视频观看 | 精品久久久久久国产免费了 | 国产裸体美女视频全黄 | 亚洲精品中文一区不卡 | 亚洲精品日韩中文字幕久久久 | 国产成人亚洲欧美三区综合 | 久久国产一片免费观看 | 女人张开腿让男人捅视频 | 免费亚洲视频 | 成人免费福利网站在线看 | 久久国产一区二区三区 | 亚洲国产欧美日韩精品一区二区三区 | 国产精品久久久久免费a∨ 国产精品久久久久免费视频 | 久久黄色网址 | 国产成人久久久精品一区二区三区 | 特级a欧美孕妇做爰片毛片 特级a欧美做爰片毛片 | 亚洲欧美日本综合 | 亚洲国产欧美国产综合一区 | 先锋影音xfyy5566男人资源 | 欧美人成在线 | 久久精品国产99久久久 | 亚洲欧洲一区二区三区久久 | 国产在线观看网址你懂得 | 中文字幕日韩精品中文区 | 亚洲国产精品视频 | 国产一级视频在线 | 久久久久综合一本久道 | 精品欧美高清一区二区免费 | 国产在线观看免费人成小说 | 国产亚洲高清在线精品99 | 亚洲视屏在线 | 万全影院亚洲影院理论片 | 日本一区二区三区在线 视频观看免费 | 在线国产网站 | 超薄肉色丝袜精品足j福利 超级乱淫视频aⅴ播放视频 |