如何自己做设计效果图

网站项目开发分为：网站策划、人员组织、页面设计制作、动态编程、测试发布、宣传

与维护、项目总结几个阶段。当项目确定后，需要有一个整体的开发目标，然后设计网站的

关键页面，动态网站还需要动态编程。当站点所以内容完成并且测试通过后，就可以在网上

发布了。但工作还远没有完，宣传和维护工作任重而道远。往往经过一段时间之后，网站还

需要重新进行开发，因此是一个循环往复的过程。

网页效果图设计是网站项目开发中非常重要的一环，是通过技术手段来设计网页的视觉

效果。效果图的好坏，直接影响到整个网站的质量。通过设计网页效果图，网页设计师可以

把对网站的理解通过图像的方式表现出来，然后让客户直观地进行审核，客户也可以通过对

效果图的审核，提出自己的意见和建议，让设计师进行修改。最终实现一个能够让双方都满

意的设计效果。

在学习具体的技术细节之前，了解网页效果图的设计流程是十分重要的。这部分内容理

论性比较强，但要想做真正的网站项目开发就必须要去了解，这样才能在以后的学习中做到

心中有数。

一、网页效果图设计流程概述

首先要进行网站策划；然后由客户提交相关的图文资料，网页设计师根据策

划的内容和手机的素材进行效果图设计；然后提交客户审核，审核不通过需要修

改，直到审核通过为止。

网

站

策

提

交

资

整

体

设

客

户

审

审

核

通

绘制结构草

绘制辅助线

绘制结构底

添加内容

效果图切片

切片优化输出切片

在网页效果图的设计阶段，应按照绘制结构草图，在Fireworks中绘制辅

助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输

出切片刀Dreamweaver的顺序来依次进行。下面将会介绍网页效果图设计中

各个流程的作用。

在图像软件中设计网页效果图，总体可以分为7个步骤：（1）、创建画布，

添加辅助线来布局；（2）、绘制结构底图；（3）、添加内容，包括图像和文字；

（4）、切片；（5）、优化；（6）、导出；（7）、布局。

1、创建辅助线

在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下

来的网页布局草图，在Fireworks的画布中添加辅助线，这样做的目的是为

了明确页面布局形式和面积。

需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够

全部创建好的，而是一部分内容创建一部分否则辅助线过多会使页面混乱。

2、绘制结构底图

根据创建好的辅助线，使用Fireworks的工具或者是矩形选取框工具，把

网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效

果。

这里的“矩形块‘只是一个统称，可以使任意的形状。除了得到形状以外，还可以

直接对这些”矩形块“配色，或添加纹理、滤镜，从而在整体上对页面的配色方案进行

控制。

3、添加内容

结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，

包括文字和图像，从而完成最终的效果图方案。

添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处

理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效

果。

4、切片

效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片

工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样

做目的之一是为了加快下载速度。因为IE浏览器是多线程的，同一时间可

以下载3幅图像。

切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不

知道该如何对效果图进行切片，这是因为对布局技术不了解。同一个网页效

果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是”标准”

的，所以要想灵活运用切片，必须熟悉流行的布局技术。

在对效果图进行切片时应注意以下事项：

（1）、切片一定要和所切内容保持同样的尺寸，不能大也不能小；

（2）、切片不能重叠；

（3）、淡色区域不需要切片，因为可以写代码生成同样的效果。也就是

说，凡是写代码能生成效果的地方都不需要切片；

（4）、重复性的图像只需要切一张即可；

（5）、多个素材重叠的时候，需要先后进行切片。例如背景图像上有按

钮，就需要先切片按钮，然后把按钮隐藏，再切片背景图像。

（6）、如果突破非常复杂，无法布局，那么最简单的解决方法就是切片

成一张大图像即可。

二、网站策划

网站策划可以说是整个网站建设的前提，网站策划中包括网站用户需求

分析，网站信息组织、网站导航设计、网站功能需求分析以及网站推广方案

等一系列内容。通过网站策划，可以确定的因素包括：网站的类型、网站导

航的规划、网站的整个风格（CI要素）、网站的功能和网页布局。而这些因

素都是可以直接在网页效果图中体现出来的。

1、收集客户资料

2、分析网站类型

根据前期收集的资料以及和客户进行沟通，确定网站的内容、类型

和功能。比如现在有个体育用品公司，客户希望通过网站对公司形象和

公司产品进行全方位的展示，但是并不涉及到电子商务的功能，所以网

站类型可以定义为资讯类网站。

根据资讯类网站的特点和网站本身的定位，通过Google和百度搜索

通类型的页面以作设计上的参考。

3、确定网站风格

网站风格要通过网站的内容和功能来确定。

网站策划

网站类型

网站导航

网站风格

网站功能

网页布局

网页效果图设计