CSS混沌初开I：导航菜单素材的设计现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分：第一讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合CSS和XHTML。有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：玻璃质感导航图片的制作：首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？鼠标经过导航时的翻转图片：创建翻转效果图片，我们只要简单的在原有素材基础上调整色调就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这部分教程涉及到一些Photoshop的基本知识，如果你不是很了解，建议先学习一些PS的入门基础，毕竟Adobe合并了*之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计：CSS混沌初开II:背景图案及配色本教程的第二部分主要有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。选择你的色彩体系事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见：1.使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注；2.谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色；在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力：在PS中我们可以通过在色相/饱和度（Ctrl+U）面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB值，大家在利用这种方法配色的时候也可以参考那些文章教程。如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更重要的是对于认识和了解大众化的色彩体验和感...
