网页设计与制作【精品-ppt】

《网页设计与制作【精品-ppt】》由会员分享，可在线阅读，更多相关《网页设计与制作【精品-ppt】（58页珍藏版）》请在金锄头文库上搜索。

1、 1WANG YE SHE JI YU ZHI ZUO主讲教师：周国宝网 页 设 计 与 制 作网页设计与制作 2本章内容4.1 概述 14.2 网页设计中的创意思维 24.3 网页设计的创意方法 34.4 网页创意设计中的基本要素 44.4 网页创意设计中的基本要素 5网页设计与制作 34.1 概 述 网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。 一. 创意的类型：1. 改良型创意2. 创新型创意二. 创意的功能:1.提高作品的审美价值，使作品充满张力。2.满足受众的情感需求，更好的推销作品。网页设计与制作 44.2

2、 网页设计中的创意思维 在网页设计中为了创造出高质量的作品，我们往往需要多种思维方式来开发对事物的理解，不断发现事物全新的含义，并赋予其新的表现形式和生命力。一发展思维以思维的中心点向外辐射、扩散，积极的思考和联想，产生多方向，多角度的捕捉创作灵感的触角。发展思维的结构形式：树型结构、伞型结构、网状结构网页设计与制作 54.2 网页设计中的创意思维二. 逆向思维打破原有思维定式，将思维的方向和逻辑顺序完全颠 倒过来。反其道而行。以达到异、新、奇的视觉效果。 例如：网页设计中非均衡的视觉效果及色彩的反向运用 等。 三. 独特思维勇于挑战，超越常规、习惯 的认识模式，综合复杂环境中的 多种元素，产

3、生一种新颖的不同 凡响的视觉效果。如图(4-1)独 特的视角,给人以新奇的感觉。 法则：人无我有，人有我变。图4-1 非常态界面网页设计与制作 64.2 网页设计中的创意思维四. 思维的灵活性思维的灵活性指改变思维的能力 。 1. 举一反三，触类旁通。 2. 思维扩散、聚合。 五. 思维进程的跨越性创意超越了思维的步骤，因某一 事物激发起突然的顿悟。如：2008奥运会徽“中 国印.舞动的北京”及中国 申奥标志。图4-2图4-3网页设计与制作 74.2 网页设计中的创意思维六. 思维效果的整体性整体性是创新性思维的基本要求，脱离整体性作品就 会显得凌乱。如图4-3世界著名搜索引擎Google的徽

4、标设 计(图4-34-4)，丹尼斯黄将简约雅洁的设计风格与 “Google”巧妙结合，自然天成，使徽标充满灵气。 图4-3图4-4网页设计与制作 84.2 网页设计中的创意思维七. 思维认识的深刻性明察秋毫、入木三分、见微知著。抓住事物的本质 和发展趋向。如图4-5是推销女用香水。画面中的尺和 剪刀，表面上与香水风马牛不相及，而实质上则表示 量体、裁衣，香 水香味如为女士量 身定制一般。 图4-5网页设计与制作 94.2 网页设计中的创意思维八思维表达的流畅性任何一件作品要想完整、准确、高效的表现出来，思 维的连贯性是非常必要的。流畅性是对思维速度和效率 的综合评价。如图4-6画面中色彩的呼应

5、，排版的承接都 为思维的连续表达创 造了条件。 影响思维流畅性的因素：1.知识储备2.思维的敏锐度图4-6网页设计与制作 104.3 网页设计的创意方法 创意思维为构筑优美网页绘 制了设计蓝图,而创意方法则在 蓝图的基础上对“大厦”进行装 饰. 只有经过装饰的网页能使主题表 现的更生动有趣，更具有审美享 受。因而德国设计师霍戈尔.马 蒂斯把创意手段称为“视觉修饰 ”。一. 联想与想象联想即由A事物想到B事物的心理过程。如图4-7由喜庆的烟花图4-7网页设计与制作 114.2 网页设计中的创意思维构成威严的雄师，雄师是中国古代千年文化的象征。人 们一看到雄师也自然会联想到中华民族。联想的种类：虚

