网页效果图设计流程.docVIP

网站项目开发分为：网站策划、人员组织、页面设计制作、动态编程、测试发布、宣传与维护、项目总结几个阶段。当项目确定后，需要有一个整体的开发目标，然后设计网站的关键页面，动态网站还需要动态编程。当站点所以内容完成并且测试通过后，就可以在网上发布了。但工作还远没有完，宣传和维护工作任重而道远。往往经过一段时间之后，网站还需要重新进行开发，因此是一个循环往复的过程。 网页效果图设计是网站项目开发中非常重要的一环，是通过技术手段来设计网页的视觉效果。效果图的好坏，直接影响到整个网站的质量。通过设计网页效果图，网页设计师可以把对网站的理解通过图像的方式表现出来，然后让客户直观地进行审核，客户也可以通过对效果图的审核，提出自己的意见和建议，让设计师进行修改。最终实现一个能够让双方都满意的设计效果。 在学习具体的技术细节之前，了解网页效果图的设计流程是十分重要的。这部分内容理论性比较强，但要想做真正的网站项目开发就必须要去了解，这样才能在以后的学习中做到心中有数。 一、网页效果图设计流程概述 首先要进行网站策划；然后由客户提交相关的图文资料，网页设计师根据策划的内容和手机的素材进行效果图设计；然后提交客户审核，审核不通过需要修改，直到审核通过为止。 在网页效果图的设计阶段，应按照绘制结构草图，在Fireworks中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片刀Dreamweaver的顺序来依次进行。下面将会介绍网页效果图设计中各个流程的作用。 在图像软件中设计网页效果图，总体可以分为7个步骤：（1）、创建画布，添加辅助线来布局；（2）、绘制结构底图；（3）、添加内容，包括图像和文字；（4）、切片；（5）、优化；（6）、导出；（7）、布局。 创建辅助线 在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在Fireworks的画布中添加辅助线，这样做的目的是为了明确页面布局形式和面积。 需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是一部分内容创建一部分否则辅助线过多会使页面混乱。 绘制结构底图 根据创建好的辅助线，使用Fireworks的工具或者是矩形选取框工具，把网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。 这里的“矩形块‘只是一个统称，可以使任意的形状。除了得到形状以外，还可以直接对这些”矩形块“配色，或添加纹理、滤镜，从而在整体上对页面的配色方案进行控制。 添加内容 结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，包括文字和图像，从而完成最终的效果图方案。 添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效果。 切片 效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为IE浏览器是多线程的，同一时间可以下载3幅图像。 切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不知道该如何对效果图进行切片，这是因为对布局技术不了解。同一个网页效果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是”标准”的，所以要想灵活运用切片，必须熟悉流行的布局技术。 在对效果图进行切片时应注意以下事项： 、切片一定要和所切内容保持同样的尺寸，不能大也不能小； 、切片不能重叠； 、淡色区域不需要切片，因为可以写代码生成同样的效果。也就是说，凡是写代码能生成效果的地方都不需要切片； 、重复性的图像只需要切一张即可； 、多个素材重叠的时候，需要先后进行切片。例如背景图像上有按钮，就需要先切片按钮，然后把按钮隐藏，再切片背景图像。 、如果突破非常复杂，无法布局，那么最简单的解决方法就是切片成一张大图像即可。 网站策划 网站策划可以说是整个网站建设的前提，网站策划中包括网站用户需求分析，网站信息组织、网站导航设计、网站功能需求分析以及网站推广方案等一系列内容。通过网站策划，可以确定的因素包括：网站的类型、网站导航的规划、网站的整个风格（CI要素）、网站的功能和网页布局。而这些因素都是可以直接在网页效果图中体现出来的。 收集客户资料 2、分析网站类型 根据前期收集的资料以及和客户进行沟通，确定网站的内容、类型和功能。比如现在有个体育用品公司，客户希望通过网站对公司形象和公司产品进行全方位的展示，但是并不涉及到电子商务的功能，所以网站类型可以定义为资讯类网站。 根据资讯类网站的特点和网站本身的定位，通过Google和百度搜索通类型的页面以作设计上的参考。 3、确定网站风格 网站风格要通过网站的内容和功能来确定。 网站策划 提交资