020-29815005
预约专线时间:09:00-23:59

【UI设计培训干货】:五分钟学会UI设计中的色彩调色?

新闻来源:本站 日期:2022-04-03
调色是基本了,色彩基础本专业的大多数都学过,一会简单说一下。每种色彩都有引申出来的涵义,了解色彩的原理才能调出自己想要的色彩。其他的像我这种老油子基本都是快捷键呀快捷键,甚至忘了鼠标操作的步骤,这行干时间长了就知道了,快捷键是真香。

  调色是基本了,色彩基础本专业的大多数都学过,一会简单说一下。每种色彩都有引申出来的涵义,了解色彩的原理才能调出自己想要的色彩。其他的像我这种老油子基本都是快捷键呀快捷键,甚至忘了鼠标操作的步骤,这行干时间长了就知道了,快捷键是真香。如果你觉着看文字麻烦,可以直接下拉,看快捷键,打开ps去挨个试试。上学的时候就这么干过,试过了也就掌握了80%。学到手才是自己的。前提是你要试,以下我会简单介绍一下,并附上一些常用的快捷键。


UI设计培训干货】:五分钟学会UI设计中的调色?


  一、认识调色


  色调是一组照片中最显着的东西,它决定了整组片子的风格。色调既会提升整体画面的美观性,又可以渲染氛围和表达情绪的作用。除了用数码单反拍照外,胶片相机拍摄冲扫出来的原色已经很好,很多人不会再去调色。照片在色调方面没有什么缺陷的话,不要再硬挑出一些毛病去调,合适才是最好的。我见过一些大神单反拍的也有不需要怎么调的,实属厉害。


 二、认识常用的调色工具

  要想调好色,对工具的熟悉运用也是必不可少的。我惯用photoshop调色,常用的调色工具有“曲线”“可选颜色”“色彩平衡”。

 1.曲线工具,快捷键ctrl+M

  刚刚接触PS的人都知道,“曲线”工具不光单单用来调节明暗,调色也同样好用。“曲线”里一共有4个通道,RGB、红、绿、蓝,其中RGB是用来调节明暗的,红绿蓝三个通道则可以用来调色。拿“蓝”通道来举个例子,在这个“曲线”工具的直方图里,上半用于调节亮部,下半则是用于调节暗部,曲线往左上拉是增加蓝色,往右下拉则增加黄色。调整体明暗度,偶尔也调整整体色彩,注意整体这个词,选区的东西很少用曲线去调整,具体效果如何,你可以在PS里面尝试看看。

  2.可选颜色

  “可选颜色”工具在调色时也特别常用,它有一个很大的好处就是可以选择颜色去调。拿“绿色”举个例子,调节“绿色”下面的的参数,只会改变图中的绿色部分,其实地方几乎不会受到影响。

  3.色彩平衡,快捷键ctrl+B

  “色彩平衡”是个很细腻的调色工具,几乎色彩就是靠它调的,注意色彩平衡只调整色彩不改变色彩的饱和度和亮度,可以适当调整,纠正偏色的图像,也可以根据自己的需要去调整。比如偏黄就往反方向滑动按钮,以此类推。注意调节的尺度。

  4.色阶,快捷键ctrl+L

  这个功能调黑白图片的时候特别好用,前一步做个去色命令,效果更明显。色阶主要是利用直方图调对比度和处理曝光的。比如想把字体抠出来,滑动杆上有三个小按钮,把它们都划到中间,叠在一起,就出来了,这是个小窍门。

 5.色相饱和度,快捷键ctrl+B

  “色相饱和度”是HSB滑竿直接调整H色调S饱和度B亮度,勾单色后整体加基调色,这点上与“黑白”效果是相同的;这个功能基本就是能让红色更红,绿色更绿,这样。

 6.通道混合器

  通道两大功能,一是去色同时能调整去色细节,因此比灰度之类直接变成黑白照强多了,另一功能是黑白图加色,建议没有PHOTOSHOP色彩功底,别用这个,因为是RGB三个色彩滑竿去加色,加色的时候又冒出三个RGB滑竿,一共几种变化,控制难度很大。

 三、了解色彩原理

  调色对图片的升华作用是毋庸置疑的,学好色彩原理很重要。色彩原理不是几句话就能说清楚的,这里简单说说建议自行百度。

  1.色彩的根基(三原色,相邻色,互补色建议查这三个)

  原色,又称为基色,即用以调配其他色彩的基本色。原色的色纯度最高,最纯净、最鲜艳。可以调配出绝大多数色彩,而其他颜色不能调配出三原色。

 2.色彩的特点(冷暖色)

  如红色、黄色、橙色属于暖色系,比如辣椒是红色,太阳是黄色,容易给人一种温暖、舒适、热情、充满能量的感觉;相反的,蓝色、绿色、紫色这类的冷色系,比如蓝色的大海,绿色的大树,则会使人感到忧郁、冷静、孤独、神秘深邃。所以说画画会让我们积累很多经验和提升艺术眼光。

  3.色彩对比

  色彩对比,主要指色彩的冷暖对比。画面中的冷色和暖色的分布比例决定了画面的整体色调,如果使用了冷暖对比色可使画面更加有层次感。

  四、模仿好的作品

  不会调色可以从模仿别人的色调开始,可以去看好的教程,跟着一步一步做,在模仿中学习,将别人的东西转换为自己的东西。

  五、不同的主题对色调的要求不同

  根据自己照片的主题去调色。不要一个小清新的主题调成很黑暗的色调,本想表达一种很压抑的情绪却调得过分明亮,就跑题了。

  六、切忌不要过调色过度

  调色要把握好度,要知道一张照片的颜色怎样才算刚刚好,颜色调得太多会破坏图像原来的味道,甚至毁了它。

  以上都是就初学者而言的,ps调色分为很多种风格,而动漫(手绘)、风景、人物的调色方法则更是大不同。

  动漫(手绘)一般的调色方法:图像-调整-色阶,不应该过亮(曝光度太高容易让五官轮廓不清晰),图像-调整-匹配颜色:颜色强度120~170

  风景一般调色方法:如果图片偏暗就图像-调整-曲线,不宜数值过大;图片正常或明亮,用图像-调整-色阶微调就好,切忌不要偏色;如果图片本身偏色严重,就用图像-调整-色彩平衡,缺什么补什么,如:图片偏蓝就用色彩平衡,往黄色那边拉。然后图像-调整-匹配颜色:色彩强度120~170或图像-调整-色相/饱和度:全图:30~60,总之鲜艳就好。

  平面设计中颜色的搭配十种基本的配色设计,分别叫做:无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、分裂补色设计(splitcomplement)、原色设计(primary)、二次色设计(secondary)以及三次色三色设计(tertiary)。

  色彩搭配的配色原则

  1)色调配色:指具有某种相同性质(冷暖调,明度,艳度)的色彩搭配在一起,色相越全越好,最少也要三种色相以上。比如,同等明度的红,黄,蓝搭配在一起。大自然的彩虹就是很好的色调配色。

  2)近似配色:选择相邻或相近的色相进行搭配。这种配色因为含有三原色中某一共同的颜色,所以很协调。因为色相接近,所以也比较稳定,如果是单一色相的浓淡搭配则称为同色系配色。出彩搭配:紫配绿,紫配橙,绿配橙。

  3)渐进配色:按色相、明度、艳度三要素之一的程度高低依次排列颜色。特点是即使色调沉稳,也很醒目,尤其是色相和明度的渐进配色。彩虹既是色调配色,也属于渐进配色。

  4)对比配色:用色相、明度或艳度的反差进行搭配,有鲜明的强弱。其中,明度的对比给人明快清晰的印象,可以说只要有明度上的对比,配色就不会太失败。比如,红配绿,黄配紫,蓝配橙。

  5)单重点配色:让两种颜色形成面积的大反差。“万绿丛中一点红”就是一种单重点配色。其实,单重点配色也是一种对比,相当于一种颜色做底色,另一种颜色做图形。

  6)分隔式配色:如果两种颜色比较接近,看上去不分明,可以靠对比色加在这两种颜色之间,增加强度,整体效果就会很协调了。最简单的加入色是无色系的颜色和米色等中性色。

  7)夜配色:严格来讲这不算是真正的配色技巧,但很有用。高明度或鲜亮的冷色与低明度的暖色配在一起,称为夜配色或影配色。它的特点是神秘、遥远,充满异国情调、民族风情。比

  如:凫色配勃艮第酒红,翡翠松石绿配黑棕。不同的颜色搭配在一起,给人的感觉是不同的,就广告这方面来讲,食物通常用橘色,绿色这种有食欲的颜色,电器类会选用红色,黑色,深蓝色和银色这类比较有科技感的颜色。不同颜色不同的纯度也会呈现给人们不同的视觉效果。不同的风格颜色也是很不同,日系清雅,韩式简洁,欧美大气,不要急,慢慢积累才叫经验。  

  以上就是优漫教育小编为大家介绍的“UI设计培训干货】:五分钟学会UI设计中的色彩调色?”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解, !