Photoshop三种UI的选择配色方法分享

给各位Photoshop软件的使用者们来详细解析分享一下三种UI的选择配色方法。

解析分享:

方法一:色轮配色

色轮由 12 种基本的颜色组成。

首先包含的是三原色( Primary colors ),即蓝、黄、红。

原色混合产生了二次色( Secondary colors ),用二次色混合,产生了三次色( tertiary colors )。

色轮有五个同心环组成,从暗到亮-暗色处于大环,明色处于小环,而中间是颜色的基本色相。

 


根据颜色的关系有以下几种配色分类

a、单色配色

单色搭配就是以一个颜色为主,然后利用颜色的深浅来进行搭配的方法,即色轮中,一种色相的暗、中、明三种色调,单一颜色是比较单调,所以利用颜色的深浅变化来增加多彩性。

 


优点:画面统一,搭配时相对简单而且一般都不会给人难看的感觉,一般不会给人难看的感觉。

案例:

 


b、邻近色配色

在色相环上相邻的色彩互为邻近色

 


优点 : 色调统一,具有低对比度的和谐美感。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富,在设计时应用这种搭配同样让你轻易产生不错的视觉效果。

案例:

 


c、互补色和对比色配色

互补色是在色相环上180°相对的两个颜色,而对比色则是在色相环上150°到180°范围内相对的两个颜色。

 


优点:补色和对比色形成强列的对比效果,传达出活力、能量、兴奋等意义。补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。

案例:

 


d、分裂补色配色

如果我们同时用补色及类比色的方法来确定的颜色关系,就称为分裂补色。

 


优点:这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。如在上面三种颜色中,红色就显得更加突出。

案例:

 


e、原色搭配配色

除了在一些儿童的产品中,三原色同时使用是比较少见的。但是,无论是在中国还是在美国的文化中,红黄搭配都是非常受欢迎。红黄搭配应用的范围很广??从快餐店到加油站,我们都可以看见这两种颜色同时在一起。

蓝红搭配也很常见,但只有当两者的区域是分离时,才会显得吸引人,如果是紧邻在一起,则会产生冲突感。

 


案例:

 


f、二次色搭配

二次色之间都拥有一种共同的颜色??其中两种共同拥有蓝色,两种共同拥有黄色,两种共同拥有红色,所以它们轻易能够形成协调的搭配。

 


优点:如果三种二次色同时使用,则显得很舒适、吸引,并具有丰富的色调。它们同时具有的颜色深度及广度,这一点在其它颜色关系上很难找到。

案例:

 


方法二: 叠柔配色法

这个方法,看起来复杂,但用起来很简单。

主要分三个步骤

1、任意选择一个白色或黑色 , 或黑白渐变(可以是点、线、面…甚至字体)

2、 然后混合模式选择叠加或柔光

 


3、 调整透明度(1%-100%随意,省心的做法是直接键入一个整数值,比如:轻质感类页面可以选20%-40%,重质感感类可以键入60%或以上)

如下图(将色块使用“柔光”混合模式,调整不一样的数值得到不同的效果)

 


同样的方法:界面中的字体颜色、细节线条、按钮渐变、边角高光、描边阴影……都可以用这样的方法取色使用这个方法的优点是:色彩获得比较简单 , 无需了解色彩的指数和直方图 , 不用看色轮.....只需要设计师具备色彩的审美 , 能够合理的应用。

 


方法三: 色彩提取法

这个方法是从现有的自然色、图片色中提取所要的颜色,给应用和搭配赢得了不少的时间。

1、找图

找一张符合所要设计界面风格的图(本教程用图为Galaxy S4自带壁纸)

 


2、提取颜色

将图片放入PS中,点击“存储web所有格式”(Windows快捷键为Ctrl+shift+Alt+s),格式选择png,色块选择8。

在颜色显示区域会留下8种颜色,点击颜色区域右侧下拉按钮,会找到“存储颜色表”,把他存储到桌面上或者你容易找到的地方。然后用PS打开,色板中会显示刚才提取到的颜色。

 


成功提取出8种颜色

 


3、应用

 


 


具体的颜色应用为:

1、导航文字及logo的颜色为最浅的蓝色;

2、Banner区域既大背景,这里用了开始的图片。上面的大标题logo则用了最深的蓝色;

3、内容区域出现的提取到的三个色相的色彩,如果只是排列剩下的几个颜色的话,颜色会很冲,所以用了几张图片来过度颜色调整画面的节奏。现在看来效果还不错,内容区域的文字颜色与导航文字一致,都是最浅的蓝色;

4、内容区域的几个按钮并没有用提取的颜色,而是用白色叠加然后调整透明度出来的。

总结 : 以上的三种配色方法思路是完全不一样的,希望多多少少能带给大家一些收获。在学习新的方法的同时,也要学会举一反三,结合自己已有的经验和设计师独有的对色彩的感觉,形成一套属于自己的配色方法。

好了,以上的信息就是小编给各位Photoshop的这一款软件的使用者们带来的详细的三种UI的选择配色方法分享的全部内容了,各位看到这里的使用者们,现在你们是非常的清楚了吧,希望小编上面分享的教程能给大家带去帮助。

时间: 2024-11-10 01:25:31

Photoshop三种UI的选择配色方法分享的相关文章

Photoshop三种调整GIF动图方法分享

