网页效果图设计流程

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