多管齊下 打造賞心悅目博客頁眉
來源:不詳
作者:佚名
學(xué)習(xí):293人次
多管齊下 打造賞心悅目博客頁眉作者:Yuyao Huang 日期:2006-11-7 11:14:17 來源:pconline
現(xiàn)在寫博客的朋友越來越多了,如果你厭倦了千篇一律的網(wǎng)頁模版,想擁有一個(gè)更為自己量身定制的博客,那就和筆者一起動(dòng)手,來制作一個(gè)屬于自己的網(wǎng)頁頁眉(header)吧。本文將從設(shè)計(jì)理念和手法技巧方面告訴您如何讓自己的博客(或網(wǎng)頁)頁眉看起來更令人賞心悅目。
Header是一個(gè)簡(jiǎn)單網(wǎng)頁最重要的視覺元素。對(duì)于許多博客來說,header可能是唯一的視覺元素。所以他必須承擔(dān)許多功能,首先一個(gè)header是對(duì)你的網(wǎng)站及網(wǎng)站風(fēng)格的定義,它必須讓人在匆匆一瞥網(wǎng)頁的時(shí)候就能知道網(wǎng)站的類型以及其要表達(dá)的態(tài)度是什么,同時(shí)header還必須有簡(jiǎn)潔明了的導(dǎo)航功能。所有這些可以輕松的用三個(gè)部分(每個(gè)部分都具有各自的功能)來構(gòu)建,并將他們通過相同的元素整合起來。接下去就是要將如何將這些放在一起成為一個(gè)整體。
1. 從劃分空間開始
一個(gè)網(wǎng)頁頁面的header橫跨整個(gè)頁面,我們將其分為三個(gè)部分:網(wǎng)站名稱,圖片,導(dǎo)航條。對(duì)他們分別進(jìn)行設(shè)計(jì)。
一張好看的圖片是一個(gè)好看的header的關(guān)鍵,尋找一張可以在橫向的區(qū)域里表達(dá)訊息的圖片。值得驚喜的是你會(huì)發(fā)現(xiàn)這是很容易做到的。
用吸管提取圖片中的主要色彩,并且從暗到亮進(jìn)行排列,然后選用一種顏色分別對(duì)區(qū)域進(jìn)行上色,注意區(qū)域間的對(duì)比度。
如果你可以有很多字體選擇,那就找一種和圖片相配的字體:喧鬧的圖片配安靜的字體; 經(jīng)典的圖片用經(jīng)典的字體;平淡的圖片用富于表現(xiàn)的字體。
小貼士:互換名稱區(qū)域與導(dǎo)航條區(qū)域的顏色作為其字體的顏色,是最安全的做法,這會(huì)讓你的網(wǎng)站看上去統(tǒng)一,當(dāng)然如果你是用色高手,也可以選用其他顏色。
讓字體設(shè)置變得簡(jiǎn)單:
A. 一個(gè)很長(zhǎng)的名字必須被分成兩行甚至更多,并且上下排的字體沒有沖撞。
B. 避免娛樂性強(qiáng)但缺乏感覺的字體。
C. 避免貌似不錯(cuò)但不相容的字體。
簡(jiǎn)單的,我們教你,深?yuàn)W的,你來分享
現(xiàn)在寫博客的朋友越來越多了,如果你厭倦了千篇一律的網(wǎng)頁模版,想擁有一個(gè)更為自己量身定制的博客,那就和筆者一起動(dòng)手,來制作一個(gè)屬于自己的網(wǎng)頁頁眉(header)吧。本文將從設(shè)計(jì)理念和手法技巧方面告訴您如何讓自己的博客(或網(wǎng)頁)頁眉看起來更令人賞心悅目。
Header是一個(gè)簡(jiǎn)單網(wǎng)頁最重要的視覺元素。對(duì)于許多博客來說,header可能是唯一的視覺元素。所以他必須承擔(dān)許多功能,首先一個(gè)header是對(duì)你的網(wǎng)站及網(wǎng)站風(fēng)格的定義,它必須讓人在匆匆一瞥網(wǎng)頁的時(shí)候就能知道網(wǎng)站的類型以及其要表達(dá)的態(tài)度是什么,同時(shí)header還必須有簡(jiǎn)潔明了的導(dǎo)航功能。所有這些可以輕松的用三個(gè)部分(每個(gè)部分都具有各自的功能)來構(gòu)建,并將他們通過相同的元素整合起來。接下去就是要將如何將這些放在一起成為一個(gè)整體。
1. 從劃分空間開始
一個(gè)網(wǎng)頁頁面的header橫跨整個(gè)頁面,我們將其分為三個(gè)部分:網(wǎng)站名稱,圖片,導(dǎo)航條。對(duì)他們分別進(jìn)行設(shè)計(jì)。
做多大的?(名稱與圖片的比例)
按照慣例,名稱通常被放在左上角,這符合我們的閱讀習(xí)慣,圖片方在右邊。相對(duì)名稱的比例比較小,但并非絕對(duì),也取決于名稱的長(zhǎng)短,不能一概而論。但最好不要平分名稱和圖片的區(qū)域,因?yàn)檫@會(huì)使人的視覺沒有落腳點(diǎn),無法突出重點(diǎn)。用不對(duì)稱的比例會(huì)是比較明智的做法。
2.尋找一張合適的圖片一張好看的圖片是一個(gè)好看的header的關(guān)鍵,尋找一張可以在橫向的區(qū)域里表達(dá)訊息的圖片。值得驚喜的是你會(huì)發(fā)現(xiàn)這是很容易做到的。
用吸管提取圖片中的主要色彩,并且從暗到亮進(jìn)行排列,然后選用一種顏色分別對(duì)區(qū)域進(jìn)行上色,注意區(qū)域間的對(duì)比度。
對(duì)比度越高力量越強(qiáng)
一個(gè)普通的色板就可以整合這三個(gè)部分。因?yàn)轭伾即嬖谟趫D片中,所以通常情況下不管你如何混合搭配,這三個(gè)區(qū)域都可以很好的協(xié)調(diào)工作。區(qū)域間色調(diào)對(duì)比越強(qiáng)烈,力量強(qiáng)(張力,視覺沖擊力);相反色調(diào)對(duì)比越弱,網(wǎng)站就會(huì)看上去更平和,但也很容易讓人記不住。
如果你可以有很多字體選擇,那就找一種和圖片相配的字體:喧鬧的圖片配安靜的字體; 經(jīng)典的圖片用經(jīng)典的字體;平淡的圖片用富于表現(xiàn)的字體。
小貼士:互換名稱區(qū)域與導(dǎo)航條區(qū)域的顏色作為其字體的顏色,是最安全的做法,這會(huì)讓你的網(wǎng)站看上去統(tǒng)一,當(dāng)然如果你是用色高手,也可以選用其他顏色。
讓字體設(shè)置變得簡(jiǎn)單:
A. 一個(gè)很長(zhǎng)的名字必須被分成兩行甚至更多,并且上下排的字體沒有沖撞。
B. 避免娛樂性強(qiáng)但缺乏感覺的字體。
C. 避免貌似不錯(cuò)但不相容的字體。
簡(jiǎn)單的,我們教你,深?yuàn)W的,你來分享
學(xué)習(xí) · 提示
相關(guān)教程
- banner教程,設(shè)計(jì)一個(gè)簡(jiǎn)單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
- 廣告圖片,用ps合成技術(shù)設(shè)計(jì)一個(gè)化妝品商品的背景圖
- 網(wǎng)頁設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
- ps設(shè)計(jì)游戲網(wǎng)頁頭版教程
推薦教程
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop制作網(wǎng)站導(dǎo)航圖
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop制作網(wǎng)頁搜索條
- 陰影效果,教你制作各類陰影教程
- banner教程,用ps制作960*90的廣告圖片
- 用ps制作豎列導(dǎo)航
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
關(guān)注大神微博加入>>
網(wǎng)友求助,請(qǐng)回答!