网页设计效果图

1、网页制作一定要先用photoshop制作效果图吗？

不一定，如果是制作简单的表格式网页或是有现成模板的就可以不用

【备注】

做网页用Photoshop制作出效果图，是为了能直观的展现网页，让客户了解网页的排版和设计效果。

Photoshop制作效果图能给程序员一个直观的表达形式，不用再制作的过程中再去考虑排版和效果的展现。

2、网站设计效果图是全新设计吗

看你做怎么样的网站，如果是模板站，一般网络公司都是给找一些现有的图片随便美工一下，只有定制网站才会去设计效果图

3、网页效果图怎么制作？

　平面广告和网站页面设计的宗旨就是吸引眼球，符合平面视觉冲击特点，如何设计一款有特色、另类能吸引眼球的作品是摆在平面设计人员和photoshop爱好者面前的难题

现在以一款网页平面设计效果图为实例，讲解网页设计方面的创意知识，从网页效果图布局创意、颜色选择，裁减效果图和制作网页特效等方面来学习。下面我们就一起来学习吧。

首先声明一下，这款网页效果图在得到朋友许可后拿来制作教程实例，切勿抄袭和用做其他用途。先看效果图0。

一、 创意设计思路

一个网站在制作前需要确定网站风格、网站主题、和主色调，在没有确切的方案之前，最好不要贸然动手制作，不然最后的结果很可能是以失败而告终。

笔者决定从关键字"路行""独自行走"加上是暗色系的要求上下手，敲定颜色采用沙漠黄，沙漠很容易让人联想到孤单；板式确定为户外广告的样式沙漠黄配合生锈的广告牌。符合"颓废""艰辛路途"主题。

二、 网站效果图及LOGO的制作。

1、LOGO的样式采用的是图形和字符的组合。汉字LOGO的字体不是下载的字体，是笔者用钢笔工具画出来的字体。如图1和1-1。

　钢笔工具勾勒出图1的行走的人样式，填充红色，然后调整混合模式"斜面和浮雕"选择浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默认。这LOGO 的创意是，一个人在崎岖不平的路上坚持自己的方向，配合网站的英文加中文名字，构成一个形象LOGO，刚好"路"字和"行"字采用红色，突出了路行。

文字LOGO笔者用钢笔工具勾画出字的各个部件，然后拼接在一起，这里只给出"路"字的方法，"行"字方法如同。[next]

2、制作布局参考图。如图2

　3、根据布局效果图，新建文件大小1000X765，填充黑色。布局中的"显示区域"为广告牌是要挂到墙上的，使用"石头材质"放置在页面最上方来制作石板墙；使用"锈迹皮革材质"制作"显示区域""LOGO"区域的边框（注：一些材质的制作方法省略，平时可自行制作也可去图片站下载保存，用的时候方便），将LOGO区域的边框复制一层，调整不透明度为60%放置到LOGO曾下方，这样大体的框架就完成了。如图3和3-1。

（图5）

（图6）

4、找来一张沙漠公路的图片，把这张图片进行聚焦处理。点图4示例的按扭进入"以快速蒙版编辑模式"，选择渐变，渐变模式为"径向渐变"在图中间向两边拉，屏幕会出现一团红色；然后再点"以标准模式编辑"画面会出现一个圆圈选择区域，按"DELETE"删除即可。如图4和图4-1。

（图7）

（图8）

　5、在"路"图片上方新建一层，按住CTRL+"路"图层，单击新建的图层，填充颜色4E341B，调整为暗系沙漠黄。如图5。

（图9）

制作文字LOGO牌。找来图5-1中的灰色材质，在"LOGO边框"下面新建一层，然后在其之上新建一层，放置沙漠图片，将其混合模式修改为"颜色"然后打开一开始制

4、想知道一个网站的首页效果图制作的基本过程

在网页效果图的设计阶段，应按照绘制结构草图，在Fireworks中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片刀Dreamweaver的顺序来依次进行。下面将会介绍网页效果图设计中各个流程的作用。
在图像软件中设计网页效果图，总体可以分为7个步骤：（1）、创建画布，添加辅助线来布局；（2）、绘制结构底图；（3）、添加内容，包括图像和文字；（4）、切片；（5）、优化；（6）、导出；（7）、布局。

1、创建辅助线
在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在Fireworks的画布中添加辅助线，这样做的目的是为了明确页面布局形式和面积。
需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是一部分内容创建一部分否则辅助线过多会使页面混乱。
2、绘制结构底图
根据创建好的辅助线，使用Fireworks的工具或者是矩形选取框工具，把网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。
这里的“矩形块‘只是一个统称，可以使任意的形状。除了得到形状以外，还可以直接对这些”矩形块“配色，或添加纹理、滤镜，从而在整体上对页面的配色方案进行控制。

3、添加内容
结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，包括文字和图像，从而完成最终的效果图方案。
添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效果。

