photoshop 网页设计中的颜色搭配.pptVIP

第 六 章 网 页 设 计 中 的 颜 色 搭 配 2014-4-24 威迅教育开发部监制2 ?目标 了解网页设计的各要素 掌握网页设计中的色彩应用 掌握网页里文字的颜色搭配技巧 掌握色彩搭配的意义和表现方式3 ?概述 网页设计概述 页面元素 色彩搭配的技巧 文字的颜色搭配技巧 网页配色方案4 6.1 网页设计概述 网页是指通过浏览器能访问到的web页面 ,是一种超文本文件,综合了图片、文 字、多媒体等丰富的内容,具有可视性 和交互性的特点。 网站是网页的集合。一个站点内的所有 网页构成了一个网站,网页是网站的表 现形式。 网页设计是指对网站整体页面的设计, 包括页面的风格、配色、布局、内容等 。5 6.2 页面元素 网页标题 网页链接 网页文字 网页标志6 6.3 色彩搭配的技巧 6.3.1色彩的基本概念自 然 界 中 有 好 多 好 多 种 色 彩 , 比 如 玫 瑰 是 红 色 的 , 大 海 是 蓝 色 的 , 桔 子 是 橙 色 的…… 但 是 最 基 本 的 有 三 种 ( 红 , 黄 , 蓝 ) , 其 它 的 色 彩 都 可 以 由 这 三 种 色 彩 调 和 而 成 。 我 们 称 这 三 种 色 彩 为“ 三 原 色” 也 就 是RGB 基 本 色 彩 模 式色 相 , 指 的 是 色 彩 的 名 称 。 这 是 色 彩 最 基 本 的 特 征 , 是 一 种 色 彩 区 别 于 另 一 种 色 彩 的 最 主 要 的 因 素 。 明 度 , 也 叫 亮 度 , 指 的 是 色 彩 的 明 暗 程 度 , 明 度 越 大 , 色 彩 越 亮 。纯 度 , 指 色 彩 的 鲜 艳 程 度 , 纯 度 高 的 色 彩 纯 , 鲜 亮 。 纯 度 底 的 色 彩 暗 淡 , 含 灰 色 。 相 近 色 互 补 色 暖 色 冷 色7 6.3 色彩搭配的技巧 6.3.2 色彩传达的意义 在特定的场合下,同种色彩可以代 表不同的含义。 【红色】:最强有力的色彩, 能引起肌肉的 兴奋.热烈、冲动. 【橙色】:较温和, 是一种很活泼、辉煌的 色彩.富足的、快乐的色彩. 【黄色】:亮度最高, 尤其灿烂、辉煌.象 征着智慧之光, 象征着权力、骄傲.8 【绿色】:具中性特点.和平色, 偏向自 然美.宁静、生机勃勃, 宽容色彩.可衬 托多种颜色而达到和谐。 【蓝色】:永恒、博大、遥远感. 【紫色】:高贵,优雅.也有消极,恐怖 的意义。 【黑与白】:非常对立而又有共性, 是色 彩最后的抽象.能够用来表达富有哲理性 的东西.其中?? [黑色]:空、无、永恒 的沉默. 9 【白色】:虚无, 有无尽的可能性. 此 二色总时通过对方的存在显示自己的 力量【灰色】:是色彩中最被动的颜色.受 有彩色影响极大, 靠邻近的色彩获得 自己的生命.近冷则暖, 近暖则冷.最 有平静感(中性), 是视觉中最安静 的色彩.有很强的调和对比的作用.1 0 6.3 色彩搭配的技巧 6.3.3 网页设计中的色彩应用 设计网站的时候应该注意: 了解网站所要传达的讯息和品牌 了解用户群 不要使用过多的颜色 使用对比色和灰阶测试对比 要有时效性和功能性 色差1 1 6.4 网页中文字的颜色搭配 一般来说,网页的背景色应该柔 和一些、素一些、淡一些,再配 上深色的文字,使人看起来自然 、舒畅。而为了追求醒目的视觉 效果,可以为标题使用较深的颜 色。1 2 6.5 网页配色方案 6.5.1 紫色系 紫色是一种在自然界中比较少见的 颜色。象征着女性化,代表着高贵 和奢华、优雅与魅力,也象征着神 秘与庄重、神圣和浪漫。另一方面 又有孤独等意味。 紫 紫 色 色 浅 深 紫 紫 色 色 网 网 页 页 例 例 图 图1 3 6.5 网页配色方案 6.5.2 黄色系 黄色是阳光的色彩,具有活泼与轻 快的特点,给人十分年轻的感觉。 象征光明、希望、高贵、愉快。 高 纯 度 黄 色 邻 近 色 应 用 网 页 例 图 黄 色 系 网 页 例 图1 4 6.5 网页配色方案 6.5.3 红色系 红色的色感温暖,性格刚烈而外向 ,是一种对人刺激性很强的颜色。 红色容易引起人的注意,也容易使 人兴奋、激动、紧张、冲动、还是 一种容易造成人视觉疲劳的颜色。 红 色 朱 配 深 红 色 红 色 应 色 网 用 网 页 网 页 例 页 例 图 例 图 图1 5 6.5 网页配色方案 6.5.4 绿色系 绿色在黄色和蓝色(冷暖)之间,属 于较中庸的颜色,这样使得绿色的性 格最为平和、安稳、大度、宽容。是 一种柔顺、恬静、满足、优美、受欢 迎之色。 绿 色 网 页 例 图 绿 色 高 纯 度 网 页 例 图1 6 6.5 网页配色方案 6.5.5 黑色系 黑色是暗色,是纯度、色相、明度最 低的非