6、实联想、接近联想、类似联想、对比联 想、因果联想创意的联想方式：形体联想（图4-8 4-9）、材料联想（ 图4-10）、功能联想（图4-11） 图4-8图4-11图4-10图4-9网页设计与制作 124.3 网页设计的创意方法二. 比喻与拟人比喻是把要表达的内容作为本体，通过相关联的喻 体去表现内容的本质特征。要求：比体与本体之间要求相类似的特征。 比喻的种类：明喻、暗喻、借喻比拟。分为两种，拟人或拟物。 比拟离不开联想和想象，其效果使网页中内容更形 象、生动，从而增强感染力，比拟可以让静态变得生 动起来，让呆板的变得有生机活力，让抽象的形象变 得具体，从而增加作品的艺术魅力。 网页设计与制作

7、 134.3 网页设计的创意方法三. 夸张与变形夸张就是把作品中所宣传对象的特征、性质特意放大 或渲染，突出自然形态中最本质、最典型的部分，使主 体特征更加鲜明突出。变形手法在实际运用中的表现方式：拉伸、压缩、扭曲、畸变或将某一部分突出渲染。 四. 借代不直接说出要说的人或事物，而是借与说的人或事物 有密切、象征关系的其它某些事物来代替说明的一种修 辞方法。 网页设计与制作 144.3 网页设计的创意方法图4-12图4-13网页设计与制作 154.3 网页设计的创意方法五. 幽默幽默的手法优点是抓住人或事物的某些特征，运用喜 剧性的手法造就一种耐人寻味引人发笑的幽默意境，撞击 浏览者的心灵。

8、六. 象征用具体的事物表现某种特殊意境，是对事物原型的延 伸,是超越性的存在。 七. 对比把两种不同事物或同一种事物的不同方面放在一起， 相互比较，运用对比使对立事物的矛盾突出揭示本质， 给人以深刻的启示，留下深刻的印象。 网页设计与制作 164.4 网页创意设计中的基本要素 色彩图像文字网页设计与制作 174.4.1 网页中的文字在网页中,字体往往占据了很大的空间和页面,单一形 态大小、颜色的字体，虽能传递信息，但不免让人们感 到疲劳乏味。 一. 字体的设计方法：根据文字内容的属性及网站的主题可以适当的作如 下化。1. 改变文字大小、比例人们已经习惯正常的视觉大小,突然间的变化会产生新 的视

9、觉感受,产生重新审视的兴趣。2. 改变字体形态局部改变 整体改变网页设计与制作 183.4.1 网页中的文字措施:拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗细变化。3. 文字的三维效果真实的空间：眼睛看得见，手能摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。 4. 色彩的改变色相、纯度、明度5. 机理及质地网页设计与制作 194.4.1 网页中的文字纹理的改变及不同质感效果6. 置换及同构将文字中部分笔画用实物、图形、符号、色块等替换 ，或利用文字外形与某一事物的相似点进行变化。二. 文字的组合方法与形式 1.字体的大小组合将大小不等的文字

10、放到一个平面上进行组合，这样大 的文字相当于一个图形，而小的文字就成为可供阅读的 文字，或将小的文字编排成图形而大的图形成为主要的 文字网页设计与制作 204.4.1 网页中的文字2. 汉字与拉丁字母的组合如：“HONG KONG”与“喜”字的组合。 3. 汉字与具象形体的组合如：“永久”牌自行车标志图4-14,“ 胖子”服饰。 4.文字组合的处理手段 (1). 添加法根据文字内容、笔画的多少进行添加文字的组 合因素。 A. 添加与内容相关的文字 B. 添加与寓意相关的图形图4-14网页设计与制作 21(2). 重叠法将文字组合因素重叠为一体，产生富有层次的效果。 (3). 删除法在不影响识别

11、的前提下将某些笔画删除。 (4). 连笔法将文字组合 因素产生连贯的 整体感，可将两 个以上的文字笔 画连起来。如图 4-15图4-15网页设计与制作 224.4.1 网页中的文字（5）. 适形法将文字组合因素适合在一个图形内，产生适合图形的 效果。 （6）. 共用法将所设计内容的两个以上的文字笔画偏旁部首共用， 产生你中有我我中有你的视觉趣味。网页设计与制作 234.4.1 网页中的文字(7). 虚实形共用实为笔画，虚为背景。利用实形周围空底显示字的形 产生虚实相间的视觉效果。 (8). 几何形利用不同的几何形状构成文字,给人以自由和轻松感 ，现代感强 5. 文字编排的形式:A. 竖排式B.

12、 横排式C. 斜排式D. 曲线式网页设计与制作 244.4.1 网页中的文字E. 渐变式 运用文字字体大小产生渐变的效果。 F. 重叠式 由句子重叠体现构成图形。 G. 分离式拉大字与字之间距离，形成点壮效果。 (2). 文字的头尾编排形式A.齐头散尾式B.散头齐尾式C.齐头齐尾式D.中轴分离式网页设计与制作 254.4.1 网页中的文字文字排列时从中间向两边分开,突出中间的垂直空间 。 E.分插式行与行之间的关系上、下、左、右曲直交叉，长短 参差、错落地排列。 F.自由式行与行不规则地排列，形成繁杂的视觉效果，其阅 读功能减弱，作为背景图形用。(3).图形化的文字编排效果运用大量的文字组成平

13、面的或立体的图形，文字与图 形的结合形成了有趣的、有视觉内涵的编排形式。 网页设计与制作 264.4.2 网页中的图像 图形是一种视觉信息传递媒介，较符号文字在传递信 息上的优势：易识别、不受地域、国度、知识体系等众 多因素的影响。图形图象往往来源于现实世界的影像照片，在造型规 律上有很强的客观制约性。所以设计师在对网页优化时 应对图片作二次处理、加工，而处理时应从以下方面入 手。 图形图像的基本表现技巧： 一. 面积与视角图像在网页中所占比例的大小直接影响整个页面的视 觉效果和情感表达。面积大的图像在画面中占的份量重 ，表达情感直接。容易吸引浏览者的注意。面积小的图 像通常在页面中作点缀和呼

14、应，表达情感含蓄，给人网页设计与制作 274.4.2 网页中的图像精巧细致的感觉。 1.平直的视角 给人一种平稳、安定、规矩的感觉。 2.非常规的视角 如：倒置、旋转、仰视、俯视 增强画面动感，更具强烈的视觉冲击。 二.局部与特写对于整体的图像局部与特写能让视线更加集中，这种手 法有点到为止，意犹未尽的感觉。局部放大，重点表现这 一部分，称为特写。特写能对图像产生瞬间的凝视，引发 浏览者的兴趣点。图4-16为突出本款车的最新性能，而将 车创新的部位放大，以特写的形式展现。起到更有力的宣 传网页设计与制作 284.4.2 网页中的图像三.合成与组合效果。图4-16网页设计与制作 294.4.2

15、网页中的图像图像的合成是指用计算机将多幅图片的不同内容有选 择的合成一个图像，合成后的图像传达更丰富的信息， 能更集中的体现创意。图像的重要程度可以因面积、摆放位置、组合方式的 不同而有所不同。四.虚实和影调 图像的虚实对比能够产生空间感，实的物体感觉近， 虚的物体感觉远。五.退底与轮廓图像的退底是仅保留所选图像，而将沿图像边缘的背 景去掉，退底后的形象的外轮廓成自由形状，具体清晰 分明的视觉形态，显得灵活自如。 网页设计与制作 304.4.3网页设计中色彩的属性及其应用 设计精良的网站总有其色调构成的总体倾向,以一种颜 色或几种临近颜色为主导,使全呈现在某种和谐、统一的 色彩倾向，如同人穿衣

16、服。要想恰如其分的表现网页中 的内容，在竞争对手脱颖而出的，信息空间的构造也需 要恰如其分的包装和表达。 一. 与网站风格色彩是网页设计中很难把握的重要方面，是确立网站 风格的前提，网站色彩的倾向，决定着网站给浏览者的 第一印象。如：活泼、庄重、雅致（如图4-17）或热烈。 二. 色彩原理“色彩是破碎了的光，太阳的光与地球相撞，破碎分 散，因而使整个地球形成美丽的色彩。”网页设计与制作 314.4.3网页设计中色彩的属性及其应用图4-17网页设计与制作 324.4.3网页设计中色彩的属性及其应用1. 色彩的三要素明度、色相和饱和度构成色彩的三要素。自然界中的 颜色可以分为非彩色和彩色两大类。非彩色指黑色、白 色和各种深浅不一的灰色，而其它所有的颜色均属于彩 色，任何一种色彩都具有明度、纯度、饱和度三大属性 。(1). 明度明度指色彩的明暗程度。(2). 色相色相指色彩的相貌。如：红、黄、蓝、绿等。(3). 纯度纯度指色彩的纯净程度，纯度越高，色相感越强。网页设计与制作 33色