搜索
河南林业职业学院网页美工教师：潘慧芝电话：15139975289Email:332877944@qq.com第1章网页美工概述1.1网络发展历程1.2传统美工与网页美工1.2.1传统美工分为卖场美工（手绘广告POP,POINTOFPURCHASE），游戏美工（游戏人物设定），影楼美工（婚纱照后期制作）1.2.2网页美工顾名思义，就是美化网站的视觉效果，更深层次的就是突出网站本身的内涵。比如简洁，干练，或者有活力。手绘广告游戏人物设定婚纱照后期制作1.3网页美工需要具备的能力网页设计也是平面设计的一方面，网页设计师完全可以运用平面设计中的审美观点进行设计，二者唯一不同的是动态与静态的区分，动态网页的制作是平面设计不能完全达到的，它是一种审美方式的延伸。所以平面设计的审美观点在网页设计上非常实用，如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美，这些都能在网页上显示出来，反映设计师超凡的审美能力。网页美工设计作品1、网——网络，设计者要对网络上的东西有一定的了解（如做什么样的网站，同行业的网页怎么样等），以做到知已知彼，否则设计者的作品就没有衡量的标准了。2、页——页面：就是设计者的排版水平。3、美——美术，审美观，这就要设计者对色彩，尤其是对色彩搭配有独到的见解。4、工——工具，干什么活都要有好的工具。在此意为所用到的软件，Photoshop,flash,fireworks,dreamweaver,3DMAX等。（MAYA）1.3网页美工需要具备的能力第3章网页色彩搭配3.1色彩构成原理3.1.1色彩形成：光源的照射，物体本身反射一定的色彩，环境与空间对物体色彩的影响。3.1.2色彩组成1.基本色:一个色环通常包括12种明显不同的颜色。2.三原色:三原色是能够按照一些数量规定合成其他任何一种颜色的基色。红、黄、蓝三原色也可以构成网页色彩（图3-2）3.近似色:是色相环中相类似的颜色（图3-3）4.补色:是色环中的直接位置相对的颜色（图3-4）5.暖色:由红色调组成。（图3-5）6.冷色:来自于蓝色色调。（图3-6）3.13色彩对比两种以上的色彩，以空间或时间关系相比较，表现出明显的差别，并产生比较作用，被称为色彩对比。1.色相对比因色相之间的差别形成对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。2.明度对比因明度之间的差别形成的对比。（柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度）。3.纯度对比一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比。3.2网页配色的原理网页中的色彩是人们对网站最直观的了解方式之一，也是网站统一风格设计的主要组成部分。芸芸众网站中，让浏览者记得的三两个站点，最深刻的就是网站的色彩，其中包括里面的色彩系列，色彩配合元素，整体色彩氛围等等。3.2.1色彩的基本知识任何色彩，皆具备三个基本的重要性质：色度，明度，纯度，一般称为色彩三要素或色彩三属性。1.色相(Hue)又叫色名（Hue，简称为Ｈ；或译为色相）是区分色彩的名称，也就是色彩的名字，就如同人的姓名一般，用来辨别不同的人。2.明度(Value)明度（Value简称Ｖ）光线强时，感觉比较亮，光线弱时感觉比较暗，色彩的明暗强度就是所谓的明度，明度高是指色彩较明亮，而相对的明度低，就是色彩较灰暗。3.纯度(Chroma)又叫彩度（Chroma，简称Ｃ）是指色彩的纯度，通常以某彩色的纯度所占的比例，来分辨彩度的高低，纯色比例高为彩度高，纯色比例低为彩度低，在色彩鲜艳状况下，通常很容易感觉高彩度，但有时不易作出正确的判断，因为容易受到明度得影响，譬如人们最容易误会的是，黑白灰是属於无彩度的，他们只有明度。4.色环每个色彩模式都包含了一组三原色，然后经由这一组三原色的相互混合而产生不同的颜色。在传统色彩学中，三原色指的是蓝、红、黄；而在RGB色彩模式中，色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。三次色则是混合了原色与次色，或者是混合两种次原色所产生。通常用色环来呈现颜色的逻辑性。可以从下图中看出，RGB的色环和传统艺术家们所使用的色环是很不一样的。色素混合效果色光混合效果3.2.2处理颜色的方法理论上，处理颜色的方法通常有两种：1、加色法，混合不同颜色的光波以形成白光；2、减色法，使用颜料来减少光波。传统的艺术家所使用的色盘和打印时使用的CMYK系统都是减色法模式。在网站上，人们所面对的是光的投射，而不是从物体上反射回来的光，所以使用的是加色法模式，也就是上面提到的RGB。3.2.3色彩的印象当看到色彩时，除了会感觉其物理方面的影响，心里也会立即产生相应的感觉，这种感觉一般难以用言语形容，人们称之为印象，也就是色彩印象。如果有一个能够合理客观地分析出这种感觉差异的标准，那么就可以利用它说明这种感觉上的差异了。1.红色的色彩印象（3-18）红色是强有力的色彩，是热烈、冲动的色彩，容易引起注意，所以在各种媒体中也被广泛的利用，除了具有较佳的明视效果之外，更被用来传达有活力、积极、热诚、温暖、前进等涵义的企业形象与精神，另外红色也常用来作为警告、危险、禁止、防火等标示用色。2.橙色的色彩印象（3-19）橙色的波长仅次于红色，因此它也具有长波长导致的特征。是十分活泼的光辉色彩，是暖色系中最温暖的色彩。3.黄色的色彩印象（3-20）黄色是亮度最高的色，在高明度下能够保持很强的纯度。4.绿色的色彩印象（3-21）绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。5.蓝色的色彩印象（3-22）由于蓝色沉稳的特性，具有理智，准确的印象，在设计中，强调科技，效率的商品或企业形象，大多选用蓝色作为标准色。6.紫色的色彩印象（3-23）紫色由于具有强烈的女性化性格，在设计用色中，紫色也受到相当的限制，除了和女性有关的商品或企业形象之外，其他类的设计不常采用为主色。7.褐色的色彩印象（3-24）在设计上，褐色通常用来表现原始材料的质感，如麻、木材、竹片、软木等，或用来传达某些饮品原料的色泽及味感，如咖啡、茶、麦类等，或强调格调古典优雅的企业或商品形象。8.灰色的色彩印象（3-25）灰色介于黑色和白色之间，中性色、中等明度，可以是无色彩或极低色彩的颜色。灰色能够吸收其它色彩的活力，削弱色彩的对立面，而制造出融合的作用。9.黑色与白色的色彩印象（3-26）在设计中，白色具有高级、科技的印象，通常需和其它色彩搭配使用，纯白色会带给别人寒冷、严峻的感觉，所以在使用白色时，都会掺一些其它的色彩，如象牙白、米白、乳白、苹果白，在生活用品、服饰用色上，白色是永远流行的主要色，可以和任何颜色作搭配。3.2.4色彩的调和所谓色彩调和，即用两种或多种颜色互相调和生成新色彩的方法，因为调和的形式不同，色彩调和又分为加色法调和、减色法调和和中性调和三类。1．加色法调和加色法调和是指色光的调和形式。两种以上的色光调和在一起时就决定了明度的提升，调和色的总亮度相当于参加调和各色明度之和。2．减色法调和减色法调和指色素的调和形式。色素调和造成使明度降低的减光现象，故称“减色法调和”。减色调和有色料调和和叠色调和两种调色方法3．空间调和所谓空间调和，即在一定距离内，通过人的眼睛自动感应能够把两种以上的并置色彩同化为新色彩的调和方法。空间调和有三大特点：⑴近看色彩丰富，远看色调统一。在不同视觉距离中，可以看到不同的色彩效果；⑵色彩有颤动感、闪烁感，适于表现光感，印象派画家贯用这种手法；⑶如果变化各种色彩的比例，少套色可以得到多套色的效果，电子分色印刷就是利用这种原理。3.2.5色彩的对比运用各种色彩同时对比的能力产生于敏感的色彩视觉。色彩反应迟钝的人往往难以发现同时色彩对比现象。由于参加对比的色彩结构不同，所以，构成不同的色彩同时对比结果，其中最鲜明的同时对比是互补色对比。如图所示，从绘画色彩结构看，补色对比如果运用得准确，便形成既生动又稳定的色彩结构，表现出人的完整的色彩本质需要3.2.6色调的变化色调倾向大致可归纳成鲜色调、灰色调、浅色调、深色调、中色调等。鲜色调深色调3.3网页色彩心理网页色彩心理主要包括以下几个方面：1.色彩的心理效应色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。(观察图形-38，3-39，体验色彩的心理效果，如冷暖，轻重，明快与忧郁，兴奋与沉静，华丽与朴素，舒适与疲劳，积极与消极等)2.色彩与联想（图形-40-43）当人们看颜色的时候，常常回忆过去的经历，不由自主地把色彩与这些经历相联系.根据色彩的刺激想起与它有关的事物称为色彩联想。3.色彩与象征随着色彩联想的社会化，色彩日益成为某种含义的象征。人们的联想内容也随之具体事物为抽象、情绪等意境。色彩成为具有普遍意义的某种象征后，便会给人相同的印像。4.色彩与记忆色彩记忆是大脑对过去视觉经验中发生过的色彩的反映。色彩刺激作用停止以后，它的影响并不立刻消失，可以形成视觉后像，这种视觉后像是最直接的原始记忆，带有具体形象性的色彩可以长期保留在记忆中。色彩单纯的网页网页配色的原理网页中的色彩是最直观的了解方式之一是网站统一风格设计的重要组成部分网站的色彩往往给人留下深刻的印象，包括网站的色彩系列，色彩配合元素，整体色彩氛围。举例：电影：英雄，卧虎藏龙3.4网页常用配色分析3.4.1网页最常用流行色蓝色——蓝天白云，沉静整洁的颜色。（图3-47）绿色——绿白相间，雅致而有生气。橙色——活泼热烈，标准商业色调。暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色.3.4.2颜色的忌讳忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。忌跳——再好看的颜色，也不能脱离整体。忌花——要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。蓝色忌纯，绿色忌黄，红色忌艳3.4.3几种固定搭配蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀（icon用来指定GIF格式或JPEG格式的小图标或大图标。（图3-51）绿白兰——绿为主调。白底，绿标题栏，蓝色或橙色按钮或ICON做点缀。橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。策划正确的配色方案时必须要有一个判断标准。网页设计师策划一个网站需要经过反复多次的思考，而在决定网页配色方案时同样需要经过再三的思量。2.1平面构成概述平面构成是设计的基础，平面构成主要是运用点、线、面和律动组成结构严谨，富有极强的抽象性和形式感。又具有多方面的实用特点和创造力的设计作品，与具象表现形式相比较，它更具有广泛性。是在实际设计运用之前必须要学会运用的视觉艺术语言，进行视觉方面的创造，了解造型观念，训练培养各种熟练的构成技巧和表现方法，培养审美观及美的修养和感觉，提高创作活动和造型能力，活跃构思。第2章网页平面构成1．布局要新颖所谓布局是指界面的平面分布安排，即将复杂的内容进行条理化、次序化的编辑处理，将其组织成一个结构合理、版块搭配适度的页面。其中新颖的形式感非常重要，要根据不同的内容特点来决定版面的最终形式感。虽不能说牵一发而动全身，但减之一分则少，增之一分则多的版面处理。2.2.1网页平面构成设计中的3个方面2．对比要强烈加强页面的对比因素是吸引人们的关注的有效手段，页面上的各种文字、图片在设计时就应构思好相互之间的对比关系。要大小参差变化，疏密衬托有致，轻重感觉均衡，明暗对比适度，设计上别具一格。这些因素对网页设计的成功与失败起着至关重要的作用3．变化又统一对版面外形的选择应遵守变化