多管齐下 打造赏心悦目博客页眉 (1)

有点傻

　　现在写博客的朋友越来越多了，如果你厌倦了千篇一律的网页模版，想拥有一个更为自己量身定制的博客，那就和笔者一起动手，来制作一个属于自己的网页页眉（header）吧。本文将从设计理念和手法技巧方面告诉您如何让自己的博客（或网页）页眉看起来更令人赏心悦目。 　　Header是一个简单网页最重要的视觉元素。对于许多博客来说，header可能是唯一的视觉元素。所以他必须承担许多功能，首先一个header是对你的网站及网站风格的定义，它必须让人在匆匆一瞥网页的时候就能知道网站的类型以及其要表达的态度是什么，同时header还必须有简洁明了的导航功能。所有这些可以轻松的用三个部分（每个部分都具有各自的功能）来构建，并将他们通过相同的元素整合起来。接下去就是要将如何将这些放在一起成为一个整体。 　　1. 从划分空间开始 　　 一个网页页面的header横跨整个页面，我们将其分为三个部分：网站名称，图片，导航条。对他们分别进行设计。

登录/注册后可看大图

　　做多大的？（名称与图片的比例） 　　按照惯例，名称通常被放在左上角，这符合我们的阅读习惯，图片方在右边。相对名称的比例比较小，但并非绝对，也取决于名称的长短，不能一概而论。但最好不要平分名称和图片的区域，因为这会使人的视觉没有落脚点，无法突出重点。用不对称的比例会是比较明智的做法。

登录/注册后可看大图

　　现在写博客的朋友越来越多了，如果你厌倦了千篇一律的网页模版，想拥有一个更为自己量身定制的博客，那就和笔者一起动手，来制作一个属于自己的网页页眉（header）吧。本文将从设计理念和手法技巧方面告诉您如何让自己的博客（或网页）页眉看起来更令人赏心悦目。 　　Header是一个简单网页最重要的视觉元素。对于许多博客来说，header可能是唯一的视觉元素。所以他必须承担许多功能，首先一个header是对你的网站及网站风格的定义，它必须让人在匆匆一瞥网页的时候就能知道网站的类型以及其要表达的态度是什么，同时header还必须有简洁明了的导航功能。所有这些可以轻松的用三个部分（每个部分都具有各自的功能）来构建，并将他们通过相同的元素整合起来。接下去就是要将如何将这些放在一起成为一个整体。 　　1. 从划分空间开始 　　 一个网页页面的header横跨整个页面，我们将其分为三个部分：网站名称，图片，导航条。对他们分别进行设计。

登录/注册后可看大图

　　做多大的？（名称与图片的比例） 　　按照惯例，名称通常被放在左上角，这符合我们的阅读习惯，图片方在右边。相对名称的比例比较小，但并非绝对，也取决于名称的长短，不能一概而论。但最好不要平分名称和图片的区域，因为这会使人的视觉没有落脚点，无法突出重点。用不对称的比例会是比较明智的做法。

登录/注册后可看大图

　　2.寻找一张合适的图片 　　一张好看的图片是一个好看的header的关键，寻找一张可以在横向的区域里表达讯息的图片。值得惊喜的是你会发现这是很容易做到的。

登录/注册后可看大图

　　3.为三个区域着色 　　用吸管提取图片中的主要色彩，并且从暗到亮进行排列，然后选用一种颜色分别对区域进行上色，注意区域间的对比度。

登录/注册后可看大图

对比度越高力量越强 　　一个普通的色板就可以整合这三个部分。因为颜色都存在于图片中，所以通常情况下不管你如何混合搭配，这三个区域都可以很好的协调工作。区域间色调对比越强烈，力量强（张力，视觉冲击力）；相反色调对比越弱，网站就会看上去更平和，但也很容易让人记不住。

登录/注册后可看大图

　　4.设置名称及导航条 　　如果你可以有很多字体选择，那就找一种和图片相配的字体：喧闹的图片配安静的字体； 经典的图片用经典的字体；平淡的图片用富于表现的字体。

登录/注册后可看大图

　　 　　小贴士：互换名称区域与导航条区域的颜色作为其字体的颜色，是最安全的做法，这会让你的网站看上去统一，当然如果你是用色高手，也可以选用其他颜色。 　　让字体设置变得简单： 　　A． 一个很长的名字必须被分成两行甚至更多，并且上下排的字体没有冲撞。 　　B． 避免娱乐性强但缺乏感觉的字体。 　　C． 避免貌似不错但不相容的字体。

登录/注册后可看大图