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值,大家在利用这种方法配色的时候也可以参考那些文章教程。如果你看了上面的讲解之后仍然不知道如何着手,这段关于颜色的影片或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片,不仅因为它本身设计得相当有趣,更重要的是对于认识和了解大众化的色彩体验和感...