直击商信(SANSON)网站首页创意、设计全过程
来源：视觉中国    作者：艺术设计    发布时间：2004-12-31
写这篇文章之前，我的确是又激动又紧张。激动是终于能在视觉展示一番，紧张的是以前比竟很少写这些东西，看来这次是非写不可了，那就动手吧（卷起衣袖，挽起裤脚，半蹲于电脑椅上，这时邻位送来二包烟，鼓励我大干一场，鼓励话语略去15230字）。

节目现在开始>>>

>>>作品使用软件：Photoshop5.0, Dreamweaver3.0, Fireworks3.0 （说明一下：我这人有一习惯，用惯了一个软件就不怎么喜欢换，这不MX都出来了，但偏偏俺就不用，嘿嘿有人郁闷了……）

>>>具体制作过程

1、整体构思；至关重要的一步，为了能迎合大众的审美意识，决定在版式上不做太大的创新，建议初学WEB DESIGN的先在稿纸上画草图（强调：构思的好坏直接影响最后WEB效果，望好好斟酌。）具体构思内容略去。

2、具体制作；俗话说胸有成竹才能成功，上一步都OK了，制作起来也就不麻烦了。

>>>启动PS，新建图象起名“sunson”大小 775*565

>>>在我的页面构思中需要用到一张图，当然我个人认为最能表达主题的是人物图象了，立刻寻找，好在公司资料不少，很快找到。按画面大小缩放拉到“sunson”画面中。适当运用渐变和羽化效果，使图象融合到画面中。

>>>图片处理；我选择了仿“马赛克”效果， 新建一个图层，画N条横竖间距相等的线条（线条一个相素宽度），怕麻烦的朋友可以用定义图案的方法来实现此效果。 接着移动线条图层到人物图片的适当位置，选中线条图层，将选区移到人物图层上，剪切，再张贴图层，这时处理后的效果图为：
12260>

>>>为了整体画面具有连贯性，又做了二条色带贯穿整个画面，色带颜色选用灰色，于整个画面色调保持一致，表现手法采用了PS中自带的图片处理滤镜[其他>添加杂色 -选单色、平均分布 数量32] 模式为“正片叠底”再适当运用渐变效果，使图片与人物画面融合。

>>> 再在人物画面中对不同单元格进行修饰（可调节单元格内图象的明度，对比度等）最后效果为：
12261>

>>>接着，按照整体画面的色调和风格，加入文字介绍和相关图片导航（此作品中文字运用了网页上常用的04号字体，个人认为在此幅作品上运用的很恰当）效果为：
12262>

>>>现在综观整个页面发现很灰，没有亮点，在来，新建图层，填充为深蓝色，大小适当，选择好位置后设置图层模式为“颜色加深”，重复以上步奏，填充颜色改为黑色，模式也为“颜色加深”，适当调节这些新建图层的透明度，运用渐变使他们与底图融合，最终效果为：
12263>

>>>PS制作过程基本结束了，现在可以导入到FW中切图，最后导入DW中编辑.。

>>>美化作品；一个好的网站要适合不同的分辨率，目前网络上常用的分辨率为800*600和1024*768，现在就要考虑如何处理此幅作品了

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

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

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

在800*600下：
12267>

在1024*768下：
12266>

>>>制作基本结束；作成WEB后发现缺少点动感，决定引用一个透明的FLASH做为修饰，使整个页面由静变动，更加活跃。
在页面中插入一个FLASH并选中它，调出属性面板，点选“Parameters”设Parameters的对应值为wmode；设Value的对应值为transparnet 点OK 既可。
12268>

我们是不是要看看它的实际效果呢？点击这里。

>>>到此为止，整个设计&制作过程结束，谢谢大家的收看，谢谢~！！

本篇编辑：东方视觉
发表评论 | 查看所有评论
用户名: 
验证码: