编者："是这次首届“蓝讯杯”网页设计大赛的一等奖作品，我们特地请作者给我们聊聊这个页面的创意和设计过程，希望对大家有所启示。

　　作品使用软件：

　　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中编辑。

　　美化作品。

　　一个好的网站要适合不同的屏幕分辨率，目前网络上常用的分辨率为800*600和1024*768，现在就要考虑如何处理此幅作品以适应部通的屏幕分辨率。

　　其实这在设计过程中首先就要考虑到，大家都知道要想在不同分辨率下都满屏浏览就需要把表格设置为100%，但如果图片很多的页面就很难处理了，他需要找到图片的“可循环点”就拿这幅作品来说，他可以大致分为以下几个部分：

　　 其中“C”部分就为此幅作品的可循环点，在表格设置为100%后，我们就可以裁切“C”作为表格背景填充表格，导入到DW中的截面图为：

　　这时的“C”部分就具有弹性了，不论是在800*600还是在1024*768分辨率下，其实发生变化的仅仅是她的大小。(见下面实际截图)

在800*600下：

在1024*768下：

　　制作基本结束；作成WEB后发现缺少点动感，决定引用一个透明的Flash做为修饰，使整个页面由静变动，更加活跃。

　　在页面中插入一个Flash并选中它，调出属性面板，点选“Parameters”设Parameters的对应值为wmode；设Value的对应值为transparnet 点OK 既可。

　　到此为止，整个设计&制作过程结束。