网络信息制作与发布.ppt

网络信息制作与发布
手绘风格
第四章 Web艺术设计
主要内容：
本章主要介绍Web设计所需的美学原理和设计法则，具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的
两边对齐
左（或右）对齐
中间对齐
图文绕排
Date
字号和字距
网页中每一页的文字应尽量完整
每一页应有清晰的标题
尽量少用闪烁字
在文字使用上要特别注意易读性和趣味性
一般网页文字字体是稳定的，阅读要求识别轻松，浓淡适宜。
Date
小结
光的三原色是什么？P108
颜色分为哪两种？P179
色彩的属性是什么？P179
WINDOWS的操作系统中缺省的中文字体有哪些？P191
Date
Web设计元素
图像与VI设计
1. 网页图像和文件格式
2. 选择图形工具
3. 网页中的图像
4. 网页版面中图像的编排
5. 视觉标识设计
Date
网页图像和文件格式
数字图像类型
：又称为栅格图像。是用小方形
栅格（即象素）组成的图像，与分辨
率有关。
：由矢量定义的直线或曲线组
成的图像。矢量图形与分辨率无关。
Date
网页图像和文件格式
图像文件格式基础知识




Date
网页图像和文件格式
GIF是为网络图形传送而设计的，采
用了无损压缩技术，色深为8位。GIF还
有两个重要特点：透明和交错显示。
JPG是适合于照片和连续灰度图像的
最佳格式，色深24位（真彩色）。适合
具有丰富细节的图片。
PNG（便携式网络图形格式）是专为
Web设计，但由于缺乏浏览器支持，一直
未能普及。
Date
网页图像和文件格式
BMP格式是Windows中的标准图像文
件格式，有压缩和不压缩两种形式。
TIF最早是为了存储扫描仪图像而设
计。也是PC中使用最广泛的图像文件格
式。
TGA是Truevision公司为其显卡开
发的一种图像文件格式，现已成为数字
化图像，
Date
网页图像和文件格式
Web图像的应用：
统一的格式
速度的限制
Date
选择图形图像设计工具
Adobe公司的Photoshop
Adobe的ImageReady是一个微型的Photoshop版本，后来被集成到了Photoshop中。
Adobe的Illustrator是一个高端的绘图工具。
Macromedia公司的Firework是一款集图形处理和文本处理于一体的功能强大的应用软件。
Date
网页中的图像
照片类
绘画类
Date
网页版面中图像的编排
（1）图像的选择与剪裁
（2）图像形状的变化
（3）虚实的变化
Date
视觉标识设计（VI设计）
视觉标识（VI：Visual Identity）是指通过视觉语言的运用来树立形象和传播信息。其应用一直是CIS（Corporate Identity System：企业识别系统）的基础和最直接的表现形式。CIS的策划和运作往往以VI来表现，是CIS的一部分。
Date
视觉标识设计（VI设计）




Date
Web设计元素
动画
网页中的插图可以像电视动画一样
真实生动，有人用情景化设计来描绘将
来的网页设计。
无论人或动物的视觉，总是先注意
到运动着的东西。因此，很多广告公司
都将自己的网络广告做成动画的形式，
以便获得最大的宣传效果。
Date
Web动画的发展状况
（1）动画的初级阶段
（2）无处不在的GIF89a
（3）动画的新贵－－Shockware
（4）用Java来实现动画
（5）Flash动画和Streaming技术
Date
动画制作的工具
GIF Animation
Adobe Image Ready
Flash
Date
动画原理
传统的动画是由很多静态画面
序列连续地播放形成的。计算机的
动画和传统的动画原理基本上是一
样的，只是有些名词叫法不同。
帧（Frame）：每个动画单元
帧速率（fps：Frame per second
，指一秒钟动画所包含的帧数）是
动画概念的一项重要指标
Date
网页中的动画广告
广告的任务是在最短的时间内
传达一个简洁明了的信息或意念，
因此网络动画广告的创作比一般意
义上的故事情节动画更为自由。
Date
Web设计元素
视频和音频
Web多媒体在信息的传递中扮演着重
要和独特的角色，因此一个网页设计师
要时刻跟踪这些技术的