网站美工设计基础实训报告.docx

1、网站美工设计基础实训报告网站美工设计基础实训报告 学生姓名： 学生班级： 学生学号： 2007年11月实训1 对21世纪网页设计的审美转达的认识实训目的提高学生对网页设计的认识，加深理解网站在当今社会的重要地位。实训内容完成2000字左右的文字稿。实训要求教师指导1学时，学生课后自学8学时或以上。实 训 过 程 记 录步骤简述：网页把各种信息以最快捷、方便的方式传达给受众。人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，这是远远不够的！要考虑如何受众能更多的和更有效率的接收网页上的信息，从而使他们对给网站留下很好的印象，那就更能促进自己网站的运作。在这种标准

2、的要求下，逐步产生了审美的需求。这需要从审美的方面入手，结合使用方便的要求，就能制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。同时提升网站的形象。运用一些平面设计中美的基本形式到网页中去就能是网页更加富有美感，例如将平面设计中的节奏与韵律和骨格的形式溶入到网页中，这样会使内容繁多的页面更加有条理，也会是人浏览起来主次分明。当然这种美首先建立在页面的内容充实，而且实用，一个内容空洞无物的网页既使做得再漂亮也不会吸引人，顶多赢得几声赞叹，没有任何的用处。没有实用性的东西是不会具有生命力的。要想将页面做的更漂亮，就要求设计师要用较好的审美方面的素质，同时要有丰富的平面设计的

3、经验。这样才能在设计时驾轻就熟。由于网页的从无到有，从满足基本的功能需要到追求美的较为高层次的需要，这是一个循序渐进的过程。这使人不由得想起工业革命前夕，很多现代的产品那时候都没有，没有现成的模样可以参照，产品的设计都是满足基本的功能需要出发，所以做出来的产品非常粗糙，冷冰冰的，毫无生气。由于商业竞争和工业化大生产的结果，使得人们不断的改进产品的功能， 更为重要的是改进产品的外观，是产品更符合美的需要和使用方便。从而使今天货架上出现了琳琅满目的漂亮的产品。我想网页同样也是如此，在满足了基本的功能的要求之后，为了突出自己的特色，突出自己的优势，必须从审美上入手。而目前很多国内网站的现状是什么样子

4、的呢？经常上网的网友可能会有所体会。目前的网页存在着诸多的不足，以下简单的分析一下，希望能从中得到一些启示。随后我们再为大家介绍一些网页设计的审美法则。第一个可以用一个字来形容，那就是“塞”。这是很多的网页都具有的特点，它将各种信息诸如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范化，条理化，更谈不上艺术处理了。导致浏览时会遇到很多的不方便，主要就是页面五花八门，不分主次，没有很好的归类，整体一个大的杂烩。让人难以找到需要的东西。 第二也可用一个字“花”来形容。这类网站也有不少，显然这是很多不懂设计的人来制作的。比较多是他们把页面做的很花哨，但是非常不实用，例如采用很深的带有

5、花哨图案的图片作为背景，严重干扰了浏览，获取信息很困难。同时有些还采用了颜色各异，风格不同的图片、文字、动画。使页面五彩缤纷。没有整体感觉，尽管有些页面内容不多，但是浏览起来仍然特别困难。这种过度的包装甚至不如不加任何装饰的页面。不加装饰最起码不会损害其基本的功能的需求。所以这种网页属于粗制滥造的次品，是对自己的受众不负责任的表现。或许他们的初衷是好的，就是想把自己的页面做的漂亮，结果却是适得其反。第三个现在网页设计中的误区就是千篇一律，缺乏自己的特色。当我们打开电脑，上网一看，好像哪个网站都是一样的。从标题的放置，按钮的编排到动画的采用都是如此。用色时随心所欲，只要能区分开文本和背景就达到目

6、的。造成这种原因就是网页设计师本身的原因，他们没有充分的利用自己的知识，分析自己网站的优势，发挥自己的网站的特点，而是采用的走捷径的方式，就是用大众化的方法去做，做起来当然很容易了，但是失去了自己特点的网页就像流水线上下来的产品，好像随便看哪一个都一样，这样就不能起到网页设计的目的。至少不能算设计。这也是对自己的 用户不负责任的表现。当然这里不是片面的唯美主义，不能只是看中页面的漂亮而不顾受众的使用的不方便。例如有些网页将按钮溶入到页面的图片中去，倒是比较漂亮了，整体感强了。但是受众有时候却找不到按钮，造成困难。这同样是不可取的。 还有一类站点的网页是一种纯技术化的网页。 在这种网页上，充斥了

