网页效果图制作(装修效果图制作)
本文目录
- 网页效果图制作，网页效果图一般是多大尺寸，在coreldraw或PS制作的区别~~
- 网页效果图的网页效果图布局原则
- 网页效果图的网页布局分类
- 想知道一个网站的首页效果图制作的基本过程
- Fireworks网页元素与网页效果图设计的目录
- 如何制作美观好看的web应用程序界面
- 如何用PS制作网页首页的效果图
- 静态网页制作步骤
- 网页设计效果图你们是怎么设计的
网页效果图制作，网页效果图一般是多大尺寸，在coreldraw或PS制作的区别~~
目前来说，网页的长是不限定的，视内容而定，宽最好的是960或者是980，我比较喜欢用980，因为目前市面上的显示器最少的也有1024的分辨率，如果满满的1024的话，浏览器默认的边框占去几十像素，就会显示的不完全，有滚动条。CDR里面做网页不太好哦，因为网页效果图是一个网页的前期工作，设计完了要切片存储为WEB所用设备格式，CDR是不能切片保存的，所以，还是用PS做吧。
网页效果图的网页效果图布局原则
网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版，网页布局设计最重要的就是传达信息，且使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做：1．主次分明，中心突出在一个页面上，必然考虑视觉中心，这个中心一般在屏幕的中央，或者在左上的视觉优势位置。因此一些重要的文章和图片一般可以安排在这些部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次分明。2．大小搭配，相互呼应。较长的文章或标题不要编排在一起，要有一定的距离，同样，较短的文章也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3．图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
网页效果图的网页布局分类
网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。详例请参照图片册。（1）骨骼型描述：网页中骨骼型是一种规范、严谨的分割方式，也是最为普通和最为常见的一种形式，类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。（2）满版描述：满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。视觉传达效果直观而突出。给人以生动大方人感觉。满版型版式被各种网站所采用，以学校、娱乐、体育、艺术、儿童以及个性化网页，其中以韩国网站居多。（3）分割型描述：分割型版式指把整个页面分成上下或左右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比强弱。如果图片比例过大，文字字体过于纤细，段落疏松，会造成视觉心理的不平衡，显得生硬。（4）中轴或对称型描述：中轴型版式是将图片和文字沿浏览器窗口的中间轴心位置作水平或垂直方向排列的一种设计方式。沿中轴水平方向排列的页面可以给人稳定、平静、含蓄的感觉，沿中轴垂直方向排列的页面可以给人以舒畅的感觉。采用这种版式设计的网页比较适合做网站的首页。（5）焦点型描述：焦点型的网页版式通过对浏览者视线人诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。中心焦点型是将图片或文字置于页面的视觉中心。向心焦点型是视觉元素引导浏览者人视线向页面中心聚拢。离心焦点型是视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用，以体育、娱乐、动画网站为多。（6）倾斜或曲线型描述：倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。此类网站版式为各类网站所采用。曲线型网站图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。此类网站版式为各类网站所采用。（7）三角型描述：三角型版式是指见面各视觉元素呈三角形或多角形排列。正三角形最具稳定性，倒三角形则可产生动感。侧三角形构成一种均衡版式，既安定又有动感。三角形版式为各类网站所采用。（8）自由型描述：自由型版式人页面具有活泼、轻快人气氛。自由型版式也可应用于多种网站。如网络、娱乐、体育、个人、商务等。以上介绍的版式基本类型并不是固定不变的，在实际设计中，设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位，在设计中要灵活把握版式结构，才能更好地达到设计目的。
想知道一个网站的首页效果图制作的基本过程
在网页效果图的设计阶段，应按照绘制结构草图，在Fireworks中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片刀Dreamweaver的顺序来依次进行。下面将会介绍网页效果图设计中各个流程的作用。在图像软件中设计网页效果图，总体可以分为7个步骤：（1）、创建画布，添加辅助线来布局；（2）、绘制结构底图；（3）、添加内容，包括图像和文字；（4）、切片；（5）、优化；（6）、导出；（7）、布局。1、创建辅助线在具体设计前，应当考虑到网页的布局形式，可以根据策划阶段确定下来的网页布局草图，在Fireworks的画布中添加辅助线，这样做的目的是为了明确页面布局形式和面积。需要注意的是，对于布局结构比较复杂的页面，辅助线不是一次就能够全部创建好的，而是一部分内容创建一部分否则辅助线过多会使页面混乱。2、绘制结构底图根据创建好的辅助线，使用Fireworks的工具或者是矩形选取框工具，把网页效果图中带有底色的“矩形块”依次绘制出来，形成一个整体的布局效果。这里的“矩形块‘只是一个统称，可以使任意的形状。除了得到形状以外，还可以直接对这些”矩形块“配色，或添加纹理、滤镜，从而在整体上对页面的配色方案进行控制。3、添加内容结构底图绘制完毕后，就可以开始在网页效果图中添加实际的内容了，包括文字和图像，从而完成最终的效果图方案。添加图像的时候，如何选择最合适的图像素材，如何对图像素材进行处理是非常重要的，可以说网页中图像设计的好坏，直接影响到整体的页面效果。4、切片效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为IE浏览器是多线程的，同一时间可以下载3幅图像。切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不知道该如何对效果图进行切片，这是因为对布局技术不了解。同一个网页效果图，按不同的方式布局就会得到不同的切片，并没有说哪一个才是”标准”的，所以要想灵活运用切片，必须熟悉流行的布局技术。
Fireworks网页元素与网页效果图设计的目录
第1章 网页效果图设计的一般流程 11.1 网页效果图设计流程概述 31.1.1 创建辅助线 31.1.2 绘制结构底图 41.1.3 添加内容 51.1.4 切片 51.1.5 优化 61.1.6 导出 71.1.7 布局 91.2 网站策划 101.2.1 收集客户资料 101.2.2 分析网站类型 101.2.3 确定网站风格 111.3 各类网站的布局特点分析 121.3.1 资讯类网站 131.3.2 电子商务类网站 161.3.3 互动游戏类网站 181.3.4 教育类网站 231.3.5 功能型网站 251.3.6 综合类网站 26第2章 网页的布局 292.1 网页布局基础 302.1.1 网页中的基本元素 302.1.2 网页的构成 332.1.3 网页的空间与页面尺寸 362.1.4 页面元素的分布情况 382.2 网页的布局设计 392.2.1 布局方法 392.2.2 确定版面率 402.2.3 网格设计 432.3 网页布局的分类 452.3.1 满版布局形式 452.3.2 十字布局形式 452.3.3 九宫格布局形式 462.3.4 米字布局形式 472.4 网页布局技巧 492.4.1 黄金分割式布局(完美的比例给人视觉上的享受) 492.4.2 左右对齐式布局(没有浪费的空间，表现商业性形象) 522.4.3 全景式布局(用趣味性吸引浏览者) 532.4.4 卫星式布局(以太阳为中心的卫星环绕型) 552.4.5 照片组合式布局(新世界以全景式自由的展现出来) 572.4.6 包围式布局(限定范围的效果) 592.4.7 散开式布局(山水画般的自由和优雅) 622.4.8 单侧齐行式布局(理性与自由共存的版式设计) 642.4.9 对称式布局(以中心为基线，左右对称) 66第3章 网页的色彩设计 693.1 网页设计要素——色彩 703.1.1 色彩决定印象 703.1.2 色彩印象无法更改 713.1.3 色彩无处不在，具有多重效果 723.2 色彩的原理 733.2.1 光与色彩 733.2.2 物体色 743.2.3 色彩类型 753.2.4 色彩三要素 763.3 色相环的作用 793.3.1 色相环的构成 793.3.2 色相环中的颜色特点 803.3.3 色彩之间的关系 813.4 网页中的色彩 883.4.1 RGB色彩模式 893.4.2 HTML语言对颜色的描述 903.4.3 216网页安全色 913.5 色彩索引 913.5.1 红色 913.5.2 橙色 933.5.3 黄色 943.5.4 绿色 963.5.5 蓝色 973.5.6 紫色 993.5.7 黑色 1013.5.8 白色 1023.5.9 灰色 1033.5.10 色彩索引配色法 1043.6 色调的变化效果 1043.6.1 鲜艳的色调 1053.6.2 亮色调 1053.6.3 淡色调 1063.6.4 中间色调 1063.6.5 浅浊色调 1073.6.6 暗色调 1073.6.7 深色调 1083.7 色彩的四种功能 1083.7.1 主色 1083.7.2 背景色 1093.7.3 融合色 1123.7.4 强调色 1133.8 实用配色网站推荐 114第4章 Fireworks图像处理关键技术精讲 1174.1 Fireworks基本操作技巧集锦 1184.2 矢量绘制关键技术 1204.2.1 两种方法绘制圆角矩形 1204.2.2 防止对圆角矩形变形的时候圆角改变 1214.2.3 巧妙消除路径边缘的锯齿 1224.2.4 多种方法绘制虚线 1234.2.5 制作网页效果图中的清晰小字 1244.2.6 使文字按照路径排列 1254.2.7 制作电视扫描线的效果 1264.2.8 自定义纹理 1274.2.9 添加和修改渐变色填充 1284.2.10 巧妙制作渐隐的线条 1304.2.11 解决图标缩小后变形的问题 1324.3 图像处理关键技术 1344.3.1 蒙版的3种用途 1344.3.2 选区和路径的转换 1434.3.3 制作图像条形码效果 1464.3.4 Fireworks中的外挂滤镜 1484.3.5 制作淡彩钢笔画效果 1514.3.6 制作特殊的渐变色效果 1534.3.7 制作网格化图像效果 1544.3.8 制作老照片效果 1574.3.9 使用【曲线】命令校正图像的色彩 1584.3.10 使用【色阶】命令调整图像的色彩 165第5章 Fireworks网页制作关键技术精讲 1695.1 GIF动画制作关键技术 1705.1.1 使用Fireworks制作补间动画 1705.1.2 巧用“补间”技术作图 1715.1.3 巧做网页LOGO中的光描动画 1745.2 Fireworks行为相关关键技术 1765.2.1 使用Fireworks制作交互按钮 1765.2.2 使用Fireworks的行为实现图像翻转特效 1795.2.3 把Fireworks中的交互效果添加到网页中 1835.3 切片和优化的关键技术 1875.3.1 在Fireworks中对图像进行优化 1875.3.2 选择合适的图像优化格式 1885.3.3 巧妙去除GIF图像周围的白边 1925.3.4 导出效果图切片 1925.4 Fireworks效率工具问题集合 1985.4.1 巧妙执行重复的操作 1985.4.2 对大量的图像素材进行批量处理 201第6章 网页的LOGO设计 2056.1 LOGO设计的基本构成要素 2066.1.1 LOGO中的线条 2066.1.2 LOGO中的形状 2086.1.3 用线条和形状构成LOGO 2096.1.4 LOGO中的英文字体 2106.1.5 LOGO中的中文字体 2126.2 40种常用LOGO设计技巧 2176.3 Web2.0风格LOGO设计要素 2266.4 实用LOGO设计网站推荐 2286.5 LOGO设计案例分析 229第7章 网页的导航设计 2337.1 网站的栏目构成 2347.2 导航的视觉设计 2367.3 导航的交互设计 2407.4 没有“导航”的导航——搜索 241第8章 网页的通栏设计 2438.1 网页通栏概述 2448.1.1 网页中的通栏 2448.1.2 网页通栏的设计形式 2468.1.3 网页通栏的尺寸 2478.2 图像素材的选择 2478.2.1 说服力的强弱 2488.2.2 内容的相关度 2508.2.3 发掘图像背后的故事 2518.2.4 色彩的层次 2528.2.5 与众不同 2528.2.6 幽默诙谐 2538.2.7 唯美主义 2538.2.8 戏剧化 2548.2.9 强调脸部 2548.3 图像裁剪的技巧 2568.3.1 将图像转化为相同的尺寸 2568.3.2 制作不同比例的图像 2578.3.3 统一人物肖像的尺寸 2578.3.4 对人物肖像进行裁剪 2588.3.5 裁剪掉无关的部分 2608.3.6 调整图像的角度 2608.3.7 放大后裁剪 2618.3.8 只保留局部 2628.3.9 改变图像传递的信息 2638.3.10 一图多用 2638.3.11 突破空间 2668.3.12 边缘的处理 2678.4 图像设计的技巧 2698.4.1 添加边框 2698.4.2 叠加效果 2708.4.3 添加元素的效果 2718.4.4 剪贴簿效果 2728.4.5 卷曲效果 2738.4.6 制作“拍立得”效果 2768.4.7 异形边缘 2768.4.8 小图锐化 2798.5 通栏广告的设计技巧 2798.5.1 选择合适的素材 2798.5.2 环境背景设计 2808.5.3 产品的展示 2818.5.4 字体的选择和设计 282第9章 简单风格的小型网站设计 2859.1 案例分析 2869.1.1 页面布局形式 2869.1.2 添加文字和图像 2899.2 案例实现 2939.2.1 制作效果图 2939.2.2 切片、优化和导出 2969.2.3 布局页面 299第10章 标准型网站设计 31110.1 案例分析 31310.1.1 页面布局形式 31310.1.2 页眉的设计 31410.1.3 通栏的设计 31610.1.4 内容区域的设计 31810.1.5 页脚的设计 31910.1.6 字体的选择 32010.2 案例分析 32010.2.1 制作结构底图 32010.2.2 页眉设计 32410.2.3 通栏设计 32510.2.4 制作内容区域 32710.2.5 制作页脚 32810.2.6 切片、优化和导出 33010.2.7 布局页面 334……
如何制作美观好看的web应用程序界面
我们需要先制作背景图片。也就是网页背景那块蓝色的部分。我们需要单独做出来。新建一个1920px400px的文件我们拉一个一个蓝色（#506dbb）到白色的一个渐变效果图然后我们保存这张图片为gif格式这时候我们新建一个1000800的文件我们把网页效果图制作出来。这里都是用到ps制作的。没有写任何代码。这个过程我就不讲了大家制作好网页效果图完成的时候一定要注意把网页背景图层删掉，保持透明下一步我们使用切片工具。把页面进行切片。如下图所示注意每一个链接都要切片一下。切片工具和矩形选区工具一样，拉一下就是一个切片为了区分我这里加了背景。我们一会一定要记得去掉我们再使用切片选择工具选择单个切片。然后右键我们再逐个为切片添加链接我们现在保存为web所用格式我们把这里选择png—8保存保存完成后效果图保存完成后。会生成一个目录和一个html文件。我们用浏览器打开这个html文件可以看看效果。由于我们保存时选择的是png格式的所以看到的效果不美观，且网页靠左边。我们要做的就是让网页有一个背景就是我们刚刚制作的蓝色背景。且页面居中为了方便，这里我们使用 Dreamweaver。这个软件破解版和安装教程问度娘要这里就不多说。打开 Dreamweaver界面我们新建一个站点我们先要给网页居中。我们用Dreamweaver打开ps生成的html文件进入Dreamweaver的设计视图。注意看我们用鼠标点一下最外边的这根线。（把鼠标放在四个角上单击一下就可以选中）选中然后把下边的属性设置为居中。注意看这样网页就居中了。我们再添加一个背景我们先把鼠标在旁边空白地方单击一下，然后点击下面的页面属性把背景图片设置为我们刚刚制作的背景图。重复选择no开头的那个。其他的不用管。然后我们按ctrl+s保存好网页。然后即可使用浏览器预览效果了
如何用PS制作网页首页的效果图
ps、fireworks都可以用来做效果图的，用这些工具做效果图的时候只要注意一下栏目的排版以及用色的协调性，ps做网页效果图常用的效果不多，所要只要掌握几种常用的工具用法就可以了：选取、剪切、填色、渐变、蒙版、切图等。刚开始初学的可以网上找一些好点的模版下来自己尝试着按自己的想法进行修改，等熟练掌握以后再完全自己构思、设计！
静态网页制作步骤
静态网页制作步骤：
第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。
第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。
第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。（这个部分需要有代码基础，可先学习HTML入门教程）
第三：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。
第四：最后优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。
扩展资料：
静态网页是标准的HTML文件，它的文件扩展名是。htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。我们就叫做静态页面。
静态页面一般都是html格式，鼠标双击这个静态页面，就可以打开这张网页，效果会跟图片设计的效果一样。那么这个静态页面就是一个网站了吗？这些静态页面其实只是做网站或者做模板的材料而已。
在网站设计中，静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含建站程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
网页设计效果图你们是怎么设计的
我也曾经遇到过好几次这种问题，我用ps做好效果图给客户看，客户满意后我就切图做。但是ps上无法实现每一个像素的精确（其实也可以，但那样就太费时间了），所以有时候实际做出的网页在版面上会有些出入，比如左右分栏的结构在效果图上是整齐的，做成网页就有长有短，所以不得以要做一些调整。这样一来，遇见比较挑剔的客户就会纠结于我为什么要修改效果图上的方案，每次要解释半天。所以我现在都是一边做效果图，一边在网页上实现，把整个网页做好以后，直接将网页截图给客户看。
