编者:商信(SANSON)网站首页是这次首届“蓝讯杯”网页设计大赛的一等奖作品,我们特地请作者给我们聊聊这个页面的创意和设计过程,希望对大家有所启示。
作品使用软件:
Photoshop5.0,
Dreamweaver3.0,
Fireworks3.0
说明一下:我这人有一习惯,用惯了一个软件就不怎么喜欢换,这不MX都出来了,但偏偏俺就不用。
制作流程:构思、Photoshop做效果图、Fireworks切图、Dreamweaver编辑调整。
具体制作过程
1、整体构思;至关重要的一步,为了能迎合大众的审美意识,决定在版式上不做太大的创新,建议初学WEB DESIGN的先在稿纸上画草图(强调:构思的好坏直接影响最后WEB效果,望好好斟酌。)
2、具体制作;俗话说胸有成竹才能成功,上一步都OK了,制作起来也就不麻烦了。
启动PS,新建图象起名“sunson”,大小775*565 。
在我的页面构思中需要用到一张图,当然我个人认为最能表达主题的是人物图象了,立刻寻找,好在公司资料不少,很快找到。按画面大小缩放拉到“sunson”画面中。适当运用渐变和羽化效果,使图象融合到画面中。
图片处理。我选择了仿“马赛克”效果, 新建一个图层,画N条横竖间距相等的线条(线条一个相素宽度),怕麻烦的朋友可以用定义图案的方法来实现此效果。 接着移动线条图层到人物图片的适当位置,选中线条图层,将选区移到人物图层上,剪切,再张贴图层,这时处理后的效果图为:
为了整体画面具有连贯性,又做了两条色带贯穿整个画面,色带颜色选用灰色,于整个画面色调保持一致,表现手法采用了PS中自带的图片处理滤镜[其他>添加杂色 -选单色、平均分布 数量32] ,模式为“正片叠底”再适当运用渐变效果,使图片与人物画面融合。
再在人物画面中对不同单元格进行修饰(可调节单元格内图象的明度,对比度等)最后效果为:
接着,按照整体画面的色调和风格,加入文字介绍和相关图片导航(此作品中文字运用了网页上常用的04号字体,个人认为在此幅作品上运用的很恰当,完成效果为:
现在综观整个页面发现很灰,没有亮点。再新建图层,填充为深蓝色,大小适当,选择好位置后设置图层模式为“颜色加深”,重复以上步奏,填充颜色改为黑色,模式也为“颜色加深”,适当调节这些新建图层的透明度,运用渐变使他们与底图融合,最终效果为:
PS制作过程基本结束了,现在可以导入到FW中切图,最后导入DW中编辑。