7、许多的纯为了炫耀技术的东西，如多个风格迥异的动画（缺乏美感甚至是与主体无关的动画），还有大量的利用Javascript和动态HTML的技术，然而始终没有把握住整体这个中心，造成页面的混乱。这与第一种有些类似，但是这种网页很多是技术上的高手。但是结果给人只有羡慕技术之外毫无收获。这样的网页也是不适合于需要的，是网页设计上的失败，更为严重的是大量的采用这种技术或者动画，造成浏览上由于受带宽的限制而非常的慢。所以不管是从功能上还是从形式上都是不可取的。综合以上的分析，可以找出很多目前网页设计上设计的不足，特别是审美上的不足，照顾网页功能上的需要的前提下，需要有针对性的采用一些美的形式。来使网页做得更

8、加有生气，更吸引人。 那么加入美的因素，也要遵循一定的形式美法则。这种美的形式有很多种，合理的利用，可以给网页增光添彩。赏心悦目。是受众浏览起来更加有效率，有力的提升网站的形象。下面逐一分析这些美的形式，并考虑如何将它们融入到网页之中，以解决以上遇到的很多网页设计上的审美不足的问题。从古至今，很多艺术家和学者提出了各种关于形式美的规律，很多经得起推敲的作品都是遵循这些规律去创作，以期完成其审美价值的。因此，在网页设计过程中，设计者必须去研究，掌握并主动地、有意识的运用这些规律，才能创作出好的作品。当然，不同时代有不同的设计审美观念，也有不同的美学特征。在信息特别发达的今天，竞争日趋激烈，给人们

9、带来了新的审美需求，对于网页设计，客观上将其推向了更高层的表现境界，这是网页设计的必然趋势。去追求一种和谐的单纯，即追求清晰的视觉冲击力和巨大的张力，我们应该把美的形式规律同现代的网页设计的具体问题相结合起来。下面具体谈谈。先谈谈变化和统一。变化是各个组成部分之间的区别，统一是个部分之间的内在关联。完美的图形 设计，形式上要丰富有条理（即对图形的大小、方圆、动静、强弱等方面的处理；组织上要有秩序而不单调，不混乱。即图形的主从关系，叙事关系，呼应关系等方面的处理）。在图形设计中运用变化与统一的规律，是处理形象和组织的对立统一过程，那么在网页设计中同样要恰当的利用这种规律，在我们把大量的信息塞如到

10、网页上去的时候，考虑怎样把它们合理的用统一的方式来排布，使整体感强同时又要有变化，这样使页面更丰富，更有生气，看起来就不感到枯燥，很多网站诸如体育的网站，排布的新闻从上到下几十条，没有一点变化，显得单调而乏味，就是违反这种形式美的规律，所以要充分的运用变化来改进它，从排布的形式上或者是颜色上都可以。再看条理与反复，其中反复是有规律的连续与延伸，有组织的变化与扩展并加以归纳，概括而富于条理化，。条理与反复的原则是图形构成整体的秩序美的基础，是变化中的统一，也是运动发展中求得协调一致的表现方式，由他可以演化出多种多样的图形变化。这种在很多较为优秀的网站中运用较多，同时应用得也比较自如，这时由于很多

11、网站丰富，信息含量大，不得不运用一定的方式将其条理化，同时又在一定程度上加以归纳后重复的利用，使网页较为整齐，脉络清楚，读起来也能着重点。当然，内容较少的网站同样需要条理与反复，以达到更为富有变化和清晰的视觉效果。如文字的合理编排，图片和文字的结合。如何呼应等等。对比和调和。对比是指在质或量方面相互差异甚大的两个要素同时配置在一起时，两者之间有相互作用的性格，更加令人感到彼此强烈地相互衬托。对比是为了使主题画面具有变化和生气而运用的方法。而调和是构成美的对象在部分与部分之间的相互关系。它无论是在质的方面还是量的方面都没有矛盾，各部分所传达给人的感受和意念之间不是相互分离或排斥，而是一个部分多样

12、性的整体统一来表现美的状态。那么在网页设计中，如何利用它来达到好的效果呢？首先合理的利用对比的因素，例如文本的排布、字体的大小、粗细、颜色，图片的宽窄、比例的反差、透明以及位置的放置等等。均齐与平衡，这是动力与中心两者矛盾的统一所产生的形态，是设计中求得中心稳定的两种组织形式，均齐的组织方法是无论在哪一个中轴和中心支点各方面配置同形同量的图形，都要求图形整体结构严谨，形态 安定整齐，平衡。实际上也是一句中轴和支点保持平衡，所不同的是配置的形为等量不等形，它没有一定的组织原则，只要能在形式结构上掌握好中心即可，它要求在形式上自然合理。所以均齐偏于静止的形式美感，而平衡却显得灵活多变，带有动感。在

