搜索
网页美工WEBPAGEART2011.03.28第1章网页美工概述网络发展历程传统美工与网页美工传统美工分为卖场美工（手绘广告），游戏美工（游戏人物设定），影楼美工（婚纱照后期制作）网页美工顾名思义，就是美化网站的视觉效果，更深层次的就是突出网站本身的内涵。比如简洁，干练，或者有活力。手绘广告游戏人物设定婚纱照后期制作网页美工设计作品网页美工需要具备的能力网页设计也是平面设计的一方面，网页设计师完全可以运用平面设计中的审美观点进行设计，二者唯一不同的是动态与静态的区分，动态网页的制作是平面设计不能完全达到的，它是一种审美方式的延伸。所以平面设计的审美观点在网页设计上非常实用，如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美，这些都能在网页上显示出来，反映设计师超凡的审美能力。第2章网页平面构成平面构成概述平面构成是设计的基础，平面构成主要是运用点、线、面和律动组成结构严谨，富有极强的抽象性和形式感。又具有多方面的实用特点和创造力的设计作品，与具象表现形式相比较，它更具有广泛性。是在实际设计运用之前必须要学会运用的视觉艺术语言，进行视觉方面的创造，了解造型观念，训练培养各种熟练的构成技巧和表现方法，培养审美观及美的修养和感觉，提高创作活动和造型能力，活跃构思。网页平面构成设计中的3个方面1．布局要新颖所谓布局是指界面的平面分布安排，即将复杂的内容进行条理化、次序化的编辑处理，将其组织成一个结构合理、版块搭配适度的页面。其中新颖的形式感非常重要，要根据不同的内容特点来决定版面的最终形式感。虽不能说牵一发而动全身，但减之一分则少，增之一分则多的版面处理。2．对比要强烈加强页面的对比因素是吸引人们的关注的有效手段，页面上的各种文字、图片在设计时就应构思好相互之间的对比关系。要大小参差变化，疏密衬托有致，轻重感觉均衡，明暗对比适度，设计上别具一格。这些因素对网页设计的成功与失败起着至关重要的作用3．变化又统一对版面外形的选择应遵守变化统一的设计原则，既不刻意追求外形的变化，使版面分割繁琐凌乱；又不简单划分版面界限，使得页面显得单一刻板。所谓万变不离其宗，反复的比较、精心的安排、整体的权重是设计好网页的基本要求，同时也是网页设计的最终选择构成形式在网页设计中的运用1．大小的对比大小关系为造形要素中最受重视的一项，几乎可以决定意象与调和的关系。大小的差别少，给人的感觉较沉着温和；大小的差别大，给人的感觉较鲜明，而且具有强力感2.明暗的对比阴与阳、正与反、昼与夜等等，如此类的对比语句，可使人感觉到日常生活中的明暗关系。初生的婴儿，最初在视觉上只能分出明暗，而牛、狗等动物虽能简单识别黑白，对彩度或色相却无法轻易识别，由此可知，明暗（黑和白）乃是色感中最基本的要素3.粗细的对比字体愈粗，愈富有男性的气概。若代表时尚与女性，则通常以细字表现。细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。4.曲线和直线的对比曲线很富有柔和感、缓和感；直线则富坚硬感、锐利感，极具男性气概。自然界中，皆由这两者适当混合。平常人们并不注意这种关系，可是，当曲线或直线强调某形状时，人们便有了深刻的印象，同时也产生相对应的情感。所以人们常常为加深曲线印象，而以一些直线来强调，也可以说，少量的直线会使曲线更引人注目。如图2-20和2-21所示，分别是曲线性格为主和直线性格为主的网页设计。5.质感的对比在一般人的日常生活中，也许很少听到质感这句话，但是在美术方面，质感却是很重要的造型要素。譬如松弛感、平滑感、湿润感等等，皆是形容质感。故质感不仅只表现出情感，而且与这种情感融为一体。通常画家的作品，常会注意其色彩与图面的构成，其实，质感才是决定作品风格的主要因素，虽然色彩或对象物会改变，可是，作为基础的质感，是与一位画家之本质有着密切的关系，是不易变更的。若是外行人就容易疏忽这一点，其实，这才是最重要的基础要素，也是对情感最强烈的影响力。金属质感水墨质感清新质感厚朴感6.位置的对比在画面两侧放置某种物体，不但可以强调，同时也可产生对比。画面的上下、左右和对角线上的四隅皆有潜在性的力点，而在此力点处配置照片、大标题或标志、记号等等，便可显出隐藏的力量。因此在潜在的对立关系位置上，放置鲜明的造形要素，可显示出对比关系，并产生具有紧凑感的画面。如下图所示，画面主体在不同位置的对比构成。7.主与从的对比版面设计也和舞台设计一样，主角和配角的关系很清楚时，观众的心理会安定下来。明确表示主从的手法是很正统的构成方法，会让人产生安心感。如果两者的关系模糊，会令人无所适从，相反，主角过强就失去动感，变成庸俗画面。戏剧中的主角，人人一看便知。版面中若也能表现出何者为主角，会使读者更加了解内容。所以主从关系是设计配置的基本条件。如下图所示画面（文字）主从分明的网页构成。8.动与静的对比一个故事都有开端、发展、高潮、转变和结果。一座庭院有假山、池水、草木瀑布等等的配合。同样的在网页设计配置上也有激烈的动态与静态对比。扩散或流动的形状即为动。水平或垂直性的形状则为静。把这两者配置于相对之处，而以动部分占大面积，静部分占小面积，并在周边留出适当的留白以强调其独立性。这样的安排，一般用来配置于画面四隅的重点。因此，静部份虽只占小面积，却有很强的存在感。如下图所示，充满动感的页面、静止的页面、动静结合的页面对比效果。9．多重对比对比还有曲线与直线、垂直与水平、锐角与钝角等种种不同的对比。如果再将前述的各种对比和这些要素加以组合搭配，即能制作富有变化的画面。如下图所示，包含多重构成对比的网页。10.起与受版面全体的空间因为各种力的关系，而产生动态，进而支配空间。产生动态的形状和接受这种动态的另一形状，互相配合着，使空间变化更生动。建造假山庭园时很注重流水的出口，因为流水的出口是动感的出发点，整个庭园都会因它而被影响。谈到版面构成原理也一样，起点和受点会彼此呼应、协调。两者的距离愈大，效果愈显著，而且可以利用画面的两端。但要特别注意起点和受点的平衡，必须有适当的强弱变化才好，若有一方太软弱无力就不能引起共鸣。如下图所示，构成中的起与受的呼应。11．图与地明暗逆转时，图与地的关系就会互相变换。一般印刷物都是白纸印黑字，白纸称为地，黑字称图。相反的，有时会在黑纸上印上反白字的效果，此时黑底为地，白字则为图，这是黑白转换的现象。如图黑底白字的网页与白底黑字的网页的对比效果。12.平衡走路踢到障碍物时，身体会因此失去平衡而跌倒，此时很自然地会迅速伸出一只手或脚，以便维持身体平衡。根据这种自然原理，如果人们改变一件好的原作品的各部分的位置，再与原作品比较分析，就能很容易理解平衡感的构成原理。如图平衡的网页构成效果。13.对称以一点为起点，向左右同时展开的形态，称为左右对称形，英文名为symmetry。应用对称的原理即可发展出漩涡形等等复杂状态。如下图对称的网页构成。日常生活中，常见的对称事物确实不少，例如：佛像的配置或神殿的配置等等，对称会显出高格调、风格化的意象。14.强调同一格调的版面中，在不影响格调的条件下，加进适当的变化，就会产生强调的效果。强调打破了版面的单调感，使版面变得有朝气、生动而富于变化。例如：版面皆为文字编排，看起来索然无味，如果加上插图或照片，就如一颗石子丢进平静的水面，产生一波一波的涟漪。如图起强调作用的图片、文字。15.比例希腊美术的特色为黄金比，在设计建筑物的长度、宽度、高度和柱子的型式、位置时，如果能参照黄金比来处理，就能产生希腊特有的建筑风格，也能产生稳重和适度紧张的视觉效果。长度比、宽度比、面积比等等比例，能与其它造形要素产生同样的功能，表现极佳的意象，因此，使用适当的比例，是很重要的。通过很有逻辑性的公式换算加上一定的数学分析，得到对网页设计有建设性的概念指导，从一定程度上说算是一种创新。将其运用到网页设计来说，只要记住一个数字就可以了：1.62。许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计，往往会出现设置的宽度没有考虑到要表现的内容，在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候，并没有完全依靠视觉效果图来实现，有时就大致目测一下，然后根据以往经验来定制宽度，而这种宽度往往不能很好的适应他们的内容，所以，这时候黄金比例的使用就很重要了。16.韵律感具有共通印象的形状，反复排列时，就会产生韵律感。不一定要用同一形状的东西，只要具有强烈印象就可以了。三次四次的出现就能产生轻松的韵律感。有时候，只反复使用二次具有特征的形状，就会产生韵律感。如图所示页面具有轻松的韵律感的表现形式。17．左右的重心在人的自我感觉上，左右有微妙的相差。如果画面的右下角有一处吸引力特别强的地方，则在考虑左右平衡时，如何处理这个地方就成为关键性问题。人的视觉对从左上到右下的流向较为自然。编排文字时，将右下角留空来编排标题与插画，就会产生一种很自然的流向。如果把它逆转就会失去平衡而显得不自然。这种左右方向的平衡感，可能是和人们惯用右手有点关系吧！如下图所示，分别是重心在不同位置的页面布局效果。18.向心与扩散在人们的情感中，总是会首先意识事物的中心部份。虽然有时蛮不在乎地观察事物，可是，在人们心中，总是想探测其中心部份，好像只有这样，才有安全感一般，这就构成了视觉的向心。一般而言，向心型看似温柔，也是一般所喜欢采用的方式，但容易流于平凡。离心型的排版，可以称为是一种扩散型。如图扩散式的网页构成、集中式的网页构成。19.JUMP率在版面设计上，必须根据内容来决定标题的大小。标题和正文大小的比率就称为Jump率。Jump率越大，版面越活泼；Jump率越小，版面格调越高。依照这种尺度来衡量，就很容易判断版面的效果。标题与本文字体大小决定后，还要考虑双方的比例关系，如何进一步来调整，也是相当大的学问。如下图所示，JUMP率较低与较高的网页对比效果。20.统一与调和如果过分强调对比关系，空间预留太多或加上太多造型要素时，容易使画面产生混乱。要调和这种现象，最好添加一些共通的造形要素，使画面产生共通的格调，具有整体统一与调和的感觉。反复使用同形的事物，能使版面产生调和感。若把同形的事物配置在一起，便能产生连续的感觉。两者相互配合运用，能创造出统一与调和的效果。如下图所示形式统一的网站，示色调统一的网站。21.视觉导线依眼睛所视或物体所指的方向，使版面产生导引路线，称为视觉导线。设计家在制作构图时，常利用导线达到整体画面更引人注目的目的。也就是人们常说的视觉流程。22.形态的意象一般的编排形式，皆以四角型（角版）为标准形，其它的各种形式都属于变形。角版的四角皆成直角，给人很规律，表情少的感觉，其它的变形则呈现形形色色的表情。三角形的编排方式有锐利、鲜明感；近于圆形的编排方式，有温和、柔弱之感。相同的曲线，也有不同的表情，例如规规矩矩和用仪器画出来的圆，有硬质感；徒手画出来的圆就有柔和的圆形曲线之美。如图标准型、曲线形网页、有手工绘制痕迹的网页对比效果。23.水平线黄昏时，水平线和夕阳融合在一起，黎明时，灿烂的朝阳由水平线上升起。水平线给人稳定和平静的感受，无论事物的开始或结束，水平线总是固定的表达静止的时刻。如图所示，水平方向的网页有一种稳定的效果。24.垂直线垂直线的活动感，正好和水平线相反，垂直线表示向上伸展的活动力，具有坚硬和理智的意象，使版面显得冷静又鲜明。如果不合理的强调垂直性，就会变得冷漠僵硬，使人难以接近。垂直方向的网页有一种挺拔的效果。将垂直线和水平线作对比的处理，可以使两者的表现更生动，不但使画面产生紧凑感，也能避免冷漠僵硬的情况产生，相互取长补短，使版面更完备。如图所示，垂直线和水平线作交互使用的网页效果。25.阳昼、阴昼从黑暗的洞窟内，看外面明亮景象时，洞窟内的人物，总是只用轮廓表现，而外面的景色就需小心描画了。正逆光所形成的形象剪影会显出不可思议的空间效果。正常的明暗状态，叫做阳昼，相反的情况是阴昼。构成版面时，使用这种阳昼和阴昼的明暗关系，可以描画出日常感觉不同的新意象。如图阳昼式的网页形象、阴昼式的网页形象对比效果。26.留白量速