4、切片
效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为IE浏览器是多线程的，同一时间可以下载3幅图像。
切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不知道该如何对效果图进行切片，这是因为对布局技术不了解。同一个网页效果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是”标准”的，所以要想灵活运用切片，必须熟悉流行的布局技术。

5、一个网页设计师主要是做什么工作 是美工还是布局 还是效果图都是自己做的

网页设计师的工作：ps效果图的设计 然后dw(div+css)的切片 会简单的flash 俗称网页三剑客 最后一样一般用的少
小公司一般要求你都做 大公司分得很细 ps设计和切片（布局）是分开的
初期的的网页设计师叫美工 高级点后就叫设计师 只是不同能力水平的不同称呼而已

6、求问为什么在网页设计之前要先进行效果图设计呢？

发布日期：2012-5-30 8:48:58 来源：伊索科技 我们在做网站之前，都会有一个规划，比如说框架图的搭建、效果图的设计。目前网站建设行业很多公司采用模板建站的形式，直接交付客户成品网站，也有部分公司以专业建站的形式为客户先出设计效果图，到底哪个好呢？我们说如果您只考虑价格，那么选用模板建站肯定是比较便宜的，如果您重视网站对企业形象和产品的宣传，那么建议选用专业建站。今天我们只介绍对于专业建站来说，为什么在网页设计之前要先出效果图设计呢？
假如您是房地产开发商，要盖一座大厦，那么您在建大厦之前会怎么做？毫无疑问要先在建筑图纸上进行设计规划。再比如您是一家高端婚庆公司的负责人，要为客户布置婚礼现场，在布置之前该如何操作？当然是要先设计好婚礼现场的效果图。所以网站建设也是一样，要做出让客户满意的网站，首先第一步就是要为客户设计网站效果图。
通过效果图，建站服务商和客户之间可以明确进行沟通，指出哪些地方的设计和预想有所差别，或者哪里还不尽人意，不至于空手而谈，凭想象设计。一旦双方确认了设计图，建站服务商就可以按照效果图进行网站建设了。目前有能力开发专业建站的北京网站建设公司都会给客户先出效果图设计，这样不会导致后期网站完成后却发现不是客户想要的，重新推翻来做，那么不但耽误双方的时间，建站公司还可能因为无法支付二次开发的人力成本而导致合作终止。实际上，有了效果图，也是对最终网站建设是否合格的一个考量标准。

7、怎样去做一个网站的效果图呢？求详细。。。

做一个不但在于技术精还要在于设计理念有创意，所以如何设计好一个效果图要从多方面去考虑，首先从你的需求方面去想去设计（即页面内容），之后根据企业VI去定位页面布局及颜色等等方面，最后根据布局再去用技术方面的东西去设计。既然你只是说如何布局，那么根据经验来说，应该从以下几方面考虑。

一).确定页面功能模块
首页的内容模块是指你需要在页面上实现的主要内容和功能。一般的站点都需要这样一些模块：
网站名称(logo), 广告条(banner), 主菜单(menu),
新闻(what‘s new), 搜索(search), 友情链接(links),
邮件列表(maillist),计数器(count), 版权(copyright).
（当然这些只是常用而已。一般情况下，如果是企业设计一个网站的话，都会有网站设计方案，那么可以根据方案去设计的。）

二).设计首页的版面
在功能模块确定后，开始设计首页的版面。就象搭积木，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就看你的创意和想象力了。设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再用网页制作软件实现。
1.定位你的网站主题和名称
2.定位你的网站CI形象
3.确定你的栏目和版块
4.网站的整体风格创意设计
5.网站的层次结构和链接结构
6.首页的设计
7.版面布局的窍门
8.色彩的搭配

其实说来说去就是颜色搭配问题及图片布局，一般一个网站效果图都只是一个静态的页面而已，要图片格式的话，直接截个图就行了。所以只要知道布局及颜色搭配再就是懂设计技术基本上就可以做一个效果图了。当然你自己感觉创意不够的话，一般可以同过网络去搜索一下网站模板，可以去借鉴别人的设计风格之后在根据自己的要求加以修改就ok了，有很多是PS格式个模板，那么就可以在ps里面先修改在通过切片工具做都是可以的。这些需要一定的设计技术了。

根据楼主说提问的问题来看应该不太懂网页设计，所以最好去下载一个网页模板，百度里搜索有很多下载网站，之后看点网页制作教程就可以了做了。一下是一些相关资料，如果链接过期请自行搜索
网页模板下载地址：http://www.dabaoku.com/moban/geren/
网页设计教程：http://www.enet.com.cn/eschool/zhuanti/dreamweavershili/

8、如何用PS做网页效果图

上次有空做了个。我用的是GIF的动态效果。你也可以直接做图片然后保存网页格式，尺寸什么的自己调。不要在意这些细节。。

9、html网页设计里面怎么平铺背景图片

html网页设计里面平铺背景图片的代码如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
网页背景默认是平铺整个屏幕的，可能有以下原因导致不能平铺：

1、图片不够大，又background属性不能拉伸图片；
2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> ；
3、body的background属性去掉，要不然会被遮住。