本节简介:学习了网页配色原则,网页安全色的使用;网页设计中色彩的基本原则;案例制作(一):网站配色方案调整(先给出一个普通的网站,通过配色调整焕然一新);案例制作(二):制作不同颜色网站,搭配不同风格。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
网页色彩基本原则:统一性原则(主色调、辅助色、点睛色、背景色)、情感性原则(红色:视觉冲击力强、热烈冲动 橙色:活力健康,常用在食品、饮料 暗金色:欧式、复古类网站 黄色:明快、活泼,多用在儿童类网站 粉色系页面:多用于和女性相关的网站 绿色:健康、环保,常用在教育类、环境类 青色:清秀豁达,洁净、开阔的海边房地产网站 蓝色:和平、淡雅、清洁、科技等,运用广泛,常用于清洁用品、海洋类制品、科技、企业等网站 紫色:神秘、高贵,常用于女性化妆品、科幻等题材网站
使用安全色配色:明度推移(加白),纯度推移(彩度,高纯度明快、低纯度雅致),同色系中色相推移( 对设计师颜色把握要求高,位置、大小、比例)。 216种安全色中有黑白灰6种无彩色,与彩色搭配很安全( 如低纯度蓝+白搭配-矿泉水网页清爽、高纯度蓝+黑灰-工业网站 沉稳)。整体同色系配色+互补色点睛。
网页色彩统一性原则:主色调、辅助色(烘托主色调,面积仅小于主色)、点睛色(面积最小、与主色调反差最大、可以一两个)、背景色 。 情感性原则:颜色给人的感觉
使用安全色配色:明度推移(加白),纯度推移(彩度,高纯度明快、低纯度雅致),同色系中色相推移(对设计师颜色把握要求高,位置、大小、比例)。 216种安全色中有黑白灰6种无彩色,与彩色搭配很安全(如低纯度蓝+白搭配-矿泉水网页清爽、高纯度蓝+黑灰-工业网站 沉稳)。整体同色系配色+互补色点睛。
216种网页安全色——ps色板面板——三角下拉选择web安全色,在用渐变色时也会用到非安全色。
网页设计中色彩的基本原则:一、统一性原则(主色调、辅助色、点睛色、背景色)二、情感性原则(色彩的情感因素)三、对比性原则(打破常规,大胆创新)
网页色彩基本原则:统一性原则(主色调、辅助色、点睛色、背景色)、情感性原则(红色:视觉冲击力强、热烈冲动 橙色:健康、活力、饮料 暗金色:欧式、复古 黄色:明快活泼、儿童网站 粉色:与女性有关 绿色:健康、环保 青色:纯净 蓝色:平静、淡雅、清洁、科技 紫色:神秘、高贵 化妆品)
(216安全用色表)同色系原则:明度推移(加白、加黑)、纯度推移(色彩纯净)、色相推移(色彩跳跃)
二、情感性原则:设计师在掌握色彩基本规律的基础上,还需要掌握色彩的情感因素。红色:热烈、喜悦、动感十足;另一面危险、警惕。橙色:温暖,成熟的果实,丰收的颜色,联想到食物,黄色:跳跃,很有活力。比较童趣。绿色:树叶,生机勃勃的景象,春天,环保。蓝色:科技类、企业类、教育类网站。紫色:女性化妆品,高贵。
网页配色原则:最简单的网页配色方案——同色系原则:明度推移、纯度推移、色相推移(较难把握)。灵活使用216安全用色表。无色系可以随意使用。
用明度推移的页面给人的视觉冲击力是比较弱的,但给人以和谐、安定的感觉。
明度,饱和度,颜色替换,食品的网页不适合使用食品腐烂时有的颜色。主图的饱和度增加,背景的饱和度降低。
网页中的搭色,打破常规,大胆创新,出奇制胜,达到意外效果。Google色彩搭配。
网页情感颜色:红色动感十足,危险警惕。橙色健康温暖,丰收食物水果。暗红色家具。黄色活力儿童网站。绿色生机勃勃,健康环保。蓝色最常见,和平淡雅清洁,海洋制品科技企业教育。紫色/紫红色/粉色化妆品,高档,神秘高贵,女性柔美。
页面最显眼的是用点睛色的部分,整个页面最抓眼的位置。