显示器成像及位深概述
图片由像素组成,每一个像素只能表达一种颜色,不同的像素之间的颜色可以相同也可以不同
人能够感受到五彩缤纷的世界是因为:视网膜上的锥状细胞分三种,各含有不同的感光色素,分别对红、蓝、绿光刺激敏感,三种锥细胞所发生的色觉冲动,由三条不同的神经通路上传到视觉中枢的不同部位产生不同的色觉

那么对于电脑来说, 硬盘里面只能存储数字和字母。计算机遇到相应的代码,就会在屏幕上指定的像素上显示对照的颜色。我们用数码相机拍摄的照片可能包含2的24次方种颜色(即24位色,也叫做真彩色)。2的24次方=16777216。这么多个颜色中,每个颜色都在颜色代码表中有一个对应。但事实上人类不可识别的,存在于自然界中的颜色远远超过这个数值

图片由像素组成,每一个像素只能表达一种颜色,不同的像素之间的颜色可以相同也可以不同。计算机会将一个屏幕,设定为一个带有X轴和Y轴的象限,这样图片上的每一个像素就对应一个坐标值。图片的记录就是依靠记录每个点的坐标值,以及这个点的颜色值。通过这种方式可以把一幅图像完全通过字母和数字记录到硬盘中并展示在相应的屏幕上。

针对于UI设计,常见的格式有jpg、bmp、png、webp 。虽然这些格式的图片本身的编码方式不同,但都需要显示在屏幕上,那么他就逃脱不了ARGB这四个通道。但这里需要指出的是:由于编码方式的不同,每一种格式在计算机中的存储方式也不同。但在屏幕上显示的逻辑应该是相通的(以小编现有的知识储量认为)
说了这么多,以上就是带大家简单的了解一下颜色以及图像
以便于能够轻松的理解位深的概念
分割线----------------------------------------------------------------------------------------------------------------------
设计师盆友都知道,我们常用的PS中有大量的默认参数,甚至有些参数我们这一辈子可能都不会去修改他。我们今天说的就是其中之一,尤其单纯的做高端互联网产品的设计师可能都不知道他在哪?
图像 ----> 模式 ----> RGB ----> 8位/通道
这里的8位指的就是位深,即ARGB每个通道上都255个颜色,在由这四个通道色彩叠加,最终形成一个像素上所要表现出的颜色。

我们常见的位深有:
6位、8位、16、24位、32位(多A 8)
以下各个通道的位深以最常见为例,并不绝对
6位:R 2 G 2 B 2
8位:R 3 G 2 B 3 或 A 2 R 2 G 2 B 2
16位:R 5 G 6 B 5 或 A 4 R 4 G 4 B 4
24位:R 8 G 8 B 8
32位:A 8 R 8 G 8 B 8

我们知道,计算机是以二进制来记录内容的,仅仅识别 0 1
那么颜色在计算机中也是这样存储的
例如:某1像素颜色为6位深色(R 2 G 2 B 2)
R占2位用二进制可以表示为:00 01 10 11
G占2位用二进制可以表示为:00 01 10 11
B占2位用二进制可以表示为:00 01 10 11
根据颜色叠加的原理该像素可能出现的颜色有:64种
同理:某1像素颜色为8位深色(R 3 G 2 B 3)
R占3位用二进制可以表示为:000 001 010 011 100 110 111
G占2位用二进制可以表示为:00 01 10 11
B占3位用二进制可以表示为:000 001 010 011 100 110 111
根据颜色叠加的原理该像素可能出现的颜色有:256种
以此类推:
16位(R 5 G 6 B 5)可能出现的颜色有:65536种
24位(R 8 G 8 B 8)可能出现的颜色有:16777216种
32位(A 8 R 8 G 8 B 8)只是在24位色的基础上增加了8位的透明度,颜色种类并没有增加
注:在输出非真彩色图片时,需要带有相应的色板,才可以在设备上显示出设计稿上的样子。
------------------------------------------------------------------------------------------------------------------
以上是位深的理论基础
我们在现实的设计中用到的并不是太多,小编在一家传媒公司上班,有时候为了压缩硬件成本,减小内存,软件会采用降低位深,以加快图片编解码的速度,这个时候就用上以上的知识了,在与研发的沟通中就会顺畅很多。
补充知识点:
我们常用的格式(jpg、webp、png)这些格式是不存在位深这个概念的,他们都为真彩色
我们在用PS导出web所用PNG时:会有两个选项PNG-8和PNG-24,但需要注意这里的8和24指的并不是位深。

PNG-8:指的是该图像中最多存在2的8次方种颜色,也就是256颜色(真色彩中挑选256个)
优点:占用内存小。 缺点:色彩越丰富的图像,效果越差,尤其边缘锯齿明显,透明度:仅有100%和0%
PNG-24:指的是在真色彩挑选需要的颜色
优点:色彩还原度高 缺点:不支持透明度
PNG-24+透明:指的是在真色彩挑选需要的颜色,并支持颜色带有透明度
优点:色彩还原度高 支持透明 缺点:占用内存大
以上的知识,在我们平时的设计工作中就足以应付,如果给你提供了帮助,
点个“赞”吧














































































