|
这是一个教你如何一步一步学习建立基于Css制作网站的开始，这个教程将由几个部分组成。第一部分是讲述如何在Photoshop中制作导航按扭的；第二部分将讲述背景的制作，再下一个是讲述标题(header)和页面的设计规划的，在最后是CSS和XHtml的应用的执行。
现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始，呵呵，其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的，但是即然这个想法开始了，为什么不做一个全面的讲解呢！
建立一个像玻璃面一样的导航按扭
在photoshop里新建一个RGB模式的文件，大小为178x122像素，背景色为白色，然后新建一个图层（起名为“button”），然后填充这个图层用灰色（#ececec），再建一个新的图层（起名为“highlight”），并画一个一个像素的白的加亮的线分别在左边上上边（用铅笔工具，1个像素的笔头）。用“减淡工具”（大小为20像素的笔刷，透明度为50%）将左侧的白线条减淡一些形成上下渐变的效果。
新建一个图层（起名为“bullet”），画一堆像素小点用铅笔工具（1px,#727272）,当然你也可以按照自己的意愿来选择颜色和大小。
用钢笔工具画一个类似于玻璃斜面效果的曲线路径（颜色为#d6d6d6）。
好了，你已经做好了自己的按扭，没有什么难度吧？
建立鼠标经过时效果
建立鼠标经过时要显示的图像效果最简便的方法便是复制我们的图层，然后改变它的颜色。现在，你需要到每一个图层去它们的颜色来建立这个鼠标经过时的图像的效果，这是我在这个例子里用到的颜色设置：
按扭的背景层：#bfe3ff
曲线斜面层：#a5d1f3
小像素点层：#e4001b
下载这个教程中用到的photoShop源文件！
了解这个系列教程的这些基本的知识是必需的！
今天我将带大家一起开始关于我们的基于CSS的网页制作的第二部分，这一部分是讲述关于改变一个适当的颜色配置的和为我们的网页制作一个漂亮的背景图案的，在第一部分我们落下了这个，所以在这儿补上。
就像大家所知道的，我的最初的意图是给你们讲述一个小的如何用简单的方法制作漂亮的立体按扭的教程，，所以这个教程的第一部分可能对你来说有点儿单一，以下我们将讲述关于色彩方案的设计在这个教程的第二部分，这实际上来讲是我们的第一步，按扭的创建，背景的制作等。
选择你的色彩方案
无论如何，你都可能有一个领先，选择恰当的颜色配置是至关重要，它反映了你是谁，你喜欢什么等！
实际上，解释给你，你选择什么或许不是至关重要的，尽管我总是努力遵循以下几个小的提示：
1、使用至少一种能对比突现出来的颜色来用于强调在你的页面上，用它来做文本链接的颜色将是很显眼的，可见性就比较好。
2、务必不要用太多的不同的颜色，否则你将以一个没有重点的混乱设计而告终。我最多只用3种颜色，两种相差不多的和一种高亮的。
3、从这两种相差不多的当中，来通过明暗的变化而调节，如果你只用了不到3种颜色，那可能会看上去有一些单调的，尽管你也用了足够多的明暗变化。以下几种配色方案可能对你实际工作有所帮助：
在photoshop中使用色彩饱和度的调节来观看你所选择的颜色的变化，你会发现，实际上上面的这些例子的颜色都是通过这个方法得到的
以下我们再讲一下画像素图案
现在是教大家画像素图案的时间！在photoShop中新建一个文件，大小为30x30像素，色彩模式为RGB，背景色可以是你想要的任意颜色，用铅笔工具画一些像素点，这是一些你可以开始时照着做的例子：
花大量的时间来制作这些像素图案，实际上是一种通过不同的方法的尝试，任何我们所不知道的技巧只有通过亲自尝试自己的想法才会成为技巧。我所做的大多数网页都是先开始于背景图案的制作，选择一个接近于背景色的颜色，然后来画些像素点。如果我建立的背景图案是一些线，我可以在photoshop中把那个包含一条线的图层复制一份新的出来，然后向左或右或上下移动一点儿。或者再改变一下透明度和层选项等。
上一篇:CSS:letter-spacing
下一篇:CSS样式表中SPAN和DIV的区别
|
精品推荐