专业网站建设公司,丰富的设计经验及各行业千余成功案例值得您的信赖,我们的理念是用实惠的价格、高效的建站速度完成质优的网站建设!

典型商业案例网页美工设计

网页美工设计典型商业案例_互联网_IT/计算机_专业资料。网页美工设计典型商业案例 任课教师和其它信息 《网页美工设计典型商业案例》课程内容 第 1章 第 2章 第 4章 第 5章 第 6章 第 7章 第 8章 网页的色彩设计 网页设计的风格创意 Log!

网页美工设计典型商业案例 任课教师和其它信息 《网页美工设计典型商业案例》课程内容 第 1章 第 2章 第 4章 第 5章 第 6章 第 7章 第 8章 网页的色彩设计 网页设计的风格创意 Logo和Banner的设计与制作 按钮和导航条的设计与制作 网页中的文字设计 网页中的图像制作 黄金搭档Photoshop/Fireworks&Flash 2 第 9章 第10章 第11章 第12章 Dreamweaver核心技法 CSS样式应用技巧 商务网站美工设计综合案例 电子政务网站美工设计综合案例 3 第 1章 网页的色彩设计 本章目标 ? ? ? ? ? 了解色彩在网页设计中的重要作用 熟悉网站整体的色彩规划 掌握色彩的心理感受 掌握色彩的配色方案 熟练掌握色彩三要素的配色方案 5 1。1 色彩的常识 ? ? ? 1。1。1 色彩的三要素 1。1。2 色彩的混合 1。1。3 网页安全色 6 太阳光的光谱开始被认为是由红、橙、黄、绿、青 、蓝、紫七色组成,后来有人提出由红、橙、黄 、绿、蓝、紫六色组成 1。1。1 色彩的三要素 色相(Hue) 色相:即色彩的相貌和特征。 ? 8 明度(Value) 明度:指色彩的亮度或明度。 ? 9 纯度(Chroma) 纯度指色彩的鲜艳程度,也叫饱和度 、彩度。 ? 10 流行色 “流行色”是一个时尚的名词。其实,流行色只不 过是一种趋势和走向,它是一种与时俱变的颜色 ,其特点是流行最快而周期最短 1。1。2 色彩的混合 ? 加色混合 加色混合物是指色光的混合形式。当两种以上的色光混合在 一起的时候,明度提高。混合色的亮度相当于参于混合各色光 的明度之和,故称“加色混合”。 ? 减色混合 减色混合是指色素的混合形式。色素混合造成明度降低的减 光现象,又称为“减光混合”或“负混合”。减色混合有色料 混合和叠色混合两种方法。 ? 中性混合 中性混合是指基于人眼的生理机能限制时产生的视觉色彩混 合形式。这类混色效果的明度既不增加也不减少,而是接近混 合色各明度的平均值,故称为“中性混合”。 14 1。1。3 网页安全色 ? 216网页安全色彩是指在不同硬件环境、不同操作系统 和不同浏览器中都能够正常显示的色彩集合。也就是说在 任何浏览用进行显示设备上都能显示相同效果的色彩。使 用216网页安全色彩调色板,非常方便。 15 1。2 色彩的心理感受 ? ? ? 1。2。1 色彩的联想 1。2。2 色彩的功能 1。2。3 色彩的感觉 16 1。2。1 色彩的联想 网页设计的色彩联想带有情绪性的表现。受到 观察者社会层次的不同知识的年龄、民族、国家、 性别、性格、文化、职业、宗教、生活环境、时 代背景、生活、经历等各方面因素的影响。一般 来说,儿童多表现为具像的联想,成年人较多关 注抽象的联想。 17 1。2。1 色彩的联想 下面是常见色彩的联想 红: 血液、夕阳、心脏、火焰 热情、危险、喜庆、反抗、爆发 橙: 橘子、晚霞、柳橙、秋叶 温情、快乐、炽热、积极、明朗 黄: 香蕉、黄金、黄菊、注意信号 明快、注意、光明、不安、野心 绿: 树叶、草木、公园、安全信号 和平、理想、希望、成长、安全 蓝: 海洋、蓝天、远山、湖海 沉静、忧郁、凉爽、典型商业案例理性、自由 紫: 葡萄、茄子、紫罗兰、紫菜 高贵、神秘、嫉妒、优雅、病态 白: 白雪、白纸、白云、护士 纯洁、朴素、神圣、虔诚、虚无 黑: 夜晚、墨、木炭、头发 死亡、邪恶、恐怖、严肃、孤独 ? 18 1。2。2 色彩的功能 ? ? 色彩的功能是指色彩对眼睛及心理的作用,具体 一点说,包括眼睛对它们的明度、色相、纯度、 对比刺激作用,和心理留下的影响、象征意义及 感情影响。 色彩依明度、色相、彩度、冷暖而千变万化,而 色彩间的对比调和效果更加千变万化。同一色彩 及同一对比的调和效果,均可能有多种功能;多 种色彩及多种对比的调和效果,亦可能有极为相 近的功能。 19 1。2。2 色彩的功能 ? 红色!红色光很容易造成视觉疲劳,严重的时候还 会给人造成难以忍受的精神折磨。 在生活中,人们习惯以红色为兴奋与欢乐的象征, 使之在标志、旗臶、宣传等用色中占了首位,成 为最有力的宣传色。 比如在中国古代,许多宫殿和庙宇的墙壁都是红色 的;在中国的传统文化中,五行中的火所对应的 颜色就是红色,八卦中的离卦也象征红色 20 红色: 红色彩为暖色,给人以热的感觉; ? 红色(red),是电磁波的可视光中的长波长部分, 波长大约为610~780nm,类似于 血液的颜色,是 三原色和心理原色之一 ? 一是以一种色彩作主色调,再配上深浅不同的接 近颜色; ? 二是在一种主色调的基础上,加上少许对比色调, 也能给人以淡雅大方的感觉。 ? 对比强烈的颜色 21 ? ? ** 红色象征着温暖、热情与兴奋 ,奔放、喜悦、 庄严 ,活跃、勇敢、爱情、健康、野蛮、驱逐邪 恶、兴奋、幸运、小心、忠心、火热、洁净、感 恩 红色是热烈、冲动、强有力的色彩 。它能使肌肉 的机能和血液循环加快。由于红色容易引起注意 ,所以在各种媒体中也被广泛的利用,除了具有 较佳的明视效果之外,更被用来传达有活力,积 极,热诚,温暖,前进等涵义的企业形象与精神 ,另外红色也常用来作为警告,危险,禁止,防 火等标示用色 ? 浅红色一般较为温柔、幼嫩,如:新房的布臵、 孩童的衣饰等;深红色一般可以作衬托,有比较 深沉热烈的感觉。红色与浅黄色最为匹配,大红 色与绿色、橙色、蓝色(尤其是深一点的蓝色) 相斥,与奶黄色、灰色为中性搭配。 对比色搭配分为 1、强烈色配合:指两个相隔较远的颜色相配,如: 黄色与紫色,红色与青绿色,这种配色比较强烈。 红色和黑色的搭配,非常之隆重,但是却不失韵味 2、补色配合:指两个相对的颜色的配合,如:红与 绿,青与橙,黑与白等 协调色搭配 分为 1、同类色搭配原则 :指深浅、明暗不同的两种同一 类颜色相配。如:深红配浅红 2、近似色相配:指两个比较接近的颜色相配,如: 红色与橙红或紫红相配 26 网站使用颜色大概分为几种类型: 1、 公司色 :公司的CI形象显得尤其重要,每一个 公司的CI设计必然要有标准的颜色。 2、 风格色 :许多网站使用颜色秉承的是公司的风 格。比如海尔使用的颜色是一种中性的绿色,即 充满朝气有不失自己的创新精神。女性网站使用 粉红色的较多,大公司使用蓝色的较多……这些 都是在突出自己的风格。 3、 习惯色 :网站的颜色使用很大一部分是凭自己 的个人爱好,以个人网站较多使用,比如自己喜 欢红色、紫色、黑色等,在做网站的时候就倾向 于这种颜色。 27 28 29 30 31 32 33 1。2。2 色彩的功能 黄色 黄色光的光感最强,给人以光明、辉煌、轻快、纯净的印象。 具象:—香蕉、黄金、黄菊、注意信号 抽象—明快、注意、光明、不安、野心 、愉快、高贵、希 望 、发展、注意 ? 34 35 36 37 ? 黄色的残暴、光辉,有着太阳般的辉煌,象征着照亮黑暗 的智慧之光。黄色有着金色的光芒,有象征着财富和权力, 它是自豪的色彩。在产业用色上,黄色常用来警告危险或 提示注意,如交通标记上的黄灯,工程用的大型机器,学 生用雨衣,雨鞋等,都使用黄色。黄色在黑色和紫色的烘 托下可以到达力气的无穷扩展,淡淡的粉红色也可以像少 女一样将黄色这自满的王子驯服。黄色与绿色相配,显得 很有生气,有活气;黄色与蓝色相配,显得俏丽、清爽; 淡黄色与深黄色相配显得最为文雅。 淡黄色几乎能与所有的色彩相配,但假如要醒目,不能放 在其它的浅色上,尤其是白色,由于它将是你什么也看不 见。深黄色一般不能与深红色及深紫色相配,也不合适与 玄色相配 38 ? ? ? ? 下面介绍几种常用的配色方案: 1。暖色调。即红色、橙色、黄色、赭色等色彩的搭 配。这种色调的运用,可使主页呈现温馨、和煦、 热情的氛围。 2。冷色调。即青色、绿色、紫色等色彩的搭配。这 种色调的运用,可使主页呈现宁静、清凉、高雅 的氛围。 3。对比色调。即把色性完全相反的色彩搭配在同一 个空间里。例如:红与绿、黄与紫、橙与蓝等。 这种色彩的搭配,可以产生强烈的视觉效果,给 人亮丽、鲜艳、喜庆的感觉。 39 橙色 橙色又称桔黄或桔色。在自然界中,橙柚、玉米、 鲜花果实,霞光、灯彩,都有丰富的橙色。因其 具有活力,年轻、明亮、华丽、健康、兴奋、温 暖、欢乐、辉煌、壮严、尊贵、神秘以及容易动 人的色感,所以妇女们喜以此色作为装饰色。 丰硕的果实,是一种富足、快乐而幸福的颜色 *橙色稍稍混入黑色或白色,会变成一种稳重、含 蓄又明快的暖色, *混入较多的黑色,就成为一种烧焦的色; *橙色中加入较多的白色会带来一种甜腻的感觉 40 橙色一般可作为喜庆的颜色,同时也可作富贵色, 如皇宫里的许多装饰。橙色可作餐厅的布臵色 *橙色与浅绿色和浅蓝色相配,可以构成最响亮、最 欢乐的色彩 *橙色与淡黄色相配有一种很舒服的过渡感。橙色一 般不能与紫色或深蓝色相配,这将给人一种不干净、 晦涩的感觉 41 橙色的郁金香:美好的回忆 永恒的爱 橙色,在生机 盎然中流露出一种安逸与宁静。更适合那些走过长 久爱情之路的情侣,因为它象征了历久弥新的爱情, 散发出成熟的韵味。 42 “动感地带”(M-ZONE)标志地色彩由“MZONE”橙色,黄色,黑色搭配而成,整体配色热烈、 清新、洁净,象征新一代无线通讯服务地新奇魅力。 图象正中地大写地“M-ZONE”字样,以年轻人喜 闻乐见地涂鸦方式喷绘而成,年轻而有生机。与之 配合地中文“动感地带”是黑边勾阴影地专有设计 字体,使动感地带以最鲜明地方式显现,凸现了 “时髦、好玩和探索”地品牌特性 同时,围绕“MZONE”地是随意自由地椭圆型线条,代表“区域、 地盘”地概念。这个不封锁地图形,带来突破规则 地创新精神,愈加强调了“M-ZONE”寻觅“新奇” 沟通乐趣地中心理念。 43 44 黄色脸示人物之骁勇凶暴;兰色脸示人物之刚强阴 险;绿色脸示人物之暴躁勇猛,紫脸是表示其相貌 丑陋。身体健壮,武艺高强,也用白色脸。 45 46 绿色 ? ? ? ? 人们把绿色作为和平的象征,生命的象征。邮政 是抚慰着千家万户的 使者,因此她的代表色也是 绿色。 具体—树叶、草木、公园、安全信号 抽象—和平、理想、希望、成长、安全 、新鲜、 平静、安逸、柔和、青春、 鲜艳的绿色是一种非常漂亮、优雅的颜色,它活 力勃勃,象征着性命。绿色宽容、大度,几乎能 容纳所有的颜色。绿色的用处极为辽阔,无论是 童年、青年、中年、还是老年,应用绿色决不失 其活跃、慷慨。在各种绘画、装潢中都离不开绿 色,绿色还可以作为一种休闲的颜色。 47 48 49 50 ? ? 蓝色是博大的色彩,天空和大海这广阔的风景都 呈蔚蓝色。蓝色是永恒的象征,它是最冷的色彩。 纯净的蓝色表示出一种漂亮、文静、 理智、安祥 与干净。 由于蓝色沉稳的特征,具有理智,正确的意象, 在商业设计中,强调科技,效力的商品或企业形 象,大多选用蓝色当尺度色,企业色,如电脑, 汽车,影印机,摄影器材等等,另外蓝色也代表 愁闷,这是受了西方文化的影响,这个意象也应 用在文学作品或感性诉求的贸易设计中 51 52 53 54 紫色 ? ? ? ? 紫色 紫色给人以高贵、优越、幽雅、流动、不安等感 觉。紫色还具有表现苦、毒与恐怖的功能。 具体—葡萄、茄子、紫罗兰、紫菜 抽象—高贵、神秘、嫉妒、优雅、病态、魅力、 自傲、轻率 、豪华,美丽,忧心,平安,爱,悔改, 谦卑,仰望,热情,热忱 紫色是非知觉的色,它俏丽而又神秘,给人深入 的印象,它既富有要挟性,又富有鼓舞性。紫色 是象征忠诚的色相 ,一个暗的纯紫色只要加进少 量的白色,就会成为一种十分精美、柔和的色彩。 55 56 57 58 白色 ? ? ? 白色 白色是全部可见光均匀混合而成的,称为全色光, 是光明的象征色。白色明亮、干净、畅快、朴素、 雅致与贞洁。 具体—白雪、白纸、白云、护士 抽象—纯洁、朴素、神圣、虔诚、虚无 、明快、 柔弱、明亮、光明、雅洁、清静、凄凉、严寒等 59 黑色 首先是消极类,例如漆黑之夜及漆黑的地方,人们 会有失去方向失去办法和阴森、恐怖、烦恼、忧 伤、消极、沉睡、悲痛,甚至死亡等印象。 其次是积极类,黑色使人得到休息、安静、深思、 坚持、准备、考验,显得严肃、庄重、坚毅。 ? 黑白组合:光感 最强、最朴实、最分明、最强烈 ? 60 灰色 灰色是无彩度的低级彩度色彩,灰色也能给人以 高雅,精致、含蓄、耐人寻味的印象。如果用不 当会给我平淡、乏味、枯燥、单调、没兴趣、沉 闷、寂寞、颓丧的感觉。 ** 在商业中灰度具有柔和、高雅的意象,高科技产 品也会用它来传达高级,科技的形象。 ? 62 63 配色——红色 ? ? ? ? 在红色中加入少量的黄,会使其热力强盛,趋于 躁动、不安。 在红色中加入少量的蓝,会使其热性减弱,趋于 文雅、柔和。 在红色中加入少量的黑,会使其性格变的沉稳, 趋于厚重、朴实。 在红中加入少量的白,会使其性格变的温柔,趋 于含蓄、羞涩、娇嫩。 橙色 ? ? ? 在橙色中混入大量的白,有一种干燥的气氛。 在橙色中混入少量的蓝,能够形成强烈的对比, 有一种紧张的气氛。 在橙色中混入少量的红,给人以明亮、温暖的感 受。 黄色 ? ? ? ? 在黄色中加入少量的蓝,会使其转化为一种鲜嫩 的绿色。其高傲的性格也随之消失,趋于一种平 和、潮润的感觉。 在黄色中加入少量的红,则具有明显的橙色感觉 ,其性格也会从冷漠、高傲转化为一种有分寸感 的热情、温暖。 在黄色中加入少量的黑,其色感和色性变化最大 ,成为一种具有明显橄榄绿的复色印象。其色性 也变的成熟、随和。 在黄色中加入少量的白,其色感变的柔和,其性 格中的冷漠、高傲被淡化,趋于含蓄,易于接近 绿色 ? ? ? ? 绿色是具有黄色和蓝色两种成份的色。在绿色中 ,将黄色的扩张感和蓝色的收缩感相中和,将黄 色的温暖感与蓝色的寒冷感相抵消。这样使得绿 色的性格最为平和、安稳。是一种柔顺、恬静、 潢足、优美的色。 1。 在绿色中黄的成份较多时,其性格就趋于活泼 、友善,具有幼稚性。 2。 在绿色中加入少量的黑,其性格就趋于庄重、 老练、成熟。 3。 在绿色中加入少量的白,其性格就趋于洁净、 清爽、鲜嫩。 蓝色 ? ? ? 如果在蓝色中分别加入少量的红、黄、黑、橙、 白等色,均不会对蓝色的性格构成较明显的影响 力。 如果在蓝色中黄的成份较多,其性格趋于甜美、 亮丽、芳香。 在蓝色中混入小量的白,可使橙色的知觉趋于焦 躁、无力。 紫色 ? ? ? 在紫色中红的成份较多时,其知觉具有压抑感、网页美工设计 威胁感。 在紫色中加入少量的黑,其感觉就趋于沉闷、伤 感、恐怖。 在紫色中加入白,可使紫色沉闷的性格消失,变 得优雅、娇气,并充满女性的魅力。 白色 ? ? ? ? ? ? 在白色中混入少量的红,就成为淡淡的粉色,鲜 嫩而充满诱惑。 2。 在白色中混入少量的黄,则成为一种乳黄色, 给人一种香腻的印象。 3。 在白色中混入少量的蓝,给人感觉清冷、洁净 。 4。 在白色中混入少量的橙,有一种干燥的气氛。 5。 在白色中混入少量的绿,给人一种稚嫩、柔和 的感觉。 6。 在白色中混入少量的紫,可诱导人联想到淡淡 的芳香。 黑色 ? ? 黑色的正面联想 权力、威信、重量、诡异、高雅、仪 式、严肃、高贵、孤独、神秘、时髦 、严肃、刚健、坚实、生命。 3。4。7。3 黑色的负面联想 恐惧、消极、邪恶、秘密、屈服、服 丧、重量、懊悔、无知、悲哀、阴沉 、冷淡。 1。2。2 色彩的功能 ? 极色 极色是质地坚实,表层乎滑,反光能力很强的物 体色。主要指金、银、铜、铬、铝、电木、塑料、 有机玻璃,以及彩色玻璃的色。 极色属于装饰功能与实用功能都特别强的色彩。 功,包含着力与艺;能,则可解释为能力,能量 或效能。功能一词可作作用、能量来解释。 81 1。2。3 色彩的感觉 ? 色彩的冷、暖感 ? 暖色:人们见到红、红橙、橙、黄橙、红紫等色后,马 上联想到太阳、火焰、热血等物像,产生温暖、热烈、 危险等感觉。 ? 冷色:见到蓝、蓝紫、蓝绿等色后,则很易联想到太空、 冰雪、海洋等物像,产生寒冷、理智、平静等感觉。 82 1。2。3 色彩的感觉 ? ? 色彩的轻、重感 ? 这主要与色彩的明度有关。 色彩的软、硬感 ? 其感觉主要也来自色彩的明度,但与纯度亦有一定的关 系。明度越高感觉越软,明度越低则感觉越硬,但白色 反而软感略高。 ? 色彩的前、后感 83 1。2。3 色彩的感觉 ? ? ? ? 色彩的大、小感 色彩的华丽、质朴感 色彩的活泼、庄重感 色彩的兴奋与沉静感 84 1。3 制定配色方案 ? ? ? 1。3。1 基于色彩三要素的配色方案 1。3。2 基于色彩情感的配色方案 1。3。3 网站整体的色彩规划 85 1。3。1 基于色彩三要素的配色方案 ? ? ? 明度 在无彩色中,明度最高的色为白色,明度最低的色为黑 色,中间存在一个从亮到暗的灰色系列。 色相 色相指的是色彩的相貌。在可见光谱上,人的视觉能感 受到红、橙、黄、绿、蓝、紫这些不同特征的色彩,人 们给这些可以相互区别的色定出名称,当我们称呼到其 中某一色的名称时,就会有一个特定的色彩印象,这就 是色相的概念。 纯度 纯度指的是色彩的鲜艳程度 86 1。3。2 基于色彩情感的配色方案 ? 配色 实际上是优选的问题,即选择什么色彩,选择什 么样的组合方式,最后形成怎样的一个色彩整体。 色彩设计不仅仅是理性的、逻辑的工作,还是感 性的、艺术的工作,不能完全依赖简单的图表和 公式解决问题。 87 1。3。3 网站整体的色彩规划 ? ? 色彩搭配的原则: [色彩的鲜明性 、色彩的独特性 、色彩的合适性 、 色彩的联想性 ] ? 特色鲜明 ? 搭配合理 ? 讲究艺术性 88 1。3。3 网站整体的色彩规划 ? 色彩搭配要注意的问题: ? 使用单色 ? 使用邻近色 ? 使用对比色 ? 黑色的使用 ? 背景色的使用 ? 色彩的数量 89 本章总结 ? ? ? ? ? 了解色彩在网页设计中的重要作用 熟悉网站整体的色彩规划 掌握色彩的心理感受 掌握色彩的配色方案 熟练掌握色彩三要素的配色方案 90?

2020-03-01 浏览:
电话:-66889888
客服QQ:329435595
邮箱:3294355958@qq.com
2020年开年,我国爆发、了肺炎疫情,澳大利亚的山火在历经数月,经过?暴雨得。到缓解,但山火带来的动?物无;家?可归,蝙蝠肆虐!让民众们也:深受:其害,暴雨也造成、了洪
速可达9最高转_深刻理念
保时捷在其跑车问世70周年之际推出了激动人心的概念:911 Speed;ster Concept是一款令人激动的敞篷跑车的愿景。它与第一台保时捷356 No。 1英寸敞篷跑?车,今天的保时捷汽车,已于19
声明:百科词条人人可编辑,词条创建和修改均免费,绝不存在官方及代理商付费代编,请勿上当受骗。详情? 《辞海》(1989)对理念一词的解释有两条,一是看法、思想、思维活动
融慧资本是融创集团副总裁、金融事业群联合创始人于2017年初成立的金融科技公司,主打端到端的全生命周期信贷解决方案。融慧资本在成立后,短时间内就完成了A+轮融资,主要原因
查看所有文章