6个简单的方法,设计出漂亮的重叠色彩效果

颜色对设计来说是非常重要的要素。只要有鲜明的颜色,就算是极简的单色设计,也能表现出引人注目的独特魅力。本文将参考一些网页设计,看看各种各样的颜色重叠效果的设计方法。


颜色对设计来说是非常重要的要素。只要有鲜明的颜色,就算是极简的单色设计,也能表现出引人注目的独特魅力。本文将参考一些网页设计,看看各种各样的颜色重叠效果的设计方法。

6个简单的方法,设计出漂亮的重叠色彩效果

一种使用色彩来让人具有深刻印象的方法,就是色彩重叠技术。具体来说,就是在图片或视频中重叠一个具有颜色的半透明图层。这种技术可以将图片中所具有的信息传递出来,让设计变得更加引人注意。

这一次我们来参考一些网页设计,看看各种各样的颜色重叠效果的设计方法。

1、尝试渐变

6个简单的方法,设计出漂亮的重叠色彩效果

渐变再一次被作为具有魅力的设计方法而被我们所认识,尤其是利用在颜色叠加上,可以让作品更抢眼。

另一个使用渐变制作出的效果非常棒的理由是,你可以使用多种颜色进行组合。在这里将你的品牌理念也添加进去仔细思考,利用特定的颜色来集中人们的注意力吧。

这种受渐变与双色调影响的趋势在Spotify 的歌曲播放列表上表现的尤为明显。通过在司空见惯的图片中添加颜色,可以表现出新的氛围。

下面是非常简单的使用渐变效果的概念:

  1. 首先选择一张照片。
  2. 创建一个包含了品牌概念的渐变效果。
  3. 然后将他们重叠到一起。

2、利用单色表现氛围

6个简单的方法,设计出漂亮的重叠色彩效果

利用单色进行重叠,他的魅力足以匹敌渐变,可以根据你所选的颜色不同来表达不同的含义。例如在上面的例子中,就表现出了具有历史厚重感的古老的氛围。

同样的,我还是要说,使用流行的颜色。通过使用鲜艳的色彩和设计材料一起使用,可以给你的作品添加现代与时尚的氛围。

利用单色进行重叠,与颜色和不透明度相配合,可以让他表现出各种各样的意思。通过调整不透明度与饱和度让颜色变得不那么鲜艳,可以将重点从颜色转向背景的图片上,更专注于内容。

3、与色彩的明暗配合

6个简单的方法,设计出漂亮的重叠色彩效果

每一次,就算不选择颜色,单是黑白或灰色也足够了。利用这种方法,你也能极大的改变图片的氛围。

试着想象一下,深色可以表现出一种沉重有气氛的设计,而明亮的颜色可以表现出欢乐的氛围。对于照片本身来说,所覆盖的黑色和白色也是非常重要的要素之一。与什么样的颜色配合能让人注意?图片,颜色和信息是否井然有序?这都是我们需要考虑到的问题。

在上述设计案例中,通过在照片上叠放白色还凸显出上面黑色的文字。同时,也将图片中人物的表情变得引人注意。是露齿微笑的表情。颜色月照片组合的非常友好,甚至想给他一份工作。

4、优化高对比度的图片

6个简单的方法,设计出漂亮的重叠色彩效果

6个简单的方法,设计出漂亮的重叠色彩效果

当设计项目中的颜色堆叠在一起时,图片或动画的构图就显得相当重要了。看起来平淡的图片,会让你的结果也变得非常平淡。选择明暗分明,有着高对比度的图片,可以让结果变得非常不错。

如果照片没有特别明显的对比,试着使用图片加工软件给他增加一些对比度,或者选择其他的图片。否则,这只会让他变得并不怎么出彩。

另一个方法,就是在一开始就使用单色的图片。特别是对于第一眼看到的人来说,单色图片对比分明,可以给人留下很深的印象。在上述的设计案例中,你可以看到,在单色图片的旁边就并排放置着一个重叠了颜色的图片。

5、让照片看起来自然

6个简单的方法,设计出漂亮的重叠色彩效果

当你在制作颜色叠加的图片时,建议你考虑一下以下两点:

  1. 选择让图片看起来自然。配色或光线,阴影等要素看起来非常的自然舒适。在上述的案例中,就运用了控制的非常好的重叠效果。
  2. 让图片看起来完全改变了,看不出利用了颜色重叠的效果。

使用上述以外的图片,则会让用户的注意里过多的集中在了颜色上,而让他们无法在网页的内容让集中注意力。颜色重叠是为了强调设计,而不是为了妨碍设计而存在的,如果弄混了这点,就本末倒置了。

6、尝试着利用重点

6个简单的方法,设计出漂亮的重叠色彩效果

6个简单的方法,设计出漂亮的重叠色彩效果

