网页美工设计
油罐清洗-速写人头
2023年2月17日发(作者：饮食误区)网页美工切图设计要点
网页美工与广告
设计题目：姓名：
学号：班级：
指导教师：
完成日期：设计说明书歪歪蛋创意生活网站美工的设计与实现王
丹xx118012410图文孙俊国xx年6月18日
10级选修《网页美工与广告》卷二实践考核方案课程名称：《网
页美工与广告》课程编号：0704410授课班级：10级选修学分：
3考核形式：实践考
课程性质：专业课
一、考核目的
考核学生网页美工与广告设计的综合能力。
二、考核方式、内容、要求
考核方式：以课程设计做为主要的考核方式。
考核项目：自定一个网站主题。根据该网站，用Fireworks与
Dreamveawer设计制作成xxx网站的主页与副页及其他页面。
要求：
1.要有网页美工的规划与设计。
2.设计出网页主页与副页效果图，并根据效果图制作网站中的其
他页面，并自己设计LOGO、flash广告、栏目、导航、banner、网页
内容；界面设计要美观，色彩搭配合理，有新意，超链接正确；网页
中要有1个以上的Flash动画
3.提交：及网站（5张网页以上）；网页
美工设计说明书。
执笔人：审核人：院长：xx-5-5
目录
一、概
述........................................................
....1
1.1选择缘
由.....................................................1
1.2网页美工的定
义...............................................1
1.3网页美工的作
用...............................................2
1.4
Firework..................................................
..2
1.5色彩的平衡与呼
应.............................................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
fireworksflash等制图软件，也要有一个非常好的视觉功底，创意
能力，才能创造出非常美观的页面
网页美工也用css来进行美化，css可以控制html标签的元素，
当我们鼠标放在超级链接上的时候背景变色网页美工需要掌握
DIV+CSS样式；基础HTML语言。
基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、
简单色彩静物写生）
三大构成：色彩构成、平面构成、立体构成。
Photoshop网页配色及排版设计；Illustrator网页设计；网页设
计综合、
经典网页解析。
1.3网页美工的作用
对于制作一个网页来说。网页美工起着举足轻重的作用，网页美
工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使
用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于
一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计
视觉效果使之满意的过程。
网页美工设计的职能大体包括三方面：一是图形设计，即传统意
义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人
的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在
于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编
码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是
用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计
的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量
网页设计的合理性。
1.4Firework
在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia
公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展
了此软件，但是与Macromedia的风格差别较大。将来有可能被
Photoshop等取代。现最新版本AdobeFireworksCS5.1。
fireworks是一个强大的网页图形设计工具，你可以使用它创建
和位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效
果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设
计中使用，你可以将它输出为html文件，还能输出为可以在
photoshop,illustrator和flash等软件中的格式。
Fireworks提供专业网络图形设计和制作方案，通过它，你可以
网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash
能实现网页的无缝连接，与其它图形程序各HTML也能密切配合，为
用户一体化的网络设计方案提供支持.
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切片工具，先大刀阔斧的切上一番!技巧：
大面积的色块单独切成一块，尽可能
的保持在水平线上的整齐(这个问题你们在后面的制作页面中深
有感触)切好的图如下所示：
江苏经贸职业技术学院
实验报告
(xx/xx学年第一学期)
系部信息技术系
课程名称网页美工设计
学生姓名
学号
班级
指导教师
二00六年二月制
1
三、实验步骤:
1.打开PHOTOSHOPCS3软件——新建图层（名称为“茶壶”，宽
为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
内容仅供参考