您的位置: 首页 > 技术文档 > 网页制作 > CSS布局实战系列:混沌初开
JavaScript创建可维护幻灯片效果 回到列表 大家都对vertical-align的各说各话
 CSS布局实战系列:混沌初开

作者:ximicc 时间: 2008-06-18 文档类型:翻译 来自:蓝色理想

第 1 页 CSS布局实战系列:混沌初开
第 2 页 导航菜单素材的设计
第 3 页 顶部图片视觉修饰
第 4 页 顶部图片视觉修饰
第 5 页 侧边栏导航菜单的实现
第 6 页 页面DIV布局解构
第 7 页 正文与图片的混排
第 8 页 页脚的构建
第 9 页 侧边栏友情链接

CSS混沌初开III:顶部图片视觉修饰

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

在制作按钮时,我用了粉红和暗绿两种色调,可能看起来有点怪,但个人很钟意这个组合。在设计网页整体界面的过程中,我会给出一些意见和建议,重点是顶部的图片,如何增加一些细节,让它看起来更加的美观、精致。

顶部图片的视觉处理

在教程的前两部分中,提到过导航按钮的颜色选择,现在我们来看一下如何处理一张花卉图像的色调,使其与页面的风格达到统一。在用到的花卉图像素材中,大家可以发现它上面也有红和绿两种色调,我要做的事情就是把其中的颜色调制成粉红和暗绿,就好似导航菜单中使用的色调一样:

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

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

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

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

如果对以上操作有疑问,可以 下载QuickTime演示影片 观看!

在图片上添加BLOG标题

Blog的标题反映了你网站的内容主题,其文字组织因人而异,一般还会加上一个图标或LOGO,毕竟每个人都想自己的Blog与众不同,有一些标志性的元素,在这里我就简单的选用一个仙人掌标志:

下面是一些关于字体或修饰符号的资源链接:

最终的界面设计效果

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

经典论坛交流
http://bbs.blueidea.com/thread-2864629-1-1.html

出处:蓝色理想
责任编辑:bluehearts

上一页 顶部图片视觉修饰 下一页 侧边栏导航菜单的实现

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
大家都对vertical-align的各说各话
详解CSS的优先权
YUI Grids CSS 解读
提高CSS代码的可读性
background-clip/origin一则运用
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:4/91个记录/页 转到 页 共9个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2