一如至今为止介绍的设计案例,在标题样式中不仅仅可以利用叠加了颜色的巨幅图片,也可以利用设计的重点。

在上述的设计案例中,运用的就是两种不同的凸显重点的方法:

第一个,利用了明亮的半透明绿色来设计,强调出了导航栏菜单。在浏览商品时的页面可以使用不同的颜色和这种效果相配合,可以很好的体现出品牌的魅力。这种设计效果简单的通过利用导航栏菜单的颜色,表现出一种柔和的印象,用户的视线向着页面下方诱导。

另一个设计案例,则采用了别的设计方法。这种设计,通过使用颜色重叠和悬停效果,可以更加详细的说明特定的项目。各种红色的颜色重叠要素,都可以点击。需要注意的是,对于用户来说,颜色叠加是一种视觉提示,他们所想知道的事情,我们可以通过这些内容来提供链接。

最后

颜色叠加这种技术,可能并不是什么时候都可以利用。大部分设计师,都只会在项目中用上一两个效果,如果再多,就显得画蛇添足了。

试着在设计项目中采用这些方法吧。如果在别的项目中没有使用他的地方,你可以将现在这一瞬间的灵感记录下来,以便在将来的设计中能够方便的利用上。

 

原文地址:http://photoshopvip.net/95862

译者:丧心病狂的翻译站

译文地址:微信公众号【丧心病狂的翻译站】

本文由 @丧心病狂的翻译站 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26402/

(0)
CatherineCatherine
上一篇 2017-05-14 08:10
下一篇 2017-05-14 09:52

相关推荐

  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 如何合理的在移动应用中使用动效

    译者语:本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章,很多词句用的可能不太妥当,在这里给大家作揖了!knock knock……

    2017-06-03
  • 「这个控件叫什么」系列之动作菜单/动作面板

    @龙爪槐守望者 :鉴于国内交互设计 名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计 发展,做出一点微小的贡献。

    2017-08-14
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • 新交互时代:自然用户界面中的“自然”到底是什么意思?

    一个理想的自然用户界面应当能让用户的注意力完全集中在所要从事的活动上,而忘记界面本身的存在,或者说,界面变得“透明”了。一位印度的同行为当地用户设计了一组用数字笔操作的界面。在进行用户测试时,他对其中一位用户说:“请拿起笔碰一下屏幕。”出乎他意料的是,这一看起来十分简单自然的操作,居然出了问题:这位用户没有用笔尖,而是把笔横过来整个贴在了屏幕上!经询问才知道原来他不识字,也从没用过笔。
    而另一位欧洲的同行为家庭用户在交互桌面上开发了一套软件,包括一些直观的手势交互,例如用两个手指相反方向移动做打开的手势来打开一个虚拟的储物箱。当他向用户家庭演示时,他想考考这个家中正上小学的孩子:“你试试看怎么打开这个箱子?”孩子二话不说,直接用食指在箱子上双击!隐喻指的是把用户界面中的概念比拟为一种人们熟悉的概念或现象,用于解释其交互方式,例如将图形界面元素比喻为大家熟悉的桌面、窗口等等。隐喻越贴切,越为用户熟悉,往往就意味着界面越自然。

    2017-05-14
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 一篇文章总结可用性测试方法

    之前总结过一版交互设计流程图,主要是想给自己以后做设计梳理一下过程,但是那份流程里面只有枝干,并没有枝叶,所以针对每个方法我都会撰写一份方法总结,或者说指导,目的就是为以后实践做准备。我期望的效果是,假如一个没有接触过该方法的人看到这份总结,可以按照这个总结一步步完成实验。这就是我最大的目的。下面就是第一份总结《可用性测试方法总结》。

    2017-05-30
  • 交互设计的3种场景:需求场景、环境场景和手机场景

    实习期间,每次给导师讨论方案或者问题的时候,导师总是会冒出来一句:你这个设计点依据的场景是什么?在给产品经理展示方案的时候,产品经理也会冒出来一句:你有没有考虑过这里的使用场景。甚至于,只要发现他们…

    2017-08-04
  • 交互总结篇(二):流程设计

    上篇文章介绍了交互框架与布局的设计, 详情请见《交互总结篇(一):框架与布局》,而本文作为交互设计总结篇的第二篇——流程逻辑篇,主要是系统地整理一下交互流程设计所需要思考的方向。指由两个及以上的业务步骤,完成一个完整的业务行为的过程。

    2017-08-04
  • 交互设计相关岗位-用户研究(实习)——杭州海康威视

    杭州海康威视招聘 用户研究(实习)    职位要求: 1、人机交互、认知心理学、计算机、设计艺术或相关专业研究生在读。 2、熟悉研究方法论,熟悉一般研究步骤,了解各种研究方法,有坚实的统计和数据分析基础 3、较…

    交互设计招聘 2018-03-13