给各位Photoshop软件的使用者们来详细的分享一下三种调整GIF动图的方法. 方法分享: 相比静态图,GIF动态图更加能让你的设计作品吸引人们的眼光.本期国外精品翻译教程就跟大家一起学习三种在Photoshop调整GIF动态图的方法. 用Photoshop CS5.CS6或创意云版本打开GIF动态图;在主菜单栏中选择"窗口>时间轴"或者"窗口>时间轴";在主菜单栏中选择"窗口>图层". 一.调整图层 在图层面板,选择顶端图层

photoshop三种快速换白底方法分享

给各位photoshop软件的使用者们来详细的分享一下三种快速换白底的方法. 方法分享:   1 替换颜色   还是这个图,调出替换颜色,习惯吸取 背景颜色,然后调节容差范围,保证产品 全是黑色,背景是白色,并且界限分明, 然后最下面的明度调到最大值,然后,没 有然后了. 2 可选颜色   凡是无绝对,如果有的产品上有白色或者 浅色,再用上面替换颜色那种方法会出现不 管怎么调都无法产品全白,强行明度调白就 会再白色部位出现曝光过度,死白.这种情 况可以换用可选颜色.   可选颜色里白色,然后最后

photoshop三种简易实用毛笔字设计方法教程

给各位photoshop软件的使用者们来详细的解析分享一下三种简易实用毛笔字设计方法的教程. 教程分享:   好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的三种简易实用毛笔字设计方法的教程分享的全部内容了,各位看到这里的使用者们现在是非常的清楚了吧,希望小编上面分享的信息能给大家带去有用的帮助.

用户体验设计:三种用户体验的量化方法

案例研究 前面的文章中介绍了三种用户体验量化方法.通过这篇文章,我们将通过案例来一起研究以行为为中心的量化方法的使用.案例需要借助以体验为中心的量化方法来得到以行为为中心的量化表达式,并将其与以体验为中心的量化结果进行比较.具体情况如下: 首先,通过认知实验来获得行为交互过程中的时间与步骤.我们选择了小范围样本取样的方法,有24人参与了该实验,年龄分布在22-27岁之间.任务是通过两款外观相似.键盘布局相似以及档次相同的手机分别完成照片拍摄并将照片以彩信形式发送的任务.在拍照的过程中,操作者在统

windows 7常见的三种字体问题的解决方法

使用系统过程中遇到字体问题的,可以说概率非常小,大部分遇到的都是某个软件的问题而不是系统本身的问题.这边就来分享三个小编收集的windows 7中经常遇到的字体问题. 1 字体替换成宋体后,出现乱码 这个只能说,替换成宋体千万不要使用修复功能.没使用修复功能基本没什么问题.使用了才回出现问题. 2 我19屏幕使用分辨率1440*900,为什么一些软件字体会太小了,解决方法: 在调节自定义DPI到125.138.150的使用不要使用"使用xp风格DPI缩放比例"这个不能选择就可以,解决问

三种解密 HTTPS 流量的方法介绍

三种解密 HTTPS 流量的方法介绍 Web 安全是一项系统工程,任何细微疏忽都可能导致整个安全壁垒土崩瓦解.拿 HTTPS 来说,它的「内容加密.数据完整性.身份认证」三大安全保证,也会受到非法根证书.服务端配置错误.SSL 库漏洞.私钥被盗等等风险的影响.很多同学认为只要访问的网站地址前有一把小绿锁就绝对安全,其实不然.本文通过介绍三种最常规的 HTTPS 流量解密方法及原理,浅谈一下 HTTPS 的安全风险. Man-in-the-middle Man-in-the-middle(中间人,

ASP技巧:三种禁用FileSystemObject组件的方法

filesystemobject|技巧|禁用 众所周知,FileSystemObject组件的强大功能及破坏性是它屡屡被免费主页 提供商(那些支持ASP)的禁用的原因,我整理了一下,本来只找到两种方法,后来 被某人一刺激,硬是想到第三种不为人所知的方法,呵呵,也不知道是不是这样的. 第一种:用RegSrv32 /u C:\WINDOWS\SYSTEM\scrrun.dll(win98路径)来注销该组 件.此方法过于狠毒,属于同归于尽的方法,大家都没得用,是下招 第二种:修改Progid的值,在A

Linux操作系统下三种配置环境变量的方法

  现在使用linux的朋友越来越多了,在linux下做开发首先就是需要配置环境变量,下面以配置java环境变量为例介绍三种配置环境变量的方法. 修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题. (1)用文本编辑器打开/etc/profile (2)在profile文件末尾加入: JAVA_HOME=/usr/share/jdk1.5.0_05 PATH=$JAVA_HOME/bin:

sql下三种批量插入数据的方法_MsSql

本文将介绍三种批量插入数据的方法.第一种方法是使用循环语句逐个将数据项插入到数据库中:第二种方法使用的是SqlBulkCopy,使您可以用其他源的数据有效批量加载 SQL Server 表:第三种使用的方法是sql server中的表值参数方法,表值参数是 SQL Server 2008 中的新参数类型.表值参数是使用用户定义的表类型来声明的.使用表值参数,可以不必创建临时表或许多参数,即可向 Transact-SQL 语句或例程(如存储过程或函数)发送多行数据.       代码示例: