CSS网页制作布局实例教程

CSS混沌初开III:顶部图片视觉修饰
这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图：

在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人很钟意这个组合。在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精致。
顶部图片的视觉处理
在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。在用到的花卉图像素材中，大家可以发现它上面也有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中使用的色调一样：

首先来看一下图片中花朵的颜色，它的色调偏向于大红，还是使用PS中的色相/饱和度命令来对它进行调整。利用快捷键按Ctrl U调出色相/饱和度面板，在“编辑”项的下拉列表中选择“红色（Ctrl 1）”，这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是-30左右：

下一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接下来的滤镜处理作一些预处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响：

在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在1600 1200的原始大小下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤镜（滤镜菜单—艺术效果），效果如下图。在PS中，滤镜的运用是很有趣的一件事情，调节其中的参数就可以达到很多意想不到的效果，加之在CS版本中提供了可用滤镜效果的缩略图预览，让这个实用的工具用起来更加方便：

接着我们添加一些波浪线条来营造虚幻的意境，可以用笔刷或者钢笔绘制一些曲线，当然也可以用渐变工具制作，只要达到下图中渐隐效果即可。事实上我们只需要做出其中一条就可以了，然后复制图层调整其透明度、角度、扭曲制作出其它的线条。这里使用的颜色还是推荐使用粉红，为了区别于花朵的颜色，可以把线条的粉红明度调大一点。在图片的右边，我利用Tamuz字体添加了一个修饰符号，效果如下：

如果对以上操作有疑问，可以 下载QuickTime演示影片 观看！
在图片上添加BLOG标题
Blog的标题反映了你网站的内容主题，其文字组织因人而异，一般还会加上一个图标或LOGO，毕竟每个人都想自己的Blog与众不同，有一些标志性的元素，在这里我就简单的选用一个仙人掌标志：

下面是一些关于字体或修饰符号的资源链接： Minion修饰符和Tamuz字体 Adobe提供的修饰性字体 一系列免费的Dingbats字体
最终的界面设计效果
至今为止，不论是在导航按钮还是顶部图片的制作，我们都还没有遇到什么棘手的难题。现在让我们把做出来的素材整合在一起，拼合成一张 最终的界面效果 。这已经是界面设计的最后一个阶段了，所有若还有什么可添加的修饰元素，最好都在界面效果图中体现出来。在我的示例页面中，文章标题和友情链接的前面我都用精致的图标进行修饰，效果看起来还可以，当然你们可以选择自己喜欢的素材替换，最好也能在设计过程中体会到乐趣！

最新评论