13、网页设计中，在充分的考虑整体的页面上所有的图形、文字的基础上，如何比较整个页面上的组又两边的量与质？是一个设计师自身经验的积累。页面上的平衡是一个动态的平衡，因为页面上两边的配置不会总是一样的，即左边一个图右边就一个图，那是不多的。更多的时候是图和文字以及大块的颜色轻的图和小块的颜色重的图的平衡，以及与文本的疏密和大小的平衡，所以这是一种动态的平衡。只有通过不断的实践才能够在这方面驾轻就熟的运用。满足人们的视觉上的整体的平衡感。这也是人的心理因素的一种图形化的表现，当然不是一种片面的追求静止的对称，那时僵硬的、不生动的，同样会失去美感。如何看待网页上的留空？并非要把整个页面塞满了才不觉得空，我

14、想只要合理的安排，使页面达到平衡，既使在一边的部分大面积留空，同样不会让人感到空，相反这样会给人留下广阔的思考空间，给人回味。再谈谈节奏与韵律。运动中的事物都具有节奏和韵律的形式规律，节奏与韵律本来在音乐、舞蹈、诗歌及电影等具有时间形式的艺术中通过视觉和听觉来表现的，节奏本身没有形象特征。只是表明事物在运动中的快慢、强弱以及间歇的节拍。节奏可以说是条理与反复的发展。它带有机械的秩序美，韵律是每个节拍间运动所表现的轨迹，它带有形象特征。在具体的网页设计的运用中，按钮的编排就经常会遇到这个问题，做得好的按钮能够使排在一起的诸多按钮富有音乐般的美感，同时丝毫不损其实用性，可惜现在见到类似的太少了，因

15、为需要不光是从形状上，而且要从整体的色泽、大小等综合方面入手。上面仅仅探讨了几个非常贴近网页制作的形式美的规则，以及在网页中的运用。如何解决网页中的独特性的问题呢?我想这不仅仅是审美的形式问题,主要要站在网站本身的高点上来考虑，综合自身的整体形象，如网站的标志、标准字体、标准色等等，因为这些方面就是自己与众不同之处，如果将这些经独特设计的关于自身经营理念的东西融合到网页设计中去，怎会与人雷同呢？随便打个比方，假如运用自己的网站的标准色作为网页的基调，不光是能做到独特，而且对于网站本身的形象是很有好处的，就如我们经常见到的IBM的蓝，可口可乐的红白两色。这都是苦心的营造的企业形象的重要组成部分。

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

17、深对色彩在现实生活中重要性的理解。实训内容谈网页与平面构成、色彩、版面设计关系的理解和认识。完成2000字左右的文字稿。实训要求教师指导1学时，学生课后自学8学时或以上。实 训 过 程 记 录步骤简述：网页的平面构成,就是一种造型概念,也是现代造型设计语言.其中含义就是将 点 线 面 色 等各种单元组成一个新的单元,并赋予视觉化的、力学的概念。其中，立体构成是厚度造型，平面构成是以轮廓造型，是将不同的基本形态按一定的规则在平面上组合图案。平面构成元素，包括概念元素、视觉元素和关系元素，是指造型之前，仅在意念中感觉到的点、线、面、体的概念，其作用是促使视觉元素的形成。视觉元素，是把概念元素见之于

18、画面，是通过看得见的形状大小 色彩 位置 方向 肌理等被称为基本形的具体形象加以体现的。关系元素，是指视觉元素（即基本形）的组合形式，是通过框架、骨骼以及空间 空心 虚实 有无等因素决定的；其中最主要的因素是骨骼，是可见的，其他如空间，则是以感觉去体现。平面构成的框架 一切用于平面构成中的可见的视觉元素，通称形象，基本形态即是最基本的形象；限制和管辖基本形在平面构成中的各种不同的编排，即是骨骼。基本形有“正”有“负”，构成中亦可互相转化；基本形相遇时，又可以产生分离 接触 复叠 透叠 联合 减缺 差叠 重合等几种关系。骨骼可以分为：视觉上起作用的有作用骨骼和在视觉上不起作用的无作用骨骼，以及有

