网页美工切图设计要点
篇一：网页美工设计说明书
网页美工与广告
设计题目：姓 名：
学 号：班 级：
指导教师：
完成日期：设计说明书歪歪蛋创意生活网站美工的设计与实现 王 丹 20101180124 10图文 孙俊国2012年6月18日
10级选修《网页美工与广告》卷二实践考核方案 课程名称：《网页美工与广告》 课程编号： 0704410 授课班级：10级选修 学 分：3 考核形式：实践考
课程性质：专业课
一、 考核目的
考核学生网页美工与广告设计的综合能力。
二、考核方式、内容、要求
考核方式：以课程设计做为主要的考核方式。
考核项目：自定一个网站主题。根据该网站，用Fireworks与Dreamveawer设计制作成xxx网站的主页与副页及其他页面。
要求：
1. 要有网页美工的规划与设计。
2. 设计出网页主页与副页效果图，并根据效果图制作网站中的其他页面，并自己设计LOGO、flash广告、栏目、导航、banner、网页内容；界面设计要美观，色彩搭配合理，有新意，超链接正确；网页中要有1个以上的Flash动画
3. 提交：index.png fuye.png 及网站（5张网页以上）；网页美工设计说明书。
三、考试说明与评分标准
执笔人： 审核人： 院长： 2012-5-5
目录
一、概述 ............................................................ 1
1.1选择缘由 ..................................................... 1
1.2网页美工的定义 ............................................... 1
1.3网页美工的作用 ............................................... 2
1.4 Firework .................................................... 2
1.5色彩的平衡与呼应 ............................................. 3
二、网页美工的总体设计 .............................................. 3
2.1 网页设计的制作流程 .......................................... 3
2.2网站色彩布局 ................................................. 4
2.3网站结构 ..................................................... 6
2.4图片轮显的制作过程 ........................................... 6
2.5滚动图片的制作 ............................................... 7
2.6制作网页的主要内容 ........................................... 7
2.7形成网页 ..................................................... 7
三、美工设计总结 .................................................... 8
歪歪蛋创意生活网站美工的设计与实现
一、概述
1.1选择缘由
我用网页美工设计的网站是生活家居类的网站。
随着今年来家居业“重装饰、轻装饰”的潮流，家居设计从越来越有实用性的作用提升到装饰性的作用，家居行业被前所未有的“激活”了
家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居设计的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家居设计的消费额将十分可观。
各类的家居设计都与我们的生活息息相关，是生活中不可或缺的一部分,广阔的市场,巨大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居设计方面的网站.
1.2网页美工的定义
网页美工就是对网页的美化，网页美工要熟悉photoshop fireworks flash等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面
网页美工也用css来进行美化，css可以控制html标签的元素，当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握DIV+CSS样式；基础HTML语言。
基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）
三大构成：色彩构成、平面构成、立体构成。
Photoshop网页配色及排版设计；Illustrator网页设计；网页设计综合、
经典网页解析。
1.3网页美工的作用
对于制作一个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。
网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。
1.4 Firework
在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本Adobe Fireworks CS5.1。
fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。
Fireworks提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合，为用户一体化的网络设计方案提供支持.
篇二：ps网站切图网页切图教程详解
Ps网站切图详解
一，基本概念
1，切图，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。Fireworks也提供了切图技术，Flash则直接提供了网页格式输出技术（不需要切图）。
2，切片，是切图的直接结果，切图实际上就将图切分为一系列的切片
二，切图操作过程
1，切图工具图标的识别
2，切图基本操作
1）基本操作有两个：划分切片和编辑切片
划分切片，是使用切片工具，在原图上进行切分的操作。
编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等 下面我们看一下这两个操作
2）基本操作
如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，也可以使用实现，另外如果想精确的细微移动，则可以使用实现
如果想将某个切片存为某个图片输出，可以使用“切片选择工具”选择某个切片，然后选择“文件”菜单，并选择“存储为Web所用格式(W)...”，然后在弹出的界面中
...
3，切图技巧
1）一张图，可以有多种切分方式，如下：
既然存在n多种切图方式，那么是不是哪种方式都可以满足要求？
答案：不是的。
一般对页面的要求是，当页面大小发生变化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。
我们切分好的图是要输出为Html格式的网页文件的，然后通过网页编辑器，将该页面进行加工，做成符合要求（例如可以根据内容多少，自由伸缩等）的模板页面。这其中，切图的方式直接影响着模板页面是否能够满足实际的要求。
我们来看一个例子：
2）切图技巧主要有几下几点
属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化。
属性渐变的区域适合分为一个切片，渐变有两种表现形式
颜色渐变
形状渐变
根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后在具体到每个table，去考虑里面应该如何切。
下面通过几个图例来说明
三，切图的Html格式输出
切图完成，就可以输出为Html格式的页面了。
在“文件”菜单中，选择“存储为Web所用格式(W)...”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“HTML 和图像(*.html)”，设置为“默认设置”即可，切片选择“所有切片”。然后点击“保存”按钮就可以了。
后面的事情，就是编辑输出的Html页面了。
网页制作：从切图到生成网页
鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天
有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始：
step1:在PhotoShop中打开设计稿，如下图
选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧： 大面积的色块单独切成一块，尽可能
的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示：
篇三：网页美工设计-实验报告
江苏经贸职业技术学院
实 验 报 告
(2011 /2012 学年第一学期)
系 部 信息技术系
课 程 名 称 网页美工设计
学 生 姓 名
学 号
班 级
指 导 教 师
二00六年二月制
1
三、 实验步骤:
1. 打开PHOTOSHOP CS3软件——新建图层（名称为“茶壶”，宽为400毫米，高位300毫米，
分辨率为300像素/英寸，颜色模式RGB，8位，背景颜色默认为白色）——用渐变工具设置左色标RGB值为161、152、131，右色标RGB值为255、255、255——确定——鼠标从左上角一直拉到右下角——完成
2. 打开“小镇”图片——用移动工具移到“茶壶”图层——调整图片大小，移到适合的位置—
—将“小镇”图层的不透明度改为30%——完成
3. 新建图层——用矩形选框工具在“茶壶”图层画出矩形框，填充背景色RGB值为181、 176 、
163C，TRL+D——利用移动工具，将矩形框下移，CTRL+SHIFT+ALT+T进行复制。——新建组，将条纹图层放入图层组中，命名为“条纹”
4. 打开“梅花”图片——用移动工具移到“茶壶”图层——调整图片大小，移到适合的位置，
并将图层命名为“梅花”
5. 打开“茶壶”图片——用移动工具移到“茶壶”图层——调整图片大小，移到适合的位置，
并将图层命名为“茶壶”
6. 打开“案几”图片——用移动工具移到“茶壶”图层——调整图片大小，移到适合的位置，
并将图层命名为“案几”
7. 打开“茶杯”图片——用移动工具移到“茶壶”图层（移动四次，即出现四个茶杯）——调
整图片大小，移到适合的位置，并将图层命名为“茶杯”
8. 按 “CTRL+Ｅ”，合并“茶壶”、“案几”和“茶杯”图层，命名为“茶壶组合” 9. 打开“竹子”图片——用移动工具移到“茶壶”图层——调整图片大小，移到适合的位置，
并将图层命名为“竹子”
10. 选择“直排文字工具”，输入“宜兴紫砂壶”字样，字体为华文行楷，字体大小为８０
点，锐利，字体颜色RGB值为181、 176 、163——右击图层——栅格化图层
11. 完成并保存作业
四、实验中遇到的问题及解决方法：
无
2
《 网页美工切图设计要点》出自：百味书屋链接地址：http://m.850500.com/news/71688.html 转载请保 留,谢谢!
