• WAP手机版 RSS订阅 加入收藏  设为首页
Photoshop

从3个方面帮你学习色彩层级的奥秘

时间:2016/9/15 21:50:22   作者:未知   来源:网络文摘   阅读:799   评论:0
    如何快速简单让你的设计看起来更加有系统性和节奏感,并且有自己分析设计的方法?因为之前也看过很多关于设计的分析,大都是“色彩心理学”、“配色原理”之类的巴拉巴拉… 这些内容大都落在单个画面中,不太强调色彩的系统规划。今天这篇好文带你一窥色彩层级的奥秘。

一,Banner 图的色彩分解

    这部分我会着重说的比较多,因为在后面的网页和APP当中都会有涉及,而且当了解的大概的原理后看到后面自然也就会很容易的明白了。

A、主产品美观突出型

    首先从汽车类Banner 图开始说起吧!因为这算是一大类,如:“汽车、奢侈品、高级音响……”,甚至是模特、演员相关的设计原理也大都如此,就是需要宣传推广的产品本身忒漂亮。

从3个方面帮你学习色彩层级的奥秘

    上面的这3张图,算是汽车中的高端车型和一个高尔夫奢侈品,其实想一想看过的大部分高端(贵贵贵)的产品设计大都是这种风格。这里面说的贵是相对的,就好像哈根达斯几个雪球100多元,也算奢侈了!

1、因为产品本身已经非常精美,所以文字大都用白色或灰黑做辅助(根据底色来定)

2、为了最大化产品优势,文字所占空间也相对较小,且多用系统字体(因为不抢眼)

3、背景多数选择实景,且接近产品本身色系,要么君临天下的大场景、要么卓尔不凡的近距离

当然了,无论汽车还是奢侈品,他们也都有更加细分的市场和投放渠道,如汽车的高端车、家庭型、运动型、白领代步……所以在设计中会根据产品不同的市场方向进行规划。我们做任何设计也都是如此,所以在每次接到设计任务的时候一定一定要和需求方沟通清楚具体方向。

从3个方面帮你学习色彩层级的奥秘

    上面这几个图就是青年运动型咯,用动感的背景来表达“看我动力十足,快来一起撒野”

    下面这几张图很明显是为了表现缤纷生活,愉快出行的生活状态!画面背景色和产品本身有较大反差,这样依然是最大化的突出了我们的宣传目的。

    当最终还是开始说的那样,当产品(美女帅哥也是哦!)本身足够美观的时候,一定要最大化突出产品本身,信息只是作为辅助,层级排在商品之后。

从3个方面帮你学习色彩层级的奥秘

B、产品展示型 

    当然这个也是我们最常见的设计图,并且更新频率更快(想起来都够了是不是),电商里面最常见的就是这类图,这时候就需要在文字字形色彩、背景色彩或辅助元素上多做一点设计排列了,看下面布灵布灵……↘(ˇˍˇ)↘

uisdc-color-201609074

这一组还是以产品本身突出为主,辅助以文字信息介绍

1、文字占空间略大,和背景反差色彩较大置于后景(↖左侧两张)

2、文字占据空间偏小,且字体较细视觉感不强烈,置于前景(右侧两张↗)

3、这些常规性产品推广,他们都把背景色接近了产品本身色系(减淡或加深后突出前景)

尤其是走长线宣传的产品,尽可能要有常规推广型和事件型(促销、新功能)两种模式做区别

C、标题突出型

韩国也是有暴力型促销Banner出现的,不过相对比还是清晰些,这里还要说下天猫官方设计,现在的设计也都是很赞了,本人也是经常看的内心惊叹。

uisdc-color-201609075

    上面几张图的特点几乎都是一样的:

1、标题占据前景,且占据空间大

2、色彩与背景色做较大反差

3、让背景色和产品本身色系接近,且明暗度也略接近,目的是增加产品氛围渲染,但削弱产品本身视觉冲击,把标题最大化

D、产品展示、标题点睛

    好像看了上面的让我自己都觉得,不就是突出产品就是产品占的空间大然后还在前景,突出文字就是文字占的空间大置于前景么?!多简单点事儿啊……其实好像……也就是这样咯,但我还是找了点例外如下↓(ˇˍˇ) ↓

从3个方面帮你学习色彩层级的奥秘

1、把背景色接近产品(弱化产品本身),文字颜色和背景较大明暗度和色相反差,突出文字(左上↖)。

2、把文字组模块化、图形化,可以用会话气泡、框线、标签……能让文字作为一个整体突出,然后这个整体和背景色有较大的反差!

这样做的优点就是你的图要看起来是促销,而不是廉价!


免责申明:CAD之家旨在相互学习交流,是一个完全免费的网站,部分原创作品,欢迎转载,部分内容来自互联网,如果侵犯了您的权利请尽快通知我们!
邮箱:qm198794@gmail.com Copyright 2008-2022 CAD之家网 湘ICP备17006806号