网页美工PPT讲解由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页美工培训”。
网页美工
WEB PAGE ART
2011.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.留白量
速度很快的说话方式适合夜间
新闻的播报，但不适合做典礼的司
仪，原因是每一句话当中，留白量
太少。谈到版面设计时空白量的问
题也很重要，即使同一张照片，同
样的句子也会因留白量的大小而影
响表现的形象。无论排版的平衡感
有多好，文章有多美，读者一看版
面的留白量就已给它打好分数了。27.版面率
在设计用纸上，一个文档所使用的排版面积称为版
面，而版面和整页面积的比例称为版面率。空白的多寡对
版面的印象，有决定性的影响。如果空白部分加多，就会
使格调提高，且稳定版面；空白较少，就会使人产生活泼的感觉。若设计信息量很丰富的杂志版面时，采用较多的空白，显然就不适合。如图就是两类不同版面率的网页。28.屏幕上字的大小
多媒体影像通常是在计算机影像显示器（monitor）或在电视机上
呈现。根据分析，为了视觉的舒适感，呈现在计算机影像显示器上最小
且清晰的中文字型应为 16 pixels（宽）×16 pixels（高）点阵字型的细
明体。当使用于不能显示中文字型名称的系统时，会显示为MingLiU。
至于呈现在电视机上最小且清晰的中文字型应为 36 pixels（W）×36
pixels（H）的点阵字型，这是因为电视机需要从较远的距离观看的缘故。
从阅读习惯来看，为了配合人们横向阅读中文的最佳状态是，一行最好
不要超过 35 个字。如图是字体编排合理的网页。
实行烟草专卖体制的意义实施这一带有行政强制性的制度安排，政府主要基于如下考虑：（1）作为公共秩序的管理者和公共利益的代言人，政府希望把烟草这种有损居民身体健康且具有顽固嗜......
尊敬的各位领导、各位评委、老师，亲爱的同学们，大家下午好！下面请允许我来简要介绍一下我们的公司。我将从以下几个方面来阐述。首先是公司简介：重庆百年树人文化发展有限责任公......
刀豆文库小编为你整合推荐4篇网页美工简历，也许这些就是您需要的文章，但愿刀豆文库能带给您一些学习、工作上的帮助。......
刀豆文库小编为你整合推荐6篇网页美工工作计划，也许这些就是您需要的文章，但愿刀豆文库能带给您一些学习、工作上的帮助。......
刀豆文库小编为你整合推荐4篇网页美工个人简历，也许这些就是您需要的文章，但愿刀豆文库能带给您一些学习、工作上的帮助。......