19、规律性骨骼（即重复近似 渐变 发射等骨骼）和非规律性骨骼（密集 对比等骨骼）。基本形与骨骼的上述这些特性，将相互影响 互相制约 互相作用而构成千变万化的构成图案。上面是平面构成的简单概念和介绍但是平面设计中除了平面构成以外还有另外一个不可或缺的理论知识，就是色彩构成，色彩构成也是平面设计的必须基本知识之一，其实配色方面也是很多人的问题，有人会认为色彩的话只要自己觉得舒服就好了，我个人觉得舒服其实只是感觉中的一种，而色彩可以传达的不单单是让人舒服而已，简单来说色彩是一种语言是一种信息 是一种可以通过眼睛传达到人脑中直接刺激人的大脑而对作品产生的一种对作品的共鸣。色彩有冷暖 有远近 有大小 甚至是

20、可以直接传达信号给观看者。就象是埃及的图腾中红色就是太阳，生活中紫色的花朵看了就有给人一种幸福的感觉，土黄色一看就很古典等等等但同时在色彩构成中不同的行业对色彩运用也有不同的感受，还有就是不同的行业对色彩使用的要求也有不同想网页设计和书报设计是不同的，网页设计在网页上的色彩除了符合自己风格以外还有就是不用考虑印刷方面的问题。因为在书报设计中要考虑印刷方法，和印刷出来的效果。色彩是很微妙的东西，它们本身的独特表现力可以用来产生出一种刺激人们大脑中对某种形式存在的物体的共鸣，展现出其对待生活中的新的看法与态度，扩大了我们创作的想象空间，赋予了创作的新的不定性。其实在一个具体的设计稿样上，形态的组织

21、 色彩的构成等都是为了获得一种整体的视觉效果，在我们抛开其他形态组织不谈，先简单的分歧一下设计稿件上在色彩上如何是形成一个同意和谐的整体的。网页的版面构成肩负着双重使命：一是作为信息发布的重要媒介，二是它要让读者通过版面的阅读产生美的遐想与共鸣，让设计者的观点与涵养能进入读者的心灵。以往的媒体如报刊，只有文字和图片而没有声音；广播只有声音却没有文字和图像；电视是拥有声音、图像、文字的媒体，但观者只有被动地接受，而不能自由地有选择地观看，也不能进一步查看详细资料，只有网页可以做到上述的一切，观者的自由度像报纸一样，可自由选择喜爱的内容，同时又可以听、看更多的声音和视频信息，以对被查看事物有更全面

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

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

24、持清晰就是版面构成中视觉表达的最精华概括。除了以上的构成关系，还应注意网站的内容，人性化的布局。网站的包装绝不是从某单方面就可以解决的。一个受欢迎的网站，必将是一个给人印象深刻，在各方面都设计合理的网站。实训日期： 阶段性考核一考核内容网页与平面构成、色彩、版面设计的关系（2000字左右文字稿）考 核 过 程 记 录步骤简述：网页设计和平面设计是密不可分的，平面设计可以说是网页设计的基础之一。通常平面设计是单幅或有限篇幅的作品，而网页设计在考虑其单页美观性的同时，也要考虑网站的整体风格，网页设计并不是只给一部分人看的，它要尽可能多的吸引注意力，平面构成主要是运用点、线、面和律动组成结构严谨，富

25、有极强的抽象性和形式感。又具有多方面的实用特点和创造力的设计作品，与具象表现形式相比较，它更具有广泛性。是在实际设计运用之前必须要学会运用的视觉的艺术语言，进行视觉方面的创造，了解造型观念，训练培养各种熟练的构成技巧和表现方法，培养审美观及美的修养和感觉，提高创作活动和造型能力，活跃构思。 网页设计”的对象是文字、图片、动画、按钮等。版面的色彩设计更能快捷地营造整体版面的情绪化气氛体现版面文字的意图,在版面中,色彩作为给人第一视觉印象的艺术魅力更为深远.常常具有先声夺人的力量,色彩不仅仅是一种美学符号,同时还是情感化的编辑语言,色彩作为第一视觉语言，具有影响心理，唤起人们感情的作用，左右我门的

26、感情和行动。 1、可以传达意念，表达某种确切的含义，如交通灯上的红色表示停止，绿色表示放行的意念，已成为全世界所了解和承认的一种视觉语言。 2、色彩有明显的影响情绪的作用。不同的色彩可以表现不同的情感。 3、色彩有使人增强识别记忆的作用。如富士彩色胶卷的绿色，柯达的彩色胶卷的黄色则成为消费者识别、记忆商品的标准色。 4、彩色画面更具有真实感，充分地表现对象的色彩、质感、量感。 5、色彩能增强画面的感染力。色彩远较黑、白和灰色更刺激视觉神经。具有良好色彩构成的设计作品，能强烈地吸引消费者的注意力，加强艺术魅力考核成绩（满分10分）： 指导教师签名： 考核日期： 实训3 重复、渐变、发射的构成练习

27、实训目的反复调整三个基本构成的骨架结构和设计效果，通过动手实践，体会手绘的感觉。实训内容分别作重复、渐变、发射三个构成的练习。实训要求手绘。（30CM30CM）在白卡纸上（黑白稿）作涂色练习。教师指导3学时或以上。学生课后练习40以上学时。（选2种或2种以上形式进行综合练习）实 训 过 程 记 录步骤简述：1、重复：在同一设计中，相同的形象出现两次或两次以上称为：重复。重复是平面设计中比较常用的手法、借助形象反复出现，强化对形象的印象，用以加强人们的视觉效果，形成相应的节奏规律，使画面同一。实训日期： 实训4 特异、肌理、图与底、对比、韵律等平面构成的练习实训目的通过动手实践，体会手绘的感觉及

28、学习手绘的技法。实训内容分别作特异、肌理、图与底、对比、韵律等构成的练习。实训要求手绘。任选一种构成，在白卡纸（30CM30CM）上（黑白稿）作设计练习。教师指导3学时，学生课后练习8学时或以上。实 训 过 程 记 录步骤简述：实训日期： 阶段性考核二考核内容掌握重复、渐变、发射的构成练习（选2种或2种以上形式进行综合练习）考 核 过 程 记 录步骤简述：考核成绩（满分10分）： 指导教师签名： 考核日期： 实训5 设计三幅平面构成实训目的通过动手实践，体会手绘的感觉及学习手绘的技法。实训内容运用基本形的各种排列，自行设计三幅平面构成作品。实训要求有条件的地方可上机操作。教师指导3学时，学生课

29、后练习40学时以上。（选2种或2种以上形式进行综合练习）实 训 过 程 记 录步骤简述：实训日期： 阶段性考核三考核内容设计三幅平面构成（选2种或2种以上形式进行综合练习）考 核 过 程 记 录步骤简述：考核成绩（满分15分）： 指导教师签名： 考核日期： 实训6 绘制明度渐变卡实训目的学会色彩调配知识、掌握涂色以及调色方法。实训内容绘制明度渐变卡，完成1幅在白卡纸上（30CM30CM）的手绘作业涂色（用水粉色）练习。实训要求通过学习，掌握色彩调配知识、涂色以及调色方法。教师指导1学时，学生课后8学时或以上。实 训 过 程 记 录步骤简述：实训日期： 实训7 绘制纯度渐变卡实训目的学会色彩调配

30、知识、掌握涂色以及色彩调配方法。实训内容绘制纯度渐变卡，完成1幅在白卡纸上（30CM30CM）的手绘作业涂色（用水粉色）练习。实训要求通过学习，学会色彩搭配知识、掌握涂色以及色彩调配方法。教师指导1学时，学生课后8学时或以上。实 训 过 程 记 录步骤简述： 实训日期： 阶段性考核四考核内容绘制明度渐变卡考 核 过 程 记 录步骤简述：考核成绩（满分10分）： 指导教师签名： 考核日期： 实训8 上机完成8幅作业练习实训目的学会运用上机操作的方法进行色彩搭配的练习、掌握涂色以及色彩调配方法，作平面色彩构成练习。实训内容手绘。完成8幅（30cm30cm）的作业练习。有条件的地方可上机操作，完成8

31、幅（16cm16cm）的作业练习。（可选择完成）实训要求（1）作标准色相环pccs色相环。（2）色彩混合作间色、复色的调色混合练习（3）原色对比（4）间色对比（5）冷暖色相对比（6）明度对比（7）纯度对比（8）色彩单项调和（9）色彩双项调和（10）多色调和（11）改变面积分割形状形成调和（12）色彩与四季的联想春、夏、秋、冬（形象任意设计）。教师指导6学时，学生课后40学时或以上。实 训 过 程 记 录步骤简述：指导教师签名： 实训日期： 阶段性考核五考核内容上机完成8幅作业练习（可选择完成）考 核 过 程 记 录步骤简述：考核成绩（满分10分）： 指导教师签名： 考核日期： 实训9 网页版式设计训练实训目的通过对优秀网页设计的赏析，学生可以先借鉴后创新；掌握版式设计的基本流程；掌握网页版式设计的艺术手法。实训内容设计网站主页实训要求1、 自拟网站主题，进行网页版式设计与创意练习2、 设计24个网页，分析版式类型，教师指导7学时，学生课后要进行26学时以上的操作练习。实 训 过 程 记 录步骤简述： 1、 骨格型：骨格有竖向通栏。双栏，三栏，四栏和横向的通栏，双栏，三栏和四栏等，一般以