直击商信(SANSON)首页创意设计全过程 |
| 作者:上官一博 来源:视觉中国 更新:2005-3-20 20:00:33 错误报告 我要投稿 |
编者:商信(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中编辑。
美化作品。
一个好的网站要适合不同的屏幕分辨率,目前网络上常用的分辨率为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 既可。
到此为止,整个设计&制作过程结束。
|
|
| 文章录入:skyuu 责任编辑:skyuu |
|
| 【字体:小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |