网站美工设计基础形成性考核册中央电大

1、实训 1 对 21 世纪网页设计的审美转达的认识 步骤简述： 网页把各种信息以最快捷、方便的方式传达给受众。人们对美的追求是不断深入的，网页设计同样如此。 网页不光是把各种东西放上去，能看就行，这是远远不够的！要考虑如何受众能更多的和更有效率的接收 网页上的信息，从而使他们对给网站留下很好的印象，那就更能促进自己网站的运作。在这种标准的要求 下，逐步产生了审美的需求。这需要从审美的方面入手，结合使用方便的要求，就能制作出清晰、整体性 好的页面。使人浏览起来心情愉快，接收信息也会更加容易。同时提升网站的形象 运用一些平面设计中美的基本形式到网页中去就能是网页更加富有美感，例如将平面设计中的节奏与

2、 韵律和骨格的形式溶入到网页中，这样会使内容繁多的页面更加有条理，也会是人浏览起来主次分明。当 然这种美首先建立在页面的内容充实，而且实用，一个内容空洞无物的网页既使做得再漂亮也不会吸引 人，顶多赢得几声赞叹，没有任何的用处。没有实用性的东西是不会具有生命力的。要想将页面做的更漂 亮，就要求设计师要用较好的审美方面的素质，同时要有丰富的平面设计的经验。这样才能在设计时驾轻 就熟。 在满足了基本的功能的要求之后，为了突出自己的特色，突出自己的优势，必须从审美上入手。而目前很 多国内网站的现状是什么样子的呢？经常上网的网友可能会有所体会。目前的网页存在着诸多的不足，以 下简单的分析一下，希望能从中

3、得到一些启示。随后我们再为大家介绍一些网页设计的审美法则。 第一个可以用一个字来形容，那就是 “塞”。 第二也可用一个字 “花”来形容。 第三个现在网页设计中的误区就是千篇一律，缺乏自己的特色。 还有一类站点的网页是一种纯技术化的网页。 综合以上的分析，可以找出很多目前网页设计上设计的不足，特别是审美上的不足，照顾网页功能上 的 需 要 的 前提 下 ，需 要 有 针对 性 的 采 用一 些 美的 形 式 。来 使 网 页 做得 更 加有 生 气 ，更 吸 引人。 那么加入美的因素，也要遵循一定的形式美法则。这种美的形式有很多种，合理的利用，可以给网页 增光添彩。赏心悦目。是受众浏览起来更加有

4、效率，有力的提升网站的形象。下面逐一分析这些美的形 式，并考虑如何将它们融入到网页之中，以解决以上遇到的很多网页设计上的审美不足的问题。 从古至今，很多艺术家和学者提出了各种关于形式美的规律，很多经得起推敲的作品都是遵循这些规 律去创作，以期完成其审美价值的。因此，在网页设计过程中，设计者必须去研究，掌握并主动地、有意 识的运用这些规律，才能创作出好的作品。当然，不同时代有不同的设计审美观念，也有不同的美学特 征。在信息特别发达的今天，竞争日趋激烈，给人们带来了新的审美需求，对于网页设计，客观上将其推 向了更高层的表现境界，这是网页设计的必然趋势。去追求一种和谐的单纯，即追求清晰的视觉冲击力和

5、 巨大的张力，我们应该把“变化和统一、条理与反复、对比和调和、均齐与平衡、节奏与韵律”等美的形 式规律同现代的网页设计的具体问题相结合起来。 如何解决网页中的独特性的问题呢 ?我想这不仅仅是审美的形式问题 , 主要要站在网站本身的高点上来考 虑，综合自身的整体形象，如网站的标志、标准字体、标准色等等，因为这些方面就是自己与众不同之 处，如果将这些经独特设计的关于自身经营理念的东西融合到网页设计中去，怎会与人雷同呢？随便打个 比方，假如运用自己的网站的标准色作为网页的基调，不光是能做到独特，而且对于网站本身的形象是很 有好处的，就如我们经常见到的 IBM 的蓝，可口可乐的红白两色。这都是苦心的营

6、造的企业形象的重要 组成部分。网站要想树立自己的独特的形象，必须从这些方面入手，把网页上的各种信息的表达统一到网 站综合形象的整体里面来考虑。就会给人留下深刻的独特的形象 作为形式美的法则，随着时代的不同而不断发展进步，特别在生活节奏如次快的互联网时代，由于追 求的目标的变化，人们的审美观念也在不断的变化，但是美的本质是一样的，同时随着技术的发展，很多 的目前不容易实现的审美形式也逐渐被克服，突破带宽的瓶颈。就会给网页设计的自如发展一片新的天 地。我们对美的追求是永不停止的，作为设计师，也要不断的提高自己的素质，才能做出更好的富于美感 的网页来。 实训 2 网页与平面构成、色彩、版面设计的关系

7、 步骤简述： 网页的平面构成 ,就是一种造型概念 ,也是现代造型设计语言 . 其中含义就是将 点 线 面 色 等各种单元 组成一个新的单元 ,并赋予视觉化的、力学的概念。其中，立体构成是厚度造型，平面构成是以轮廓造 型，是将不同的基本形态按一定的规则在平面上组合图案。 平面构成元素，包括概念元素、视觉元素和关系元素，是指造型之前，仅在意念中感觉到的点、线、 面、体的概念，其作用是促使视觉元素的形成。视觉元素，是把概念元素见之于画面，是通过看得见的形 状大小 色彩 位置 方向 肌理等被称为基本形的具体形象加以体现的。关系元素，是指视觉元素（即基本 形）的组合形式，是通过框架、骨骼以及空间 空心

8、虚实 有无等因素决定的；其中最主要的因素是骨骼， 是可见的，其他如空间，则是以感觉去体现。 平面构成的框架 一切用于平面构成中的可见的视觉元素，通称形象，基本形态即是最基本的形象； 限制和管辖基本形在平面构成中的各种不同的编排，即是骨骼。基本形有“正”有“负 ”，构成中亦可互相转 化；基本形相遇时，又可以产生分离 接触 复叠 透叠 联合 减缺 差叠 重合等几种关系。骨骼可以分为：视 觉上起作用的有作用骨骼和在视觉上不起作用的无作用骨骼，以及有规律性骨骼（即重复近似 渐变 发射 等骨骼）和非规律性骨骼（密集 对比等骨骼）。基本形与骨骼的上述这些特性，将相互影响互相制约 互 相作用而构成千变万化的

9、构成图案。 阶段性考核一 步骤简述： 上面是平面构成的简单概念和介绍但是平面设计中除了平面构成以外还有另外一个不可或缺的理论知 识，就是色彩构成，色彩构成也是平面设计的必须基本知识之一，其实配色方面也是很多人的问题，有人 会认为色彩的话只要自己觉得舒服就好了，我个人觉得舒服其实只是感觉中的一种，而色彩可以传达的不 单单是让人舒服而已，简单来说色彩是一种语言是一种信息 是一种可以通过眼睛传达到人脑中直接刺激 人的大脑而对作品产生的一种对作品的共鸣。 色彩有冷暖 有远近 有大小 甚至是可以直接传达信号给观看者。 就象是埃及的图腾中红色就是太阳，生活中紫色的花朵看了就有给人一种幸福的感觉，土黄色一看

10、就很古 典等等等 但同时在色彩构成中不同的行业对色彩运用也有不同的感受，还有就是不同的行业对色彩使用的要求 也有不同想网页设计和书报设计是不同的，网页设计在网页上的色彩除了符合自己风格以外还有就是不用 考虑印刷方面的问题。因为在书报设计中要考虑印刷方法，和印刷出来的效果。 色彩是很微妙的东西，它们本身的独特表现力可以用来产生出一种刺激人们大脑中对某种形式存在的 物体的共鸣，展现出其对待生活中的新的看法与态度，扩大了我们创作的想象空间，赋予了创作的新的不 定性。 其实在一个具体的设计稿样上，形态的组织 色彩的构成等都是为了获得一种整体的视觉效果，在我 们抛开其他形态组织不谈，先简单的分歧一下设计

11、稿件上在色彩上如何是形成一个同意和谐的整体的。 网页的版面构成肩负着双重使命：一是作为信息发布的重要媒介，二是它要让读者通过版面的阅读产 生美的遐想与共鸣，让设计者的观点与涵养能进入读者的心灵。 以往的媒体如报刊，只有文字和图片而没有声音；广播只有声音却没有文字和图像；电视是拥有声 音、图像、文字的媒体，但观者只有被动地接受，而不能自由地有选择地观看，也不能进一步查看详细资 料，只有网页可以做到上述的一切，观者的自由度像报纸一样，可自由选择喜爱的内容，同时又可以听、 看更多的声音和视频信息，以对被查看事物有更全面的了解。这种利用图像、音效和动画的版面构成形 式，必将使媒体视觉传播策略更加深入。

12、 版面构成离不开艺术表现。美的形式原理是规范形式美感的基本法则。它是通过重复与交错、节奏与韵 律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、力场与网格、变化与统一等形式 美构成法则来规划一个网页版面。用最简单的一句话来表达，构成就是将造型按视觉效应、视觉力学和精 神力学等原则组 成的，具备美好形态的造型。 构成形式里，有空间构成（平面构成和立体构成） 和时间 构成（静和动）。 在网页的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的 视觉，得到想要的效果。 版面构成实际上就是如何运用好点、线、面。不管版面的内容与形式如何复杂，但最终可以简化到点、 线、面上来

13、。网页页面中所有要素都可以归纳为点、线、面：一个字母、一个页码数、可以理解为一个 点；一行文字、一行空白，均可以理解为一条线；数行文字与一片空白，则可以理解为面。它们之间互相 依存，相互作用，组合出页面中各种各样的形态，构建成一个个千变万化的全新页面。对于网页的版面构 成，在设计上虽然可以借助电脑设计软件中的一些特殊技法使其丰富多样而又简洁明了，但归根究底是为 了让文字和内容更有可读性，让栏目划分更富于节奏感，是为内容服务的，所以如果当两者相矛盾时，应 该让版面构成服从内容。页面是让浏览者阅读和理解的，让浏览者在视觉上感到愉快，思维上保持清晰就 是版面构成中视觉表达的最精华概括。 除了以上的构

14、成关系，还应注意网站的内容，人性化的布局。网站的包装绝不是从某单方面就可以解 决的。一个受欢迎的网站，必将是一个给人印象深刻，在各方面都设计合理的网站。 实训 3 重复、渐变、发射的构成练习 步骤简述： 1、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 2、寻找参考资料和设计草图； 3、确定草图，用铅笔画构成练习的骨格； 4、用针笔过稿，上墨，修图，装裱完成。 实训 4 特异、肌理、图与底、对比、韵律等平面构成的练 习 步骤简述： 1、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 2、寻找参考资料和设计草图； 3、确定草图，用铅笔画构成练习的骨格（肌理构成需拓印或用其他方法在纸张上

15、制 造肌理效果）； 4、用针笔过稿，上墨，修图，装裱完成。 阶段性考核二 步骤简述： 1、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 2、寻找参考资料和设计草图； 3、确定草图，用铅笔画构成练习的骨格； 4、用针笔过稿，上墨，修图，装裱完成。 实训 5 设计三幅平面构成 步骤简述： 1、明确绘制平面构成作业任务； 2、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 3、寻找参考资料和设计草图； 4、确定草图，用铅笔画构成练习的骨格； 5、用针笔过稿，根据作业要求和构思稿上墨； 6、修图，装裱完成。 实训日期： 阶段性考核三 空 实训 6 绘制明度渐变卡 步骤简述： 1、明确绘制明度

16、渐变卡作业任务； 2、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 3、寻找参考资料和设计草图； 4、确定草图，用铅笔画构成练习的骨格； 5、调色，根据作业要求和构思稿上颜料； 6、修图，装裱完成。 实训 7 绘制纯度渐变卡 步骤简述： 1、明确绘制明度渐变卡作业任务； 2、准备工具（卡纸、水粉颜料、水粉笔、铅笔、尺子等）； 3、寻找参考资料和设计草图； 4、确定草图，用铅笔画构成练习的骨格； 5、调色，根据作业要求和构思稿上颜料； 6、修图，装裱完成。 阶段性考核四 步骤简述： 1、明确绘制明度渐变卡作业任务； 2、准备工具(卡纸、水粉颜料、水粉笔、铅笔、尺子等)； 3、寻找参考资料和

17、设计草图； 4、确定草图，用铅笔画构成练习的骨格； 5、调色，根据作业要求和构思稿上颜料； 6、修图，装裱完成。 实训8上机完成8幅作业练习 实训目的 学会运用上机操作的方法进行色彩搭配的练习、掌握涂色以及色彩调配 方法，作平面色彩构成练习。 实训内容 手绘。完成 8幅(30cmiX 30cm )的作业练习。有条件的地方可上机操 作，完成8幅(16cmx 16cm )的作业练习。(可选择完成) 实训要求 (I) 作标准色相环 pees色相环。 (2 )色彩混合作间色、复色的调色混合练习 (3 )原色对比 (4 )间色对比 (5)冷暖色相对比 (6 )明度对比 (7 )纯度对比 (8) 色彩单项

18、调和 (9) 色彩双项调和 (10 )多色调和 (II) 改变面积分割形状形成调和 (12 )色彩与四季的联想 一一春、夏、秋、冬(形象任意设计)。 教师指导6学时，学生课后40学时或以上。 实训过程记录 步骤简述: 指导教师签名: 实训日期： 阶段性考核五 考核内容 上机完成8幅作业练习（可选择完成） 考核过程记录 步骤简述： 考核成绩（满分10分）：指导教师签名：考核日期: 实训9网页版式设计训练 实训目的 通过对优秀网页设计的赏析，学生可以先借鉴后创新；掌握版式设计的 基本流程；掌握网页版式设计的艺术手法。 实训内容 设计网站主页 实训要求 1、自拟网站主题，进行网页版式设计与创意练习

19、2、 设计2 4个网页，分析版式类型，教师指导7学时，学生课后要进行 26学时以上的操作练习。 实训过程记录 步骤简述： 实训日期: 阶段性考核六 考核内容 网页版式设计训练 考核过程记录 考核成绩（满分15分）： 指导教师签名：考核日期: 实训10工具箱的基本应用 实训目的 提高学生手绘各种图形的能力，创建栩栩如生的几何图形。 实训内容 运用CorelDRAW 软件绘制图形。 实训要求 使用CorelDRAW 提供的最基本工具绘制几何图像，选择运用各种工具 绘制几何对象的案例进行讲解，教师指导2学时。学生课后上机操作练习4 学时以上。 实训过程记录 实训日期: 实训11对象的编辑操作 实训目

20、的 使学生能够灵活的展现出所要表达的图形效果。 实训内容 运用CorelDRAW软件对图形进行编辑操作。 实训要求 在创建了基本的对象轮廓后，使用各高级工具和命令调整对象的形状， 最终获得满意的效果。教师指导1学时，学生课后要参考相关实例进行上机 操作练习10学时以上。 实训过程记录 实训日期：实训12图像的填充效果 实训目的 通过相关工具和技巧的混合运用，绘制出各种图案填充效果，使作品不 仅局限于对象的简单叠加，而且具有五彩缤纷的渲染效果。 实训内容 运用CorelDRAW软件对图案进行填充操作。 实训要求 熟练掌握图案填充的技巧，使学生能够绘制出彩色的图画。教师指导 2 学时，学生课后要参考相关实例进行上机操作练习8学时以上。 实训过程记录 实训日期：实训13位图的应用与编辑 实训目的 学生可以不通过 Photoshop，就可以直接在 CorelDRAW中处理现成的素 材。 实训内容 运用Corel