多媒体艺术设计培训网页设计与制作.ppt

多媒体艺术设计培训,北京华夏大地教育网艺术总监陈金良,多媒体艺术设计培训,第1讲网站策划第2讲网站界面的艺术设计第3讲网页色彩设计第4讲网站建设所用到的软件,第1讲网站策划,1.网站策划意义2.企业网站要明确自己的营销主体3.网站策划流程4.如何建立企业网站？5.网站架构,多媒体艺术设计培训,第2讲网站界面的艺术设计,2.1设计的概念2.2界面设计的形态2.3基于信息的网络界面设计,第3讲网页色彩设计,3.1色彩基础3.2色系和色调,第4讲网站建设所用到的软件,1.Photoshop图形制作软件2.FlashMX动画制作软件3.Dreamweaver网页制作软件,第1讲网站策划,1.网站策划意义,成功的企业网站，是技术、艺术与营销策略的有机组合。网页技术与美术设计都是具体的表现手法，而整个网站的架构、层次、栏目和超联接都是服务于企业营销战略的。,第1讲网站策划,2.企业网站要明确自己的营销主体,一个好的企业网站，在策划时都应其网站架构、页面风格、层级关系等要素都要做合理的安排。企业明确这些要点后，站点承建部门才能决定网站建设的技术表现手段和艺术表现形式，以及网站的整体架构、层级关系和联接关系。,企业需求信息-企业网站整体策划-策划方案研讨-策划方案定位-网站制作部门需求分析-网站艺术设计-网站制作-网站发布,第1讲网站策划,3.网站策划流程,策划者必须了解网络媒体特点。企业网站的建设，应充分利用网站是分帧分层的架构方式。在明确企业营销主题的基础上，将企业文化、企业品牌、市场定位、服务承诺、产品优势等企业传达要素采用先进的技术手段和高品位的艺术表现力，并通过网页形式表现出来。,第1讲网站策划,4.如何建立企业网站？,片头-首页-一级界面-二级界面-三级界面,第1讲网站策划,5.网站架构,艺术设计，就是设计具有一定艺术成分和艺术意义而言的，它不等同于艺术创作（纯艺术），而是非艺术的或者说非纯艺术的物质产品表现形式。是一种商品化了的艺术，它的产品对象主要是批量生产的工业化产品。,第2讲网站界面的设计,2.1设计的概念,2.2界面设计的形态,2.2.1形态的概念2.2.2形态的内容,第2讲网站界面的设计,2.2界面设计的形态,2.2.1形态的概念通过视觉而产生的一种生理、心理过程，它通常与感觉、构成、结构、材质、色彩、空间、功能等紧密联系。,第2讲网站界面的设计,2.2界面设计的形态,2.2.2形态的内容点、线、面、是艺术形态的基本架构和表现形式。点、线、面,第2讲网站界面的设计,2.2界面设计的形态,点在造型设计中，点是最简洁的形，不单单是几何意义上的两线相交生成的点。造型设计中，在一定范围内往往把产品的按键、旋钮、开关、螺钉、指示灯、商标、文字、把手等元素作为点来处理，以不同的形式在空间上进行安排，起到点缀、呼应、平衡视觉的作用。,第2讲网站界面的设计,2.2界面设计的形态,线几何意义上的线是点运动的轨迹，没有粗细，只有长度和方向；而在造型意义上，线不仅具有了“一度空间”，而且具有了宽度和深度。各种线条均表现为不同的性格与表情。直线：给人以速度、紧张、锐利、明快、简洁之感。细长直线：纤细、锐利、流畅。粗短直线：厚重、朴实、雄浑、不流畅。水平线：稳定、沉着、冷峻。垂线：端正、挺拔、温暖。斜线：散射、不安定、温暖与冷峻的结合。曲线：活力、动势、自由、丰满。,第2讲网站界面的设计,2.2界面设计的形态,面几何意义上的面是线移动的轨迹，是一种平静的、客观的声音。以不同的线作为母线（素线），按特定的方式移动，就可构成不同的二度空间，即面。,第2讲网站界面的设计,网络界面设计是人与计算机交互方式的演变。是随着计算机技术的发展而发展的。现在科技体现“以人为本”，人性化的设计是网络界面设计的核心，如何根据人的心理、生理特点，运用合理的技术手段，创造简单、友好的界面，是网络界面设计的重点网络界面具体一点讲就是网页界面设计。2.3.1网页界面设计与传统平面设计的关系2.3.2网页设计的原则2.3.3网页界面的布局2.3.4几种常见的构图,第2讲网站界面的设计,2.3基于信息的网络界面设计,2.3基于信息的网络界面设计,2.3.1网页界面设计与传统平面设计的关系由于计算机及其网络技术的特点和条件，对网页设计是有限的。网页设计与传统的平面设计主要区别有4个方面：1.介质的不同传统平面设计-印刷品（分辨率可变，）网页界面-计算机显示器（分辨率低72线即可、较细的线不易看见）2.页面大小的限制传统平面设计-印刷品尺寸可调整大小网页界面-计算机显示器（800600、1024768等）3.交互性区别传统平面设计-无网页界面-联接、按钮等bbs聊天室，电子商务4.多媒体功能传统平面设计-无网页界面-文字、声音、视频、动画、虚拟现实,第2讲网站界面的设计,2.3基于信息的网络界面设计,2.3.2网页设计的原则1.内容与形式的统一内容：网站的信息数据和文字形式：网页的设计版式、构图、布局、色彩和设计风格无论是个体还是组织，设立网站都应有自己的目的，不同内容的网页要求不同的设计形式2.特色明确特色鲜明的网站是精心策划的结果，只有创意新颖、赏心悦目的网页设计才能在瞬间打动浏览者。3.整体形象统一为了保持网站各网页的形象统一，一般需要有一定的同类元素出现在网站的各级页面上，一般常用到是企业的logo或代表该企业形象的图片或者企业理念、文化等。4.层级关系合理合理化的层级关系设计，对浏览者提供了便捷，为企业的信息传达提供了条件。力求网页的层级简要化，以最少的点击次数传达更多的企业信息。5.了解浏览者的心理从心理学角度分析浏览者心理状态，有助于网站的网页设计。,第2讲网站界面的设计,2.3基于信息的网络界面设计,2.3.3网页界面的布局在布局过程中，可以遵循下列原则：平衡：页面上的文字、图像的视觉分量在上下、左右几个方位基本相当。呼应：同一画面元素，在画面的不同位置同时出现。对比：不同色彩、图片和线条等视觉元素相互并置，造成画面的对比效果。疏密：利用画面元素的疏密搭配，使画面产生节奏感。,第2讲网站界面的设计,2.3.4几种常见的构图,（1）“同”字型结构布局“同”字型结构布局，就是指页面顶部为主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体的内容。优点：页面结构清晰，左右对称，主次分明，因而得到广泛的应用。缺点是太过规矩呆板，需要善于运用细节色彩的变化来调剂。（2）“国”字型结构布局“国”字型结构布局在“同”字型结构布局的基础上，在页面下方增加一横条菜单或广告，其优点是：充分利用版面，信息量大，切换方便。还有的网站将页面设计成镜框的样式，显示出网站设计师的品味。（3）左右对称布局采取左右分割屏幕的方法形成对称布局。优点是自由活泼，可显示较多文字和图像。缺点是两者有机结合较为困难。（4）自由式布局自由式布局打破上述两种布局的框架结构，常用于文字信息量少的时尚类和设计类网站。,第2讲网站界面的设计,第3讲网页色彩设计,3.1色彩基础3.2色系和色调,多媒体艺术设计培训,3.1色彩基础,3.1.1色彩关系3.1.2色彩的构成3.1.3色彩的对比3.1.4色彩的表现手法3.1.5色彩的特性3.1.6色彩和性格,第3讲网页色彩设计,多媒体艺术设计培训,3.1色彩基础,3.1.1色彩关系黑白灰关系最基本的色彩关系,第3讲网页色彩设计,多媒体艺术设计培训,3.1色彩基础,3.1.2色彩的构成色彩一般分为无彩色和有彩色两大类。无彩色是指白、灰、黑等不带颜色的色彩。有彩色是指红、黄、蓝、绿等带有颜色的色彩，如图中的色彩。,第3讲网页色彩设计,3.1色彩基础,3.1.3色彩的对比在一定条件下，人对同一色彩有不同的感受。色彩单一给人一种印象。在不同的环境下，多色彩给人另一种印象。色彩之间这种相互作用的关系称“色彩对比”。如美学上基本的对比色有：黑白、蓝橙，黄紫、红绿等。色彩对比实质上是指色相的对比。对比本来是指性质对立的双方相互作用、相互排斥。然而，在某种条件下，对立的双方也会相互融合、相互协调。并置的不同色调往往相抵消对方的色彩，这种相互抵消的现象称“同化现象。,第3讲网页色彩设计,3.1色彩基础,3.1.4色彩的表现手法色彩三要素：色相、明度、纯度。同一色彩属性的色彩因所处位置、背景物不同而给人产生的决然不同的视觉效果。这种现象称为“色彩的表现形式”。如：我们以蓝色编织物和蓝色木地板：,第3讲网页色彩设计,3.1色彩基础,3.1.5色彩的特性1、色彩的冷暖2、色彩的轻重感觉3、色彩的膨胀性与收缩性4、色彩的前进性与后退性,第3讲网页色彩设计,3.1色彩基础,3.1.5色彩的特性1、色彩的冷暖物体通过表面色彩可以给人们或温暖或寒冷或凉爽的感觉。红、橙、黄等颜色使人想到阳光、烈火，故称“暖色”。如图燃烧的深林，如果你没看到图，听到火，肯定会想到是红色，灼热的感觉。绿、青、蓝等颜色与黑夜、寒冷相联，称“冷色”。人对色彩的冷暖感觉基本取决于色相。色系一般分为暖色系、冷色系、中性色系三类。,第3讲网页色彩设计,3.1色彩基础,2、色彩的轻重感觉各种色彩给人的轻重感不同。例如两个体积、重量相等的皮箱，分别涂以不同的颜色，然后用手提、目测两种方法判断木箱的重量。结果发现，仅凭目测难以对重量做出准确的判断，可是利用目测木箱的颜色却能够得到：轻重感，浅色密度小，有一种向外扩散的运动现象，给人质量轻的感觉深色密度大，给人一种内聚感，从而产生份量重的感觉。,3.1.5色彩的特性,第3讲网页色彩设计,3.1色彩基础,3.、色彩的膨胀性与收缩性比较两个颜色一黑一白而体积相等的正方形，可以发现有趣的现象，即大小相等的正方形，由于各自的表面色彩不同，能够斌予人不同的面积感觉。白色正方形似乎较黑色正方形的面积大。这种因心理因素导致的物体表面面积大于实际面积的现象称“色彩的膨胀性”。反之称“色彩的收缩性”。色彩的胀缩与色相密切相关，暖色同膨胀色，冷色属收缩色。,3.1.5色彩的特性,第3讲网页色彩设计,3.1色彩基础,4色彩的前进性与后退性如果等距离地看两种颜色，可给人不同的远近感。如：黄色与蓝色以黑色为背景时，人们往往感觉黄色距离自己比蓝色近。换言之，黄色有前进性，蓝色有后退性。较底色突出的前进性的色彩称“进色”；较底色暗淡的后退色彩称“退色”。一般而言，暖色比冷色更富有前进的特性。,3.1.5色彩的特性,第3讲网页色彩设计,3.1色彩基础,3.1.6、色彩和性格人们对某种色彩的偏爱与性格有很大关系，不同的色系具有不同的含义。因此我们可以根据他人的衣着色彩、房间色彩等身边的东西，分析他的性格。我们可以大概的分析一下各色系代表的性格：,第3讲网页色彩设计,3.2色彩和色调,3.2.124色环3.2.2色彩设计的一些原则3.2.3网页色彩设计1网页色彩搭配的原则2搭配技巧,第3讲网页色彩设计,多媒体艺术设计培训,3.2色彩和色调,3.2.124色环,第3讲网页色彩设计,3.2色彩和色调,3.2.2色彩设计的一些原则统一与对比统一与对比是色彩设计中的基本原则。,第3讲网页色彩设计,3.2色彩和色调,3.2.3网页色彩设计在互联网上，给浏览者带来最强视觉冲击的要素就是网页色彩。色彩是人类视觉最敏感的东西。色彩是一种语言，用来向人们传递信息，也用来吸引人们的注意。在一个具备色彩设计专业水平的网站，即使只使用很少的动画、图形和声音，通过色彩就可以给浏览者留下深刻的印象并提高访问率；色彩可以给浏览者带来舒适的视觉感受并易于人们浏览；通过色彩可以突出网页内容的重点和统一网站的风格；通过色彩还可以体现网站的特色和表明网站的主题。善于标准色彩，有利用与加强整体网站的企业形象。一般来讲，一个网站的颜色不超过3种，但一些娱乐性网站除外。如IBM的深兰色；可口可可的深红色等。,第3讲网页色彩设计,3.2色彩和色调,1网页色彩搭配的原则（1）色彩的合理性网页的色彩要漂亮、引人注目，同时还要照顾到人的眼睛的生理特点，颜色要具有亲和力。（2）色彩的独特性要有与众不同的色彩搭配，并且与行业特征相结合，以衬托出网站的个性，使得大家对网站的印象更深刻。（3）色彩的艺术性色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。,第3讲网页色彩设计,3.2色彩和色调,2搭配技巧根据专业的研究机构研究表明：从人的记忆效果看，我们对彩色的记忆是黑白的3.5倍。（1）黑白搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。一般印刷品较少用大面积的黑色，而网页设计中以黑色为底的网站以前比较多，尤其是一些艺术网站。（2）彩色的搭配同类色的应用：同类色是由一种色彩呈现出的不同透明度或者纯度（通俗地说，就是将色彩变淡或加深）时而产生色彩系列。由这样的色彩搭配出来的页面看起来统一、和谐、有层次感，比较适合于技术性、专业性站点。邻近色的应用：先选定一种色彩，然后选择它在色谱里相邻区域的颜色，如红和紫色互为邻近色；黄色